什么是Ajax

Ajax基本概念

Ajax(Asynchronous JavaScript and XML):翻譯成中文就是異步的JavaScript和XML。

從功能上來看是一種在無需重新加載整個(gè)網(wǎng)頁的情況下能夠更新部分網(wǎng)頁的技術(shù)。

傳統(tǒng)的網(wǎng)頁

想要更新內(nèi)容或者提交表單就要重新加載或刷新頁面。

使用ajax技術(shù)的網(wǎng)頁

通過后臺(tái)服務(wù)器進(jìn)行少量的數(shù)據(jù)交換，網(wǎng)頁就可以實(shí)現(xiàn)異步局部跟新。

Ajax出現(xiàn)前

Ajax技術(shù)出現(xiàn)之前，是一個(gè)同步交互的世界。

同步：客戶端發(fā)出請(qǐng)求，服務(wù)端去處理，然后響應(yīng)，這一段時(shí)間客戶端是處在等待的狀態(tài)，當(dāng)服務(wù)端處理響應(yīng)完成之后呢，客戶端重新加載頁面，如果中間信息錯(cuò)誤那么客戶端就會(huì)再次發(fā)起請(qǐng)求在此等待。

Ajax出現(xiàn)之后

Ajax出現(xiàn)之后世界變了 變成了異步的世界。

那我們?yōu)槭裁粗安皇褂卯惒侥?，是因?yàn)橹吧倭艘粋€(gè)對(duì)象XMLHttpRequest對(duì)象,在這個(gè)對(duì)象出現(xiàn)之前網(wǎng)頁開發(fā)都是采用同步的方式,出現(xiàn)之后呢發(fā)現(xiàn)可以進(jìn)行了異步的操作，這個(gè)對(duì)象是用于后臺(tái)和服器之間進(jìn)行數(shù)據(jù)交換，而且這個(gè)數(shù)據(jù)的交換不會(huì)重新加載整個(gè)頁面，這種情況下呢實(shí)現(xiàn)了在不刷新頁面的情況下對(duì)局部數(shù)據(jù)的更新，有了這個(gè)對(duì)象之后呢才有了Ajax的異步加載局部刷新。

Ajax的異步加載局部刷新功能的實(shí)現(xiàn)

1.首先第一個(gè)問題就是XHR這個(gè)對(duì)象怎么使用

1）先實(shí)例化一個(gè)XMLHttpRequest

var request = new XMLHttpRquest();

注意：現(xiàn)在大部分的瀏覽器都支持XMLHttpRequest對(duì)象和new這種方式，但是呢在IE6及以下版本的時(shí)代中呢XHR還只是ActiveXObject

解決方法：

Var request; 
If(window.XMLHttpRequest){ 
Reuest = new XMLHttpRequest(); 
}else{ 
Request = new ActiveXObject(“Microsoft.XMLHTTP”); 
}

2)請(qǐng)求：

在這之前我們來看一下什么事HTTP請(qǐng)求

是一種計(jì)算機(jī)通過網(wǎng)絡(luò)進(jìn)行通訊的規(guī)則。

是一種無狀態(tài)協(xié)議，不保留連接的相關(guān)信息，

客戶端向服務(wù)器發(fā)出請(qǐng)求，服務(wù)器響應(yīng)，之后呢連接就被關(guān)閉

一個(gè)完整的HTTP請(qǐng)求有七個(gè)步驟

    A.建立TCP連接

    B.客戶端向服務(wù)器發(fā)送請(qǐng)求的命令

    C.瀏覽器發(fā)送請(qǐng)求頭信息

    D.服務(wù)器給出響應(yīng)

    E.服務(wù)器發(fā)送應(yīng)答頭信息

    F.服務(wù)器向?yàn)g覽器發(fā)送數(shù)據(jù)

    G.服務(wù)器關(guān)閉TCP連接

分開來看：HTTP請(qǐng)求分為四個(gè)部分

HTTP請(qǐng)求的方法和動(dòng)作（get,pos）

正在請(qǐng)求的URL（請(qǐng)求地址）

