- 相關(guān)推薦
ajax詳細(xì)解釋
什么是Ajax
Ajax是Asynchronous JavaScript and XML的縮寫，這一技術(shù)能夠向服務(wù)器請(qǐng)求額外的數(shù)據(jù)而無(wú)需卸載整個(gè)頁(yè)面，會(huì)帶來(lái)良好的用戶體驗(yàn)。傳統(tǒng)的HTTP請(qǐng)求流程大概是這樣的，瀏覽器向服務(wù)器發(fā)送請(qǐng)求-〉服務(wù)器根據(jù)瀏覽器傳來(lái)數(shù)據(jù)生成response-〉服務(wù)器把response返回給瀏覽器-〉瀏覽器刷新整個(gè)頁(yè)面顯示最新數(shù)據(jù)，這個(gè)過(guò)程是同步的，順序執(zhí)行。
AJAX 在瀏覽器與 Web 服務(wù)器之間使用異步數(shù)據(jù)傳輸（HTTP 請(qǐng)求）從服務(wù)器獲取數(shù)據(jù)，這里的異步是指脫離當(dāng)前瀏覽器頁(yè)面的請(qǐng)求、加載等單獨(dú)執(zhí)行，這意味著可以在不重新加載整個(gè)網(wǎng)頁(yè)的情況下，通過(guò)JavaScript接受服務(wù)器傳來(lái)的數(shù)據(jù)，然后操作DOM將新數(shù)據(jù)對(duì)網(wǎng)頁(yè)的某部分進(jìn)行更新，使用Ajax最直觀的感受是向服務(wù)器獲取新數(shù)據(jù)不需要刷新頁(yè)面等待了。
ajax的理解(一)
Ajax是Asynchronous Javascript And XML的縮寫。 作用：通過(guò)Ajax可以使用Javascript語(yǔ)句來(lái)調(diào)用XMLHttpRequest對(duì)象，直接與服務(wù)器進(jìn)行通訊，可以在不重載頁(yè)面的情況下與服務(wù)器交換數(shù)據(jù)。 1、創(chuàng)建XML
Ajax是Asynchronous Javascript And XML的縮寫。
作用：通過(guò)Ajax可以使用Javascript語(yǔ)句來(lái)調(diào)用XMLHttpRequest對(duì)象，直接與服務(wù)器進(jìn)行通訊，可以在不重載頁(yè)面的情況下與服務(wù)器交換數(shù)據(jù)。
1、創(chuàng)建XMLHttpRequest對(duì)象
var xhr = new XMLHttpRequest()
對(duì)于IE早期版本（IE7及以下版本）使用，new ActiveXObject("Microsoft.XMLHTTP")、new ActiveXObject("Msxml2.XMLHTTP")等方式創(chuàng)建對(duì)象
2、XMLHttpRequest對(duì)象常用屬性和常用方法
屬性
readystate 返回XMLHTTP請(qǐng)求的當(dāng)前狀態(tài)碼
state 返回當(dāng)前請(qǐng)求的HTTP狀態(tài)碼
statusText 返回HTTP狀態(tài)碼對(duì)應(yīng)的文本
方法
onreadystatechange 監(jiān)聽(tīng)readystate和state狀態(tài)
ajax的理解（二）
ajax方法：通過(guò) HTTP 請(qǐng)求加載遠(yuǎn)程數(shù)據(jù)
get方法： 通過(guò)遠(yuǎn)程 HTTP GET 請(qǐng)求載入信息
post方法：通過(guò)遠(yuǎn)程 HTTP POST 請(qǐng)求載入信息
1、創(chuàng)建XMLHttpRequest對(duì)象
function createXHR() { return window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");}
2、將鍵值對(duì)轉(zhuǎn)換成拼接串
function params(data) { var a = []; for (var i in data) { a.push(encodeURIComponent(i) + "=" + encodeURIComponent(data[i])); } return a.join("&"); }
3、封裝ajax方法
參數(shù)
method 請(qǐng)求方法 get和post 默認(rèn)get
data 鍵值對(duì) {key:value}
url 鏈接地址
cache 緩存 true 和 false 默認(rèn)true帶緩存
success 成功 error 異常
function ajax(args) { var xhr = createXHR(); var data = http://www.cnblogs.com/kuikui/archive/2012/01/12/params(args.data); if (/get/i.test(args.method)) { // 當(dāng)為get方式時(shí) 將data直接拼接到url后 args.url += "" + data; } if (!args.cache) { //無(wú)緩存 if (args.url.indexOf("") < 0) { //當(dāng)無(wú)參數(shù)data args.url += ""; } args.url += "&" + (new Date()); // Math.random(); } xhr.open(args.method, args.url, true); xhr.onreadystatechange = function () { if (4 == xhr.readyState && 200 == xhr.status) { args.success(xhr.responseText, xhr.responseXML); } else { args.error(); } } if (/post/i.test(args.method)) { xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xhr.send(data); } else { xhr.send();
【ajax詳細(xì)解釋】相關(guān)文章：
使用ajax操作JavaScript對(duì)象的方法09-28
關(guān)于Ajax技術(shù)原理的幾點(diǎn)總結(jié)01-10
基于ajax實(shí)現(xiàn)無(wú)刷新分頁(yè)的方法10-15
解析ajax請(qǐng)求post和get的區(qū)別10-01
如何利用ajax獲取博文列表08-03
淺談Ajax修改購(gòu)物車的方法06-29