XMLHttpRequest 對(duì)象

XMLHttpRequest 用于在后臺(tái)與服務(wù)器交換數(shù)據(jù)。這意味著可以在不重新加載整個(gè)網(wǎng)頁(yè)的情況下，對(duì)網(wǎng)頁(yè)的某部分進(jìn)行更新。

XMLHttpRequest的方法：

image.png

XMLHttpRequest的屬性：

image.png

image.png

HTTP請(qǐng)求的方法：

post和get

image.png

post和get的區(qū)別：

image.png

同步和異步的區(qū)別：

image.png

創(chuàng)建Ajax的步驟：

分為四步

image.png

1、創(chuàng)建Ajax對(duì)象：

只兼容非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、連接服務(wù)器：

open(方法,連接的文件名,異步傳輸)

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

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

3、發(fā)送請(qǐng)求：

oAjax.send();

4、接收返回的信息：

oAjax.onreadystatechange = function(){
                        //oAjax.readyState   //告訴瀏覽器和服務(wù)器，進(jìn)行到哪一步了
                        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、創(chuàng)建Ajax對(duì)象
                    //只兼容非IE6瀏覽器
                    //var oAjax = new XMLHttpRequest();
                    
                    //IE6
                    //var oAjax = new ActiveXObject("Microsoft.XMLHTTP");
                    //alert(oAjax);
                    
                    //要做兼容
                    //第一步創(chuàng)建Ajax對(duì)象
                    if (window.XMLHttpRequest){
                        var oAjax = new XMLHttpRequest();
                    }
                    else {
                        var oAjax = new ActiveXObject("Microsoft.XMLHTTP");
                    }
                    
                    //alert(oAjax);
                    //第二步：連接服務(wù)器
                    //open(方法,連接的文件名,異步傳輸)
                    
                    //oAjax.open('get','a.txt',true);
                    oAjax.open('get','a.txt?t='+new Data().getTime(),true);//阻止緩存
                    
                    //第三步：發(fā)送請(qǐng)求
                    oAjax.send();
                    
                    //第四步：接收返回的信息
                    oAjax.onreadystatechange = function(){
                        //oAjax.readyState   //告訴瀏覽器和服務(wù)器，進(jìn)行到哪一步了
                        if (oAjax.readyState == 4){ //讀取完成，未代表成功
                            //判斷讀取成功還是失敗
                            if (oAjax.status == 200){ //200代表成功
                                alert("成功:" + oAjax.responseText);
                            }
                            else {
                                alert("失敗:" + oAjax.status);
                            }
                        }
                    };
                };
            };
        </script>

把Ajax封裝成函數(shù)

<script>
            function ajax(url,fnSucc,fnFaild){
                //1、創(chuàng)建Ajax對(duì)象
                    if (window.XMLHttpRequest){
                        var oAjax = new XMLHttpRequest();
                    }
                    else {
                        var oAjax = new ActiveXObject("Microsoft.XMLHTTP");
                    }
                    
                    //2、連接服務(wù)器
                    //open(方法,連接的文件名,異步傳輸)
                    oAjax.open('get',url,true);
                    
                    //3、發(fā)送請(qǐng)求
                    oAjax.send();
                    
                    //4、接收返回的信息
                    oAjax.onreadystatechange = function(){
                        //oAjax.readyState   //告訴瀏覽器和服務(wù)器，進(jìn)行到哪一步了
                        if (oAjax.readyState == 4){ //讀取完成
                            //判斷讀取成功還是失敗
                            if (oAjax.status == 200){ //200代表成功
                                fnSucc(oAjax.responseText);
                            }
                            else {
                                if (fnFaild){
                                    fnFaild(oAjax.status);
                                }
                            }
                        }
                    };
            }
        </script>

引用調(diào)用封裝的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>