一：什么是 AJAX ？

AJAX = 異步 JavaScript 和 XML。

AJAX 是一種用于創建快速動態網頁的技術。

通過在后臺與服務器進行少量數據交換，AJAX 可以使網頁實現異步更新。這意味著可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。

XMLHttpRequest 是 AJAX 的基礎。

所有現代瀏覽器均支持 XMLHttpRequest 對象（IE5 和 IE6 使用 ActiveXObject）。

XMLHttpRequest 用于在后臺與服務器交換數據。這意味著可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。

?

二：創建 XMLHttpRequest 對象

所有現代瀏覽器（IE7+、Firefox、Chrome、Safari 以及 Opera）均內建 XMLHttpRequest 對象。

創建 XMLHttpRequest 對象的語法：

var iable=new XMLHttpRequest();

老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 對象： variable=new ActiveXObject("Microsoft.XMLHTTP");

為了應對所有的現代瀏覽器，包括 IE5 和 IE6，請檢查瀏覽器是否支持 XMLHttpRequest 對象。 如果支持，則創建 XMLHttpRequest 對象。 如果不支持，則創建 ActiveXObject ：

1 var xmlhttp; 2 3 if (window.XMLHttpRequest) { 4 5 // code for IE7+, Firefox, Chrome, Opera, Safari 6 7 xmlhttp=new XMLHttpRequest(); 8 9 } else { 10 11 // code for IE6, IE5 12 13 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 14 15 }

?

三：向服務器發送請求

1.open()方法

用于設置進行異步請求目標的URL，請求方法以及其他參數信息。

xmlHttp.open("請求的類型 get/post","文件在服務器上的位置/Servlet","同步還是異步 false/true"，username,password);

2.send()方法

用于向服務器發送請求，如果請求聲明為異步，該方法將立即返回，否則將等到接收到響應為止。

xmlHttp.send(content);cotent:用于指定發送的數據，可以是DOM對象的實例，輸入流或字符串。如果沒有參數需要傳遞，可以設置為null.

3.setRequestHeader()方法 用于為post請求的HTTP頭設置值。

xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

?

四：XMLHttpRequest對象的常用屬性

（1）onreadystateChange 屬性用于指定狀態改變時所觸發的事件處理器。

在ajax中，每個狀態改變時都會觸發這個事件處理器，通常會調用一個JavaScript函數。

http_request.onreadystatechange=function(){}

(2)readyState 屬性用于獲取請求的狀態，共包括5個屬性值 0:未初始化 1：正在加載 ? ? ?2：已加載 ? ? ? ?3：交互中 ? ? ? 4：完成

(3)responseText 屬性用于獲取服務器的響應，表示為字符串。

(4)responseXML 屬性用于獲取服務器的響應，表示為xml.

(5)status屬性用于返回服務器的HTTP狀態碼。 200：表示成功 ? ? ? ?202：表示請求被接受，但尚未成功 ? ? ? ? ? 400：錯誤的請求 ? ? ? ? ?404：文件未找到 ? ? ? ? ? ? ?500：內部服務器錯誤

五：發送ajax發送請求，4步驟：

1.初始化XMLHttpRequest對象。為了提高程序的兼容性，需要創建一個跨瀏覽器的XMLHttpRequest對象。

2.創建一個與服務器的連接。

3.向服務器發送請求。

4.為XMLHttpRquest對象指定一個返回結果處理函數（即回調函數），用于對返回結果進行處理。

封裝成一個函數：傳一個對象。

1 function AjaxCy(obj){ 2 //創建對象 3 var xmlhr; 4 if(window.XMLHttpRequest){ 5 xmlhr = new XMLHttpRequest(); 6 }else{ 7 xmlhr = new ActiveXObject("Microsoft.XMLHTTP"); 8 } 9 //初始化 10 //如果是post請求則需要指定請求頭 11 //發送 12 if(obj.method=="post" || obj.method=="POST"){ 13 xmlhr.open(obj.method,obj.url,obj.sync); 14 xmlhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); 15 xmlhr.send(obj.data); 16 }else{ 17 xmlhr.open(obj.method,obj.url+"?"+obj.data,obj.sync); 18 xmlhr.send(); 19 } 20 //回調函數 21 xmlhr.onreadystatechange = function (){ 22 if(xmlhr.readyState==4&&xmlhr.status==200){ 23 obj.fun(xmlhr.responseText); 24 } 25 }; 26 }

?

總結

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

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