Ajax 的一些概念 解析

什麼是Ajax

Ajax基本概念

Ajax(Asynchronous JavaScript and XML):翻譯成中文就是異步的JavaScript和XML。 
從功能上來看是一種在無需從新加載整個網頁的狀況下可以更新部分網頁的技術。javascript

傳統的網頁 
想要更新內容或者提交表單就要從新加載或刷新頁面。php

使用ajax技術的網頁 
經過後臺服務器進行少許的數據交換,網頁就能夠實現異步局部跟新。java

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請求分爲四個部分app

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
    }
}
相關文章
相關標籤/搜索