javascript中Ajax基礎(chǔ)知識點(diǎn)有哪些

小編給大家分享一下javascript中Ajax基礎(chǔ)知識點(diǎn)有哪些，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

Ajax基礎(chǔ)

Ajax的原理簡單來說通過XmlHttpRequest對象來向服務(wù)器發(fā)異步請求，從服務(wù)器獲得數(shù)據(jù)，然后用javascript來操作DOM而更新頁面。這其中最關(guān)鍵的一步就是從服務(wù)器獲得請求數(shù)據(jù)。原生創(chuàng)建ajax可分為以下四步

1.創(chuàng)建XMLHttpRequest對象

現(xiàn)代瀏覽器中創(chuàng)建一個(gè)XMLHttpRequest對象

var xhr = new XMLHttpRequest();

2.準(zhǔn)備請求

初始化上一步創(chuàng)建好的對象，這里可以接受三個(gè)參數(shù)，如下

xhr.open(method,url,async);

第一個(gè)參數(shù)表示請求類型，GET或者POST。
第二個(gè)參數(shù)表示目標(biāo)ur
第三個(gè)參數(shù)true代表異步模式請求；false代表同步模式，不建議使用；
異步模式下如果網(wǎng)絡(luò)阻塞或響應(yīng)不及時(shí)等，均會阻塞在這里等待 出現(xiàn)頁面掛起的情況

//GET請求
xhr.open("GET",demo.php?name=tsrot&age=24,true);

//POST請求
xhr.open("POST",demo.php,true);

3.發(fā)送請求

一般情況下，使用Ajax提交的參數(shù)多是些簡單的字符串，可以直接使用GET方法將要提交的參數(shù)寫到open方法的url參數(shù)中，此時(shí)send方法的參數(shù)為null或?yàn)榭铡?/p>

GET請求

xhr.open("GET",demo.php?name=tsrot&age=24,true); 
xhr.send(null);

POST請求

xhr.open("POST",demo.php,true); 
xhr.setRequestHeder("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");
xhr.send()

4.處理請求

xhr.onreadystatechange = function(){
    if(xhr.readyState == 4 && xhr.status == 200){
        console.log(xhr.responseText); 
      }
}

onreadystatechange ：當(dāng)處理過程發(fā)生變化的時(shí)候執(zhí)行下面的函數(shù)
readyState ：ajax處理過程0：請求未初始化（還沒有調(diào)用 open()）。
1：請求已經(jīng)建立，但是還沒有發(fā)送（還沒有調(diào)用 send()）。
2：請求已發(fā)送，正在處理中（通常現(xiàn)在可以從響應(yīng)中獲取內(nèi)容頭）。
3：請求在處理中；通常響應(yīng)中已有部分?jǐn)?shù)據(jù)可用了，但是服務(wù)器還沒有完成響應(yīng)的生成。
4：響應(yīng)已完成；您可以獲取并使用服務(wù)器的響應(yīng)了。

responseText：獲得字符串形式的響應(yīng)數(shù)據(jù)responseXML：獲得 XML形式的響應(yīng)數(shù)據(jù)返回值一般為json字符串，可以用JSON.parse(xhr.responseText)轉(zhuǎn)化為JSON對象

5.樣例

var xhr = false; 
if( XMLHttpRequest){ 
    xhr = new XMLHttpRequest();
    }
else{ 
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
if(xhr) {
    //如果xhr創(chuàng)建失敗，還是原來的false 
    xhr.open("GET","./data.json",true); 
    xhr.send(); 
    xhr.onreadystatechange = function(){ 
        if(xhr.readyState == 4 && xhr.status == 200){                                                          console.log(JSON.parse(xhr.responseText).name);
          }
      }
}

以上是“javascript中Ajax基礎(chǔ)知識點(diǎn)有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！