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

<input type="button" value="读取" id="btn1"/>

js

<script>
            window.onload = function(){
                var oBtn = document.getElementById("btn1");
                oBtn.onclick = function(){
                    //1、创建Ajax对象
                    //只兼容非IE6浏览器
                    //var oAjax = new XMLHttpRequest();
                    
                    //IE6
                    //var oAjax = new ActiveXObject("Microsoft.XMLHTTP");
                    //alert(oAjax);
                    
                    //要做兼容
                    //第一步创建Ajax对象
                    if (window.XMLHttpRequest){
                        var oAjax = new XMLHttpRequest();
                    }
                    else {
                        var oAjax = new ActiveXObject("Microsoft.XMLHTTP");
                    }
                    
                    //alert(oAjax);
                    //第二步：连接服务器
                    //open(方法,连接的文件名,异步传输)
                    
                    //oAjax.open('get','a.txt',true);
                    oAjax.open('get','a.txt?t='+new Data().getTime(),true);//阻止缓存
                    
                    //第三步：发送请求
                    oAjax.send();
                    
                    //第四步：接收返回的信息
                    oAjax.onreadystatechange = function(){
                        //oAjax.readyState   //告诉浏览器和服务器，进行到哪一步了
                        if (oAjax.readyState == 4){ //读取完成，未代表成功
                            //判断读取成功还是失败
                            if (oAjax.status == 200){ //200代表成功
                                alert("成功:" + oAjax.responseText);
                            }
                            else {
                                alert("失败:" + oAjax.status);
                            }
                        }
                    };
                };
            };
        </script>

把Ajax封装成函数

<script>
            function ajax(url,fnSucc,fnFaild){
                //1、创建Ajax对象
                    if (window.XMLHttpRequest){
                        var oAjax = new XMLHttpRequest();
                    }
                    else {
                        var oAjax = new ActiveXObject("Microsoft.XMLHTTP");
                    }
                    
                    //2、连接服务器
                    //open(方法,连接的文件名,异步传输)
                    oAjax.open('get',url,true);
                    
                    //3、发送请求
                    oAjax.send();
                    
                    //4、接收返回的信息
                    oAjax.onreadystatechange = function(){
                        //oAjax.readyState   //告诉浏览器和服务器，进行到哪一步了
                        if (oAjax.readyState == 4){ //读取完成
                            //判断读取成功还是失败
                            if (oAjax.status == 200){ //200代表成功
                                fnSucc(oAjax.responseText);
                            }
                            else {
                                if (fnFaild){
                                    fnFaild(oAjax.status);
                                }
                            }
                        }
                    };
            }
        </script>

引用调用封装的Ajax

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="Ajax.js"></script>
        <script>
            window.onload = function(){
                var oBtn = document.getElementById("btn1");
                oBtn.onclick = function(){
                    ajax("a.txt",function(str){
                        alert(str);
                    });
                };
            };
        </script>
    </head>
    <body>
        <input type="button" value="读取" id="btn1"/>
    </body>
</html>