Ajax全稱：Asynchronous JavaScript and XML(異步的JavaScript和XML)

.Ajax不是某種編程語言

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

?

后面引入XMLHttpRequest對象用于后臺和服務(wù)器交換數(shù)據(jù)，可以在不重新加載整個頁面的前提下進(jìn)行數(shù)據(jù)的刷新。

1.運(yùn)用HTML和CSS來實(shí)現(xiàn)頁面，表達(dá)信息；

2.運(yùn)用XMLHttpRequest和web服務(wù)器進(jìn)行數(shù)據(jù)的異步交換；

3.運(yùn)用JavaScript操作DOM，實(shí)現(xiàn)動態(tài)局部刷新；

一、XMLHttpRequest對象的創(chuàng)建

1 //var request=new XMLHttpRequest();//不能兼容ie6 2 3 var request; 4 if(window.XMLHttpRequest(){ 5 request=new XMLHttpRequest();//IE7 ,Firefox,Chrome,Opera,Safari 6 }else{ 7 request=new ActiveObject("Microsoft.XMLHTTP");//IE5,IE6 8 }

一個完整的HTTP請求過程：

1.建立TCP連接

2.Web瀏覽器向Web服務(wù)器發(fā)送請求命令

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

4.Web服務(wù)器應(yīng)答

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

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

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

一個HTTP氫氣一般由四部分組成：

1.HTTP請求的方法或動作，比如是GET還是POST請求

2.正在請求的URL，總得知道請求的地址是什么吧

3.請求頭，包含一些客戶端環(huán)境信息，身份驗(yàn)證信息等

4.請求體，也就是請求正文，請求正文中可以包含客戶提交的查詢字符串信息，表單信息等等。

一個典型的HTTP請求：

GET：一般用于信息獲取

? ? ? ? ?使用URL傳遞參數(shù)

? ? ? ? ?對送發(fā)送信息的數(shù)量也有限制，一般在2000個字符

POST：一般用于修改服務(wù)器上的資源

? ? ? ? ? 對送發(fā)送信息的數(shù)量無限制

一個HTTP響應(yīng)一般由三部分組成：

1.一個數(shù)字和文字組成的狀態(tài)碼，用來顯示請求是成功還是時報(bào)

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

3.響應(yīng)體，也就是響應(yīng)正文

一個典型的HTTP響應(yīng)內(nèi)容

二.XMLHttpRequest發(fā)送請求

(1)open(method,url,async):method表示發(fā)送請求方法，post還是get,url表示請求地址，async表示請求是同步還是異步的，異步為true(默認(rèn)，可不填），同步為false

(2)send(string)：string可以拼在url中

1 request.open("GET","get.php",true); 2 request.send(); 3 4 request.open("POST","post.php",true); 5 request.send();//請求方式為post事send方法中若不帶參數(shù)則沒多大意義 6 7 request.open("POST","create.php",true); 8 request.setRequestHeader("Content-type","application/x-www-form-ulencoded");//表示要發(fā)送一個表單 9 request.send("name=張三&sex=男");

三.XMLHttpRequest取得響應(yīng)（獲取響應(yīng)的值）

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

（2）responseXML:獲得XML形式的響應(yīng)數(shù)據(jù)

（3）status和statusText:以數(shù)字和文本形式返回HTTP狀態(tài)碼

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

（5）getResponseHeader():查詢響應(yīng)中的某個字段的值

readyState屬性的變化代表中服務(wù)器響應(yīng)的變化

0：請求未初始化，open還沒有調(diào)用

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

2：請求已接收，也就是接收到頭信息了

3：請求處理中，也就是接收到響應(yīng)主體了

4：請求已完成，且響應(yīng)已就緒，也就是響應(yīng)完成了

需要監(jiān)聽這個屬性的變化從而知道響應(yīng)是否完成（用onreadystatechange這個事件）

var request=new XMLHttpRequest(); request.open("GET","get.php",true); request.send(); request.onreadystatechange=function(){if(request.readyState===4&&request.status===200){//做一些事情 request.responseText } }

?

?

?

?

-------------------------------------------------慕課網(wǎng)視頻學(xué)習(xí)記錄

更多專業(yè)前端知識，請上 【猿2048】www.mk2048.com

總結(jié)

以上是生活随笔為你收集整理的Ajax全接触（1）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。