Ajax編程（HTTP請求與響應及API）詳解

時間 2019-11-30

標籤 ajax 編程 http 請求響應 api 詳解欄目 Ajax 简体版

原文原文鏈接

AJAX編程

即 Asynchronous [e'sɪŋkrənəs] Javascript And XML， AJAX 不是一門的新的語言，而是對現有技術的綜合利用。本質是在HTTP協議的基礎上以異步的方式與服務器進行通訊。php

異步：指某段程序執行時不會阻塞其它程序執行，其表現形式爲程序的執行順序不依賴程序自己的書寫順序，相反則爲同步。

　　其優點在於不阻塞程序的執行，從而提高總體執行效率。web

　　XMLHttpRequest能夠以異步方式的處理程序。面試

XMLHttpRequest

瀏覽器內建對象，用於在後臺與服務器通訊(交換數據) ，由此咱們即可實現對網頁的部分更新，而不是刷新整個頁面。編程

/*js 內置的 http 請求對象  XMLHttpRequest*/

    /*1.怎麼使用 這個內置對象*/
    var xhr = new XMLHttpRequest;

    /*2.怎麼樣去組請求*/
    /*請求的行*/
    xhr.open('post','01.php');

    /*請求頭*/
    //get  沒有必要設置
    //post 必須設置 Content-Type: application/x-www-form-urlencoded
    xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

    /*請內容*/
    /*3.發送請求*/
    xhr.send("name=xjj&age=10");

http請求瀏覽器

一個完整的http請求過程，一般有下面七步驟

一、 創建tcp鏈接安全

二、 web瀏覽器向web服務器發送請求命令服務器

三、 web瀏覽器發送請求頭信息併發

四、 web服務器應答app

五、 web服務器發送應答頭信息異步

六、 web服務器像瀏覽器發送數據

七、 web服務器關閉tcp鏈接

HTTP請求3個組成部分與XMLHttpRequest方法的對應關係

一、請求行：http請求的方法或動做，好比get或者是post請求，正在請求的URL，總得知道請求的地址是什麼

xhr.open('post','01.php');

二、請求頭：包含一些客戶端環境信息，身份驗證信息等

xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); //get請求能夠不設置

三、請求主體：也就是請求正文，請求正文中能夠包含客戶提交的查詢字符串信息，表單信息等等

xhr.send("name=xjj&age=10"); //get能夠傳空

注意書寫順序

get與post

get：

一、通常用於信息獲取，查詢

二、使用URL傳遞參數

三、對發送信息的數量也有限制，通常在2000個字符（4k左右）

四、發送的信息任何人都是可見的（不安全）

五、 get請求是冪等，執行一次和一萬次效果同樣，影響相同

post：

一、通常用於修改服務器上的資源。通常用做於發送表單數據，新建，修改，刪除等等

二、對所發送信息的數量無限制

三、數據會嵌入到http的請求體中，安全

一個http響應通常由三部分組成

一、一個數字和文字組成的狀態碼，用來顯示請求是成功仍是失敗

a) http狀態碼由三位數字構成，其中首位數字定義了狀態碼的類型：

b) 1xx：信息類，表示收到web瀏覽器請求，正在進一步的處理中

c) 2xx：成功，表示用戶請求被正確接收，理解和處理例如：200 ok

d) 3xx：重定向，表示請求沒有成功，客戶必須採起進一步的動做

e) 4xx：客戶端錯誤，表示客戶端提交的請求有錯誤，例如：404 not found，意味着請求所引用的文檔不存在

f) 5xx：服務器錯誤，表示服務器不能完成對請求的處理，例如：500

二、 響應頭，響應頭也和請求頭同樣包含許多有用的信息，例如服務器類型，日期時間，內容類型和長度等

三、 響應體，也就是響應正文

XMLHttpRequest發送請求

一、 open（method【規定了發送的方式是get仍是post】，url【必需，請求地址】，async【請求同步/異步（默認值true）】）

二、 send（string【get能夠不填寫或許null，post就必定要填寫參數，不然無心義】）

這些方法能夠將請求發送到服務器

XMLHttpRequest取得響應

一、 responseText：得到字符串形式的響應數據

二、 responseXML：得到XML形式的響應數據

三、 status和statusText：以數字和文本形式返回http狀態碼

四、 getAllResponseHeader（）：獲取全部的響應報頭

五、 getResponseHeader（）：查詢響應中的某個字段的值

注意書寫順序

HTTP響應是由服務端發出的，做爲客戶端更應關心的是響應的結果。

HTTP響應3個組成部分與XMLHttpRequest方法或屬性的對應關係。

因爲服務器作出響應須要時間（好比網速慢等緣由），因此咱們須要監聽服務器響應的狀態，而後才能進行處理。

    if(xhr.readyState == 4 && xhr.status == 200){
        console.log('ok');
        console.log(xhr.responseText);
        /*把內容渲染在頁面當中*/
        document.querySelector('#result').innerHTML = xhr.responseText;
    }
**readyState**

一、獲取狀態行（包括狀態碼&狀態信息）

xhr.status //狀態碼

xhr.statusText //狀態碼信息

二、獲取響應頭

xhr.getResponseHeader('Content-Type');
xhr.getAllResponseHeaders();

三、響應主體

xhr.responseText
xhr.responseXML

咱們須要檢測並判斷響應頭的MIME類型後肯定使用request.responseText或者request.responseXML

readyState屬性

0：請求未初始化，open還沒有調用
1：服務器鏈接已創建，open已經調用了
2：請求已接受，也就是接收到頭信息了
3：請求處理中，也就是接收到響應主體了
4：請求已完成，且響應已就緒，也就是響應完成了

onreadystatechange是Javascript的事件的一種，其意義在於監聽XMLHttpRequest的狀態

var xhr = new XMLHttpRequest(); /*設置請求行*/ xhr.open('get', '02.XMLHttpRequest.php'); /*設置請求頭*/ xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); /*設置請求主體併發送*/ xhr.send(null); /*=========響應===========*/

        /*何時去接受後臺的數據*/

        /*經過一些事件或者回調函數去監聽*/

        /*經過去監聽 通信的狀態*/

        /*通信狀態 就會有多個通信的狀態 請求發送前 請求中 響應中 響應完成 */ xhr.onreadystatechange = function() { if (xhr.status === 200&xhr.readyState===4) { console.log('獲取響應的主體' + xhr.responseText);//作一些事情 xhr.responseText
 } else { alert('響應失敗'); } }

API詳解

xhr.open() 發起請求，能夠是get、post方式 xhr.setRequestHeader() 設置請求頭 xhr.send() 發送請求主體get方式使用xhr.send(null) xhr.onreadystatechange = function () {} 監聽響應狀態 xhr.status表示響應碼，如200 xhr.statusText表示響應信息，如OK xhr.getAllResponseHeaders() 獲取所有響應頭信息 xhr.getResponseHeader('key') 獲取指定頭信息 xhr.responseText、xhr.responseXML都表示響應主體

注：GET和POST請求方式的差別（面試題）

一、GET沒有請求主體，使用xhr.send(null)

二、GET能夠經過在請求URL上添加請求參數

三、POST能夠經過xhr.send('name=itcast&age=10')

四、POST須要設置

五、GET效率更好（應用多）

六、GET大小限制約4K，POST則沒有限制