使用JavaScript实现ajax获取文本及html内容

ajax使用jQuery的话很容易就可以实现了,但是使用原生JavaScript要如何实现呢,原生JavaScript提供了XMLHttpRequest,通过它即可实现ajax了。获取文本可以直接输出结果即可,获取html文本,必须使用innerHTML才能正常显示html相关标签及内容、样式。当然,我们要是直接使用jQurey的$ajax()方法,很容易就能实现原生JavaScript要写很长代码的ajax功能。当然jQurey库都是使用原生JavaScript编写并封装的,因此他们是完全分不开的。下面我们来看看JavaScript原生是如何实现ajax功能!
1、JavaScript通过ajax获取内容

window.onload = function () {
    //1.获得ID元素(此ID对应的是一个a链接元素),为其添加onclick响应函数
    document.getElementById("TextAjax").onclick = function () {
        //3.创建一个XMLHttpRequest对象
        var request = new XMLHttpRequest();
        //4.准备发送请求的数据:url
        var url = this.href;
        //5.设置请求模式 post、get方法
        var method = "GET";
        //6.调用XMLHttpRequest 对象的open方法
        request.open(method,url);
        //7.调用XMLHttpRequest 对象的send方法
        request.send(null);
        //8.为XMLHttpRequest 对象添加onreadystatechange响应函数
        request.onreadystatechange = function () {
            //9.判断响应是否完成:XMLHttpRequest对象的readyState属性值为4的时候
            if (request.readyState == 4){
                //10.再判断响应是否可用:XMLHttpRequest对象的status属性值为200
                if(request.status == 200 || request.status ==304){
                    //alert(request.responseText);//打印响应结果responseText(text、html内容)
                    //document.write(request.responseText);//打印响应结果responseText(text内容)
                    //打印响应结果responseText(html内容)
                    document.getElementById("Ajax1").innerHTML = request.responseText;
                }
            }
        };
        //2.取消当前a节点的默认行为
        return false;
    };

2、demo演示地址
原生JavaScript实现ajax实例

发表评论

电子邮件地址不会被公开。 必填项已用*标注