理解Ajax #14
Description
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 & ".") %>