什么是Ajax

Ajax基本概念

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

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

傳統的網頁

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

使用ajax技術的網頁

通過后臺服務器進行少量的數據交換，網頁就可以實現異步局部跟新。

Ajax出現前

Ajax技術出現之前，是一個同步交互的世界。

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

Ajax出現之后

Ajax出現之后世界變了 變成了異步的世界。

那我們為什么之前不使用異步呢，是因為之前少了一個對象XMLHttpRequest對象,在這個對象出現之前網頁開發都是采用同步的方式,出現之后呢發現可以進行了異步的操作，這個對象是用于后臺和服器之間進行數據交換，而且這個數據的交換不會重新加載整個頁面，這種情況下呢實現了在不刷新頁面的情況下對局部數據的更新，有了這個對象之后呢才有了Ajax的異步加載局部刷新。

Ajax的異步加載局部刷新功能的實現

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

1）先實例化一個XMLHttpRequest

var request = new XMLHttpRquest();

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

解決方法：

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

2)請求：

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

是一種計算機通過網絡進行通訊的規則。

是一種無狀態協議，不保留連接的相關信息，

客戶端向服務器發出請求，服務器響應，之后呢連接就被關閉

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

    A.建立TCP連接

    B.客戶端向服務器發送請求的命令

    C.瀏覽器發送請求頭信息

    D.服務器給出響應

    E.服務器發送應答頭信息

    F.服務器向瀏覽器發送數據

    G.服務器關閉TCP連接

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

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

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

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

請求體，請求正文。

Get請求：一般用于信息獲取（http默認求求方式）

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

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

Post請求：一般用于服務器數據修改

對所發信息沒有大小限制

HTTP響應有三部分

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

2)響應頭，和請求頭信息一樣包含很多信息，例如服務器類型，日期時間，內容類型和長度等

3)響應體，響應正文

HTTP響應狀態嗎由三位數字組成，首位數字定義了狀態碼的類型：

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

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

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

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

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

通過XMLHttpRequest發送請求

1.創建

var request = new XMLHttpRquest();

2.發送請求

兩個方法：

open(method,url,async),Send(string)這兩種方法可以將請求發送到服務器

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()中的內容是要向后臺傳遞的參數，在get請求是通過url傳遞參數，所以get中send()里面的內容可以省略，post方式中不能省略，省略了之后就是無意義的請求了

setRequestHeader是用來設置請求參數的類型，form

3.獲取響應

responseText:獲取字符串形式的響應式數據

responseXML:

Status和statusText：以數字和文本形式返回HTTP狀態嗎

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

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

在響應返回成功時得到的通知，在實際操作中要監聽

readyState屬性的變化，他的變化代表著服務器相應的變化

0：表示服務器請求未初始化，open還沒有被調用

1：服務器連接已經建立，open已經被調用

2：請求已經被接受，接收到頭部信息

3：處理中，接收到相應主體

4：請求完成，并且響應完成

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

以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持武林網！