用javascript寫原生ajax(筆記)

 

　　AJAX  的全名叫作  Asynchronous JavaScript and XML（異步的 JavaScript 和 XML）。它最大的優勢是在不從新加載整個頁面的狀況下，能夠與服務器交換數據並更新部分網頁內容，優化用戶體驗。平時本身使用 ajax 作請求都是用的 jquery 裏封裝好的 ajax 函數，下面用javascript來寫一寫原生的ajax請求。

（

　　插播一條ajax的知識點：

   

 

　      ajax請求頭中特有的字段：X-Requested-With: XMLHttpRequest; 你能夠在服務端經過這個字段來判斷一個http請求是否爲ajax請求。

）

大體分爲如下四個步驟：

一、建立ajax對象 （考慮各個瀏覽器的兼容性）

二、鏈接到服務器

三、發送請求

四、接收返回值進行處理

 

<script> window.onload=function() { //由一個按鈕來觸發發送ajax請求的動做
    var btn = document.getElementById("btn"); btn .onclick = function() { //1.建立ajax對象，考慮瀏覽器的兼容性

        var xhr;    //ajax對象

        if(window.XMLHttpRequest) //若是有XMLHttpRequest，那就是非IE6版本如下的瀏覽器。
 { //建立ajax對象
            var xhr= new XMLHttpRequest(); } else
        //若是沒有XMLHttpRequest，那就是IE6版本一下的瀏覽器
 { //IE6瀏覽器建立ajax對象
            var xhr= new ActiveXObject("Microsoft.XMLHTTP"); } //2.鏈接服務器 //open(方法、文件名、是否異步傳輸） //方法： //傳輸方式是get方式仍是post方式。 //文件名 //告訴服務器要讀哪一個文件 //異步傳輸 //基本上都是用異步

        /*請求爲GET方式*/
        /*GET請求方式會首先找瀏覽器中的緩存，加上t='+new Date().getTime()"的目的是爲了消除緩存，每次的t的值不同。*/ xhr.open("GET","/quest?t='+new Date().getTime()",true); //3.發送請求
        /*POST請求時能夠帶參數，做爲請求的參數*/ xhr.send(); //4.接收返回 //客戶端和服務器端有交互的時候會調用onreadystatechange
        xhr.onreadystatechange=function() { //xhr.readyState //瀏覽器和服務器，進行到哪一步了。 //0->（未初始化）：尚未調用 open() 方法。 //1->（載入）：已調用 send() 方法，正在發送請求。 //2->（載入完成）：send() 方法完成，已收到所有響應內容。 //3->（解析）：正在解析響應內容。 //4->（完成）：響應內容解析完成，能夠在客戶端調用。
            if(xhr.readyState==4) { if(xhr.status==200)//判斷是否成功,若是是200，就表明成功
 { alert("成功"+xhr.responseText); /*xhr.responseText 是服務器返回的文本信息*/ } else { alert("失敗"); } } }; } }; </script>                  

 

以上就是簡單的使用javascript寫原生ajax請求的代碼。

 

最後補充：ajax是不能進行跨域請求的，這也是侷限性所在，若是想要進行跨域請求，可使用jsonp來實現，它利用的是請求js文件時能夠進行跨域請求的原理。