什麼是Ajax Ajax(Asynchronous JavaScript and XML):翻譯成中文就是非同步的JavaScript和XML。 從功能上來看是一種在無需重新載入整個網頁的情況下能夠更新部分網頁的技術。 傳統的網頁 想要更新內容或者提交表單就要重新載入或刷新頁面。 使用ajax技術的網 ...
什麼是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
}
}
