什么是Ajax

Ajax基本概念

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

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

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

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

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

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

Ajax出現(xiàn)前

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

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

Ajax出現(xiàn)之后

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

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

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

1.首先第一個問題就是XHR這個對象怎么使用

1）先實例化一個XMLHttpRequest

var request = new XMLHttpRquest();

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

解決方法：

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

2)請求：

在這之前我們來看一下什么事HTTP請求

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

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

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

一個完整的HTTP請求有七個步驟

    A.建立TCP連接

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

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

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

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

    F.服務(wù)器向瀏覽器發(fā)送數(shù)據(jù)

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

分開來看：HTTP請求分為四個部分

HTTP請求的方法和動作（get,pos）

正在請求的URL（請求地址）

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

請求體，請求正文。

Get請求：一般用于信息獲?。╤ttp默認求求方式）

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

get請求安全的說法是因為你請求一次和請求一萬次效果是一樣的不會對數(shù)據(jù)造成影響。

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

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

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

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

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

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

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

1xx：信息類，表示接收到瀏覽器請求，正在進一步處理

2xx:成功表示用戶請求被正確接受

3xx:重定向，表示沒有請求成功，客戶必須采取進一步的動作

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

5xx：服務(wù)器錯誤，表示服務(wù)器不能完成對請求的處理

通過XMLHttpRequest發(fā)送請求

1.創(chuàng)建

var request = new XMLHttpRquest();

2.發(fā)送請求

兩個方法：

open(method,url,async),Send(string)這兩種方法可以將請求發(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)容是要向后臺傳遞的參數(shù)，在get請求是通過url傳遞參數(shù)，所以get中send()里面的內(nèi)容可以省略，post方式中不能省略，省略了之后就是無意義的請求了

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

3.獲取響應(yīng)

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

responseXML:

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

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

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

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

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

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

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

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

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

4：請求完成，并且響應(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)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！

最新評論