原生Ajax

XMLHttpRequest 对象

XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

XMLHttpRequest的方法：

image.png

XMLHttpRequest的属性：

image.png

image.png

HTTP请求的方法：

post和get

image.png

post和get的区别：

image.png

同步和异步的区别：

image.png

创建Ajax的步骤：

分为四步

image.png

1、创建Ajax对象：

只兼容非IE6

var oAjax = new XMLHttpRequest();

如何兼容IE6

var oAjax = new ActiveXObject("Microsoft.XMLHTTP");

完整兼容做法：

if (window.XMLHttpRequest){
                        var oAjax = new XMLHttpRequest();
                    }
                    else {
                        var oAjax = new ActiveXObject("Microsoft.XMLHTTP");
                    }

2、连接服务器：

open(方法,连接的文件名,异步传输)

oAjax.open('get','a.txt',true);

oAjax.open('get','a.txt?t='+new Data().getTime(),true);//阻止缓存

3、发送请求：

oAjax.send();

4、接收返回的信息：

oAjax.onreadystatechange = function(){
                        //oAjax.readyState   //告诉浏览器和服务器，进行到哪一步了
                        if (oAjax.readyState == 4){ //读取完成，未代表成功
                            //判断读取成功还是失败
                            if (oAjax.status == 200){ //200代表成功
                                alert("成功:" + oAjax.responseText);
                            }
                            else {
                                alert("失败:" + oAjax.status);
                            }
                        }

完整代码

html

js

把Ajax封装成函数

引用调用封装的Ajax