理解Ajax

[WarpPrism]

Ajax = Asynchronous javascript and XML
Ajax 不是一种新的编程语言，而是使用现有技术的新标准。
Ajax 是在不重新加载整个页面的情况下，实现与服务器的数据交互并更新部分页面。

起源：

Google Suggest：当你在Google搜索框上输入关键字时，JavaScript会把这些字符发送到服务器，然后服务器会返回一个搜索建议的列表。

原理：

XMLHttpRequest对象是Ajax的基础，用于在Browser后台与服务器交换数据。

var xmlhttp;
if (window.XMLHttpRequest) {
	// code for IE7+, Firefox, Chrome, Opera, Safari
	xmlhttp = new XMLHttpRequest();
} else {
	// code for IE5, 6
	xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

然后发送请求：

// true: async = true;
xmlhttp.open("GET/POST", url, true);
// send(string), string is only enabled when you use POST requset.
xmlhttp.send(null);

你有可能请求到缓存中的数据，为了避免这种情况，应在url后面加上 + Math.random()。

然后服务器响应：

xmlhttp.onreadystatechange = function() {
	if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
		// codes after response
	}
}

解释：
每当 readyState 改变时，就会触发 onreadystatechange 事件。readyState有5种状态，所以onreadystatechange函数在整个请求过程中会被调用5次。
如下所示：

• 0: 请求未初始化
• 1: 服务器连接已建立
• 2: 请求已接收
• 3: 请求处理中
• 4: 请求已完成，且响应已就绪

而status有以下两种状态：

200：OK
404: File Not Found

如果要获取服务器相应的内容，我们可以使用XMLHttpRequest对象的responseText和responseXML属性。

在实际开发过程中，我们一般使用回调函数callback的方法调用onreadystatechange：

var xmlhttp;
function ajaxReq(url, callback) {
	if (window.XMLHttpRequest) {
		// code for IE7+, Firefox, Chrome, Opera, Safari
		xmlhttp = new XMLHttpRequest();
	} else {
		// code for IE5, 6
		xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
	}
	xmlhttp.onreadystatechange = callback;
	xmlhttp.open("GET", url, true);
	xmlhttp.send(null);
}

ajaxReq(myurl, function() {
	if (xmlhttp.readyState==4 && xmlhttp.status==200) {
		document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
	}
});

jQuery中的Ajax：

编写常规的 AJAX 代码并不容易，因为不同的浏览器对 AJAX 的实现并不相同。这意味着您必须编写额外的代码对浏览器进行测试。不过，jQuery 团队为我们解决了这个难题，我们只需要一行简单的代码，就可以实现 AJAX 功能。

ajax方法（常用）：

$.ajax({
	type: "POST/GET"
	async: true,
	url: "server/handle.php",
	data: {username:$("#username").val(), content:$("#content").val()},
	dataType: "json",
	success: function(data) {
		// codes when response is ready
	}
});

---

load方法：

load() 方法从服务器加载数据，并把返回的数据放入被选元素中。

$(selector).load(URL,data,callback);

必需的 URL 参数规定您希望加载的 URL。
可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
可选的 callback 参数是 load() 方法完成后所执行的函数名称。

get方法：

// $.get(URL,callback);
$("button").click(function(){
	$.get("demo_test.asp",function(data,status) {
		alert("Data: " + data + "\nStatus: " + status);
	});
});

asp文件：

<%
response.write("This is some text from an external ASP file.")
%>

post方法：

// $.post(URL,data,callback);
$("button").click(function(){
	$.post("demo_test_post.asp",
		{
			name:"Donald Duck",
			city:"Duckburg"
		},
		function(data,status){
			alert("Data: " + data + "\nStatus: " + status);
		});
});

asp文件：

<%
dim fname,city
fname=Request.Form("name")
city=Request.Form("city")
Response.Write("Dear " & fname & ". ")
Response.Write("Hope you live well in " & city & ".")
%>