目錄

一.AJAX簡(jiǎn)介

二.XMLHttpRequests對(duì)象

2.1XMLHttpRequests對(duì)象簡(jiǎn)介

2.2創(chuàng)建XMLHttpRequests對(duì)象

2.3定義回調(diào)函數(shù)

2.4發(fā)送請(qǐng)求

?2.5XMLHttpRequests對(duì)象方法介紹

2.6XMLHttpRequests對(duì)象屬性

三.向服務(wù)器發(fā)送請(qǐng)求

3.1發(fā)送請(qǐng)求

3.2使用GET還是POST

3.3使用GET來發(fā)送信息

3.4POST請(qǐng)求

一.AJAX簡(jiǎn)介

服務(wù)器向?yàn)g覽器傳輸數(shù)據(jù)時(shí)，瀏覽器需要跳轉(zhuǎn)到一個(gè)新的“URL”或者“重新渲染網(wǎng)頁”，才可以接收來自服務(wù)器的數(shù)據(jù)，這對(duì)于現(xiàn)代用戶來說是不友好的，因?yàn)橛^感極差

那么有沒有一種辦法可以使瀏覽器接收服務(wù)器的數(shù)據(jù)，并且不更新網(wǎng)頁只是動(dòng)態(tài)的更新網(wǎng)頁的部分?jǐn)?shù)據(jù)呢？

隨著這個(gè)問題“AJAX”應(yīng)運(yùn)而生，使用“AJAX”可以做到以下事情：

• 不刷新頁面更新網(wǎng)頁
• 在頁面加載后從服務(wù)器請(qǐng)求數(shù)據(jù)
• 在頁面加載后從服務(wù)器接收數(shù)據(jù)
• 在后臺(tái)向服務(wù)器發(fā)送數(shù)據(jù)

二.XMLHttpRequests對(duì)象

2.1XMLHttpRequests對(duì)象簡(jiǎn)介

XMLHttpRequests對(duì)象是AJAX的基石

使用XMLHttpRequests對(duì)象允許前端向后端發(fā)送一個(gè)數(shù)據(jù)請(qǐng)求用來獲得數(shù)據(jù)

這個(gè)數(shù)據(jù)請(qǐng)求的過程可以分為下面"四大步”：

• 創(chuàng)建XMLHttpRequests對(duì)象
• 定義回調(diào)函數(shù)
• 打開XMHttpRequests對(duì)象
• 向服務(wù)器發(fā)送請(qǐng)求

2.2創(chuàng)建XMLHttpRequests對(duì)象

創(chuàng)建XMLHttpRequests對(duì)象的語法：

var myXMLR = new XMLHttpRequests();

2.3定義回調(diào)函數(shù)

回調(diào)函數(shù)是作為參數(shù)傳遞給另一個(gè)函數(shù)的函數(shù)

定義回調(diào)函數(shù)我們可以使用XMLHttpRequests對(duì)象提供的“onload()”函數(shù)，該函數(shù)用來指定當(dāng)請(qǐng)求響應(yīng)后應(yīng)該執(zhí)行的函數(shù)

xhttp.onload = function(){

? ? ? ? //當(dāng)相應(yīng)準(zhǔn)備就緒時(shí)要做什么

}

2.4發(fā)送請(qǐng)求

向服務(wù)器發(fā)送請(qǐng)求，我們可以使用“open()”方法來打開XMLHttpRequests對(duì)象，再使用“send()”方法來發(fā)送請(qǐng)求

xhttp.open("open","ajax_info.txt");

xhttp.send();

?2.5XMLHttpRequests對(duì)象方法介紹

方法	描述
new XMLHttpRequests()	創(chuàng)建新的XMLHttpRequests對(duì)象
abort()	取消當(dāng)前請(qǐng)求
getAllResponseHeaders()	返回頭部信息
getReponseHeader()	返回特定的頭部信息
open(method,url,async,user,psw)	規(guī)定請(qǐng)求 method:請(qǐng)求類型GET或POST url:文件位置 async:true(異步)或false(同步) user:可選的用戶名 psw:可選的密碼
send()	向服務(wù)器發(fā)送請(qǐng)求，用于GET請(qǐng)求
send(string)	向服務(wù)器發(fā)送請(qǐng)求，用于POST請(qǐng)求
setRequestHeader()	將標(biāo)簽/值對(duì)添加到要發(fā)送的標(biāo)頭

2.6XMLHttpRequests對(duì)象屬性

屬性	描述
onload	定義接收到(加載)請(qǐng)求時(shí)要調(diào)用的函數(shù)
onreadystatechange	定義當(dāng)readyState屬性發(fā)生變化時(shí)調(diào)用的函數(shù)
readyState	保存XMLHttpRequests的狀態(tài) 0：請(qǐng)求未初始化 1：服務(wù)器連接已建立 2：請(qǐng)求已收到 3：正在處理請(qǐng)求 4：請(qǐng)求已完成響應(yīng)且已就緒
responseText	以字符串形式返回響應(yīng)數(shù)據(jù)
responseXML	以XML數(shù)據(jù)返回響應(yīng)數(shù)據(jù)
status	返回請(qǐng)求的狀態(tài)號(hào) 200："ok" 403："Forbidden" 404："Not Found"
statusText	返回狀態(tài)文本,比如("OK"、"Not Found"等)

ps：“當(dāng)readyState為4且status為200時(shí)，響應(yīng)就緒”

三.向服務(wù)器發(fā)送請(qǐng)求

3.1發(fā)送請(qǐng)求

在上面我們已經(jīng)提到過，可以使用“open()”和“send()”方法搭配向服務(wù)器發(fā)送請(qǐng)求

open(method,url,async,user,psw)	規(guī)定請(qǐng)求 method:請(qǐng)求類型GET或POST url:文件位置 async:true(異步)或false(同步) user:可選的用戶名 psw:可選的密碼
send()	向服務(wù)器發(fā)送請(qǐng)求，用于GET請(qǐng)求
send(string)	向服務(wù)器發(fā)送請(qǐng)求，用于POST請(qǐng)求

3.2使用GET還是POST

在大多數(shù)情況下，GET比POST更簡(jiǎn)單更快

但在以下情況請(qǐng)考慮使用POST：

• 緩存文件不是選項(xiàng)(更新服務(wù)器上的文件或數(shù)據(jù)庫)
• 向服務(wù)器發(fā)送大量數(shù)據(jù)(POST無大小限制)
• 發(fā)送用戶輸入(可包含未知字符)，POST比GET更強(qiáng)大更安全

3.3使用GET來發(fā)送信息

如果想要使用GET來發(fā)送信息，可以在URL中構(gòu)造信息：

xhttp.open("GET","demo.asp?fname=Bill&&name=Gates",true);
xhttp.send();

3.4POST請(qǐng)求

一條簡(jiǎn)單的POST請(qǐng)求：

xhttp.open("POST","demo_post.asp",true);

xhttp.send();

如果需要像HTML表單那樣POST數(shù)據(jù)，請(qǐng)通過setRequestHeader()添加一個(gè)HTTP頭部，并在send()方法中定義要發(fā)送的數(shù)據(jù)

例如：

xhttp.open("POST","ceshi.asp",true);
xhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhttp.send("fname=Bill&&name=Gates");