請(qǐng)求頭（包含客戶端環(huán)境信息，身份驗(yàn)證信息等）

請(qǐng)求體，請(qǐng)求正文。

Get請(qǐng)求：一般用于信息獲取（http默認(rèn)求求方式）

Url傳參屬性和值都是可見的，對(duì)所發(fā)內(nèi)容大小有限制 一般在2000個(gè)字符

get請(qǐng)求安全的說法是因?yàn)槟阏?qǐng)求一次和請(qǐng)求一萬次效果是一樣的不會(huì)對(duì)數(shù)據(jù)造成影響。

Post請(qǐng)求：一般用于服務(wù)器數(shù)據(jù)修改

對(duì)所發(fā)信息沒有大小限制

HTTP響應(yīng)有三部分

1)一個(gè)數(shù)字和文字組成的狀態(tài)嗎，用來顯示請(qǐng)求是成功還是失敗

2)響應(yīng)頭，和請(qǐng)求頭信息一樣包含很多信息，例如服務(wù)器類型，日期時(shí)間，內(nèi)容類型和長度等

3)響應(yīng)體，響應(yīng)正文

HTTP響應(yīng)狀態(tài)嗎由三位數(shù)字組成，首位數(shù)字定義了狀態(tài)碼的類型：

1xx：信息類，表示接收到瀏覽器請(qǐng)求，正在進(jìn)一步處理

2xx:成功表示用戶請(qǐng)求被正確接受

3xx:重定向，表示沒有請(qǐng)求成功，客戶必須采取進(jìn)一步的動(dòng)作

4xx:客戶端錯(cuò)誤，表示客戶端請(qǐng)求有錯(cuò)誤404NOTFound意味著請(qǐng)求中所引用的文檔不存在

5xx：服務(wù)器錯(cuò)誤，表示服務(wù)器不能完成對(duì)請(qǐng)求的處理

通過XMLHttpRequest發(fā)送請(qǐng)求

1.創(chuàng)建

var request = new XMLHttpRquest();

2.發(fā)送請(qǐng)求

兩個(gè)方法：

open(method,url,async),Send(string)這兩種方法可以將請(qǐng)求發(fā)送到服務(wù)器

Request.open(get,get.php,true)
Request.Send()
Request.open(post,post.PHP,true) 
Request.Send()
Request.open(post,post.php,true) 
Request.setRequestHeader(‘Content-Type','application/x-www-form-urlencoded') 
Request.send(“name=王二狗&sex=男”);

send()中的內(nèi)容是要向后臺(tái)傳遞的參數(shù)，在get請(qǐng)求是通過url傳遞參數(shù)，所以get中send()里面的內(nèi)容可以省略，post方式中不能省略，省略了之后就是無意義的請(qǐng)求了

setRequestHeader是用來設(shè)置請(qǐng)求參數(shù)的類型，form

3.獲取響應(yīng)

responseText:獲取字符串形式的響應(yīng)式數(shù)據(jù)

responseXML:

Status和statusText：以數(shù)字和文本形式返回HTTP狀態(tài)嗎

getAllResponseHeader():獲取所有的響應(yīng)報(bào)頭

getResponseHeader():查詢相應(yīng)中的某個(gè)字段的值

在響應(yīng)返回成功時(shí)得到的通知，在實(shí)際操作中要監(jiān)聽

readyState屬性的變化，他的變化代表著服務(wù)器相應(yīng)的變化

0：表示服務(wù)器請(qǐng)求未初始化，open還沒有被調(diào)用

1：服務(wù)器連接已經(jīng)建立，open已經(jīng)被調(diào)用

2：請(qǐng)求已經(jīng)被接受，接收到頭部信息

3：處理中，接收到相應(yīng)主體

4：請(qǐng)求完成，并且響應(yīng)完成

Var request=new XMLHttpRequest();
Request.open(get,url,true)
Request.send();
request.onreadyState=function(){
 If(request.readeyState===4&&request.Status===200){
 做一些事情 request.responseText
 }
}

以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時(shí)也希望多多支持腳本之家！

最新評(píng)論