Ajax學習

Ajax概述

Ajax全稱: Asynchronous JavaScript and XML (異步的JavaScript和XML)
Ajax不是某種編程語言,是一種在無需重新加載整個網頁的情況之下能夠更新部分網頁的技術。
使用ajax技術的網頁,通過在后臺跟服務器進行少量的數據交換,網頁就可以實現異步局部更新。

Ajax使用解析

首先實例化一個 XMLHttpRequest對象
var request = new XMLHttpRequest();
IE5,IE6如何實現,需要判斷一下

示例代碼


var request;
if(window.XMLHttpRequest) {
	request = new XMLHttpRequest();  //ie7+, FireFox, Chrome, Opera, Safari...
}else {
	request = new ActiveXObject("Microsoft.XMLHTTP");  //IE6,IE5
}

HTTP請求

http是計算機通過網絡進行通信的規則,使瀏覽器向服務器請求信息和服務

HTTP是一種無狀態協議 (不建立持久的連接,服務端不保留相關的連接信息)

一個完整的HTTP請求過程,通常有下面7個步驟:


	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.請求體,也就是請求正文,請求的正文可以包含客戶提交的查詢字符串信息,表單信息等等

GET

GET: 一般用于信息獲取 使用URL傳遞參數

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

POST

PSOT: 一般用于修改服務器的資源

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

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


	1.一個數字和文字組成的狀態碼,用來顯示請求成功還是失敗
	2.響應頭,響應頭也和請求頭一樣包含許多有用的信息 例如:	服務器類型、日期時間、內容類型和長度等
	3.響應體,也就是響應正文。

XMLHttpRequest發送請求

示例代碼


	open(method, url, async)
	send(string)

	request.open("GET", "get.php", true);
	request.send();

	request("POST", "create.php", ttrue);
	request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
	request.send("name=Aseoe&sex=男");

XMLHttpRequest取得響應

responseText:獲得字符串形式的響應數據
responseXML: 獲得XML形式的響應數據
status和statusText:以數字和文本形式返回HTTP狀態碼
getALLResponseHeader():獲取所有的響應報頭
getResponseHeader():查詢響應中的某個字段的值

readyStatus屬性

0: 請求未初始化,open還沒有調用

1: 服務器連接已建立,open已經調用了

2: 請求已接收,也就是接收到頭信息了

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

4: 請求已完成,且響應已就緒,也就是響應完成了

示例代碼


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

Ajax案例

ajax簡單案例,僅供參考學習。更多案例請移步【愛思資源網】主頁搜索

JS - Ajax案例


查看效果    下載案例

jQuery - Ajax案例


查看效果    下載案例

JSON - AJAx案例


查看效果    下載案例

你可能會想了解

1. JSON入門學習 >>> 【快速學習
2. jQuery Ajax學習 >>> 【快速學習
3. Ajax 跨域問題 >>> 【快速學習
4. Ajax 技術原理 >>> 【快速學習

關注愛思資源網 了解Web前端開發最新動態

【官網】: www.randomwithlife.com

【論壇】: bbs.aseoe.com

【問答】: ask.aseoe.com

【QQ群】: 42148738 [立即加入]