什麼是Ajax
Ajax是Asynchronous JavaScript and XML的縮寫,這一技術能夠向服務器請求額外的數據而無需卸載整個頁面,會帶來良好的用戶體驗。傳統的HTTP請求流程大概是這樣的,浏覽器向服務器發送請求-〉服務器根據浏覽器傳來數據生成response-〉服務器把response返回給浏覽器-〉浏覽器刷新整個頁面顯示最新數據,這個過程是同步的,順序執行。
AJAX 在浏覽器與 Web 服務器之間使用異步數據傳輸(HTTP 請求)從服務器獲取數據,這裡的異步是指脫離當前浏覽器頁面的請求、加載等單獨執行,這意味著可以在不重新加載整個網頁的情況下,通過JavaScript接受服務器傳來的數據,然後操作DOM將新數據對網頁的某部分進行更新,使用Ajax最直觀的感受是向服務器獲取新數據不需要刷新頁面等待了。
ajax的理解(一)
Ajax是Asynchronous Javascript And XML的縮寫。 作用:通過Ajax可以使用Javascript語句來調用XMLHttpRequest對象,直接與服務器進行通訊,可以在不重載頁面的情況下與服務器交換數據。 1、創建XML
Ajax是Asynchronous Javascript And XML的縮寫。
作用:通過Ajax可以使用Javascript語句來調用XMLHttpRequest對象,直接與服務器進行通訊,可以在不重載頁面的情況下與服務器交換數據。
1、創建XMLHttpRequest對象
var xhr = new XMLHttpRequest()
對於IE早期版本(IE7及以下版本)使用,new ActiveXObject(\"Microsoft.XMLHTTP\")、new ActiveXObject(\"Msxml2.XMLHTTP\")等方式創建對象
2、XMLHttpRequest對象常用屬性和常用方法
屬性
readystate 返回XMLHTTP請求的當前狀態碼
state 返回當前請求的HTTP狀態碼
statusText 返回HTTP狀態碼對應的文本
方法
onreadystatechange 監聽readystate和state狀態
ajax的理解(二)
ajax方法:通過 HTTP 請求加載遠程數據
get方法: 通過遠程 HTTP GET 請求載入信息
post方法:通過遠程 HTTP POST 請求載入信息
1、創建XMLHttpRequest對象
function createXHR() { return window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP"); }
2、將鍵值對轉換成拼接串
function params(data) { var a = []; for (var i in data) { a.push(encodeURIComponent(i) + "=" + encodeURIComponent(data[i])); } return a.join("&"); }
3、封裝ajax方法
參數
method 請求方法 get和post 默認get
data 鍵值對 {key:value}
url 鏈接地址
cache 緩存 true 和 false 默認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)) { // 當為get方式時 將data直接拼接到url後 args.url += "?" + data; } if (!args.cache) { //無緩存 if (args.url.indexOf("?") < 0) { //當無參數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();