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

.Ajax不是某種編程語言

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

?

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

1.運用HTML和CSS來實現頁面，表達信息；

2.運用XMLHttpRequest和web服務器進行數據的異步交換；

3.運用JavaScript操作DOM，實現動態局部刷新；

一、XMLHttpRequest對象的創建

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服務器發送請求命令

3.Web瀏覽器發送請求頭信息

4.Web服務器應答

5.Web服務器發送應答頭信息

6.Web服務器向瀏覽器發送數據

7.Web服務器關閉TCP連接

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

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

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

3.請求頭，包含一些客戶端環境信息，身份驗證信息等

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

一個典型的HTTP請求：

GET：一般用于信息獲取

? ? ? ? ?使用URL傳遞參數

? ? ? ? ?對送發送信息的數量也有限制，一般在2000個字符

POST：一般用于修改服務器上的資源

? ? ? ? ? 對送發送信息的數量無限制

一個HTTP響應一般由三部分組成：

1.一個數字和文字組成的狀態碼，用來顯示請求是成功還是時報

2.響應頭，響應頭也和請求頭一樣包含許多有用的信息，例如服務器類型、日期時間、內容類型和長度等

3.響應體，也就是響應正文

一個典型的HTTP響應內容

二.XMLHttpRequest發送請求

(1)open(method,url,async):method表示發送請求方法，post還是get,url表示請求地址，async表示請求是同步還是異步的，異步為true(默認，可不填），同步為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方法中若不帶參數則沒多大意義 6 7 request.open("POST","create.php",true); 8 request.setRequestHeader("Content-type","application/x-www-form-ulencoded");//表示要發送一個表單 9 request.send("name=張三&sex=男");

三.XMLHttpRequest取得響應（獲取響應的值）

（1）responseText:獲得字符串形式的響應數據

（2）responseXML:獲得XML形式的響應數據

（3）status和statusText:以數字和文本形式返回HTTP狀態碼

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

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

readyState屬性的變化代表中服務器響應的變化

0：請求未初始化，open還沒有調用

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

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

3：請求處理中，也就是接收到響應主體了

4：請求已完成，且響應已就緒，也就是響應完成了

需要監聽這個屬性的變化從而知道響應是否完成（用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 } }

?

?

?

?

-------------------------------------------------慕課網視頻學習記錄

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。