AJAX学习笔记
1. AJAX基础
AJAX=Asynchronous JavaScript XML(异步的JavaScript和XML)。
AJAX不是新的编程语言，而是一种使用现有标准的新方法。
AJAX是在不重新加载整个页面的情况下与服务器异步交换数据并更新部分网页的艺术。
2. JAAX XHR
XHR创建对象
XMLHttpRequest是AJAX的基础。
所有现代浏览器都支持XMLHttpRequest对象(IE5和IE6使用ActiveXObject)。
XMLHttpRequest用于在后台与服务器交换数据。这意味着可以在不重新加载整个页面的情况下，对网页的某部分进行更新。
所有现代浏览器(IE7+、Firefox、Chrome、Safari和Opera)均内建XMLHttpRequest对象。
创建XMLHttpRequest对象的语法：
variable = new XMLHttpRequest();
老版本的Internet Explorer(IE5和IE6)使用ActiveX对象：
variable = new ActiveXObject("Microfost.XMLHTTP");
为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject ：
var xmlhttp; if (window.XMLHttpRequest) { // code for IE7+,Firefox,Chrome,Opera,Safari xmlhttp = new XMLHttpRequest(); } else { // code for IE5,IE6 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); }
XHR请求
XMLHttpRequest对象用于和服务器交换数据。
我们使用XMLHttpRequest对象的open()和send()方法将请求发送到服务器:
xmlhttp.open("GET","test1.txt",true); // 构造请求
xmlhttp.send(); // 发送请求
open(method,url,async)
规定请求类型、url以及是否异步处理请求。
- method：请求的类型；GET或POST
- url：文件在服务器的位置
- async：true(异步)或false(同步)
send(string)
将请求发送到服务器，string：仅用于POST请求。
GET还是POST？
GET相比与POST更简单更快，且在大部分情况下都能用。
然而在一下情况下请使用POST请求：
- 无法使用缓存文件（更新服务器上的文件或数据库）
- 向服务器发送大量数据（POST没有数据量的限制）
- 发送包含未知字符的用户输入时，POST比GET更稳定也更可靠
GET请求
<html> <head> <script type="text/javascript"> function loadXMLDoc(){ var xmlhttp; if(window.XMLHttpRequest){ // code for IE7+,Firefox,Chrome,Opera,Safari xmlhttp = new XMLHttpRequest(); }else{ // code for IE5,IE6 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange = function(){ if(xmlhttp.readySstate == 4 && xmlhttp.status == 200){ document.getElementById("myDiv").innerHTML = xmlhttp.responseText; } } xmlhttp.open("GET","http://www.w3school.com.cn/ajax/demo_get.asp",true); xmlhttp.send(); } </script> </head> <body> <h2>AJAX</h2> <button type="button" onclick="loadXMLDoc()>请求数据</button> <div id="myDiv"></div> </body> </html>
上面的例子可能得到的是缓存的结果。为避免这种情况，请向URL添加一个唯一的ID：
xmlhttp.open("GET","demo_get.asp?t=" + Math.random(),true);
xmlhttp.send();
如果希望通过GET方法发送信息，可以向URL添加信息：
xmlhttp.open("GET","demo_get2.asp?fname=Bill&fname=Gates",true);
xmlhttp.send();
POST请求
post请求怎么像表单一样post数据，可以使用setRequestHeader()来添加HTTP头，然后在send()方法中规定希望发送的数据：
xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates")';
setRequestHeader(header,value) // 向请求中添加HTTP头。header：规定头的名称，value：规定头的值
异步-Ture或False？
AJAX指的是异步JavaScript和XML（Asynchronous JavaScript and XML）。
XMLHttpRequest对象如果要用于AJAX的话，其open()方法的async参数必须为true；
xmlhttp.open("GET","ajax_test.asp",true);
通过AJAX，JavaScript无需等待服务器响应，而是：
- 在等待服务器响应时执行其他脚本
- 当响应就绪后对响应进行处理
Async = true时，请规定在响应处于onreadystatechange事件中的就绪状态时执行的函数：
xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","test1.txt",true); xmlhttp.send();
不推荐使用async = false，这样JavaScript就会在等到服务器响应就绪才会继续执行，如果服务器繁忙或缓慢，应用程序会挂起或者停止。
当使用async = false时，不要编写onreadystatechange函数，把代码放到send()语句后面即可：
xmlhttp.open("GET","test1.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
XHR响应
如需获取来自服务器的响应，请使用XMLHttpRequest对象的response Text或responseXML属性。
responseText，获取字符串形式的响应数据；responseXML，获取XML形式的响应数据。
document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
如果来自服务器的响应是XML，而且需要作为XML对象进行解析，请使用responseXML属性：
xmlDoc=xmlhttp.responseXML; txt=""; x=xmlDoc.getElementsByTagName("ARTIST"); for (i=0;i<x.length;i++) { txt=txt + x[i].childNodes[0].nodeValue + "<br />"; } document.getElementById("myDiv").innerHTML=txt;
XHR readyState
当请求被发送到服务器时，我们需要执行一些基于响应的任务。每当readyState改变时，就会触发onreadystatechange事件。
readyState存有XMLHttpRequest的状态。从0到4发生变化。
- 0：请求未初始化
- 1：服务器连接建立
- 2：请求已接收
- 3：请求处理中
- 4：请求已完成，且响应已就绪
status：
- 200：“OK”
- 404：未找到页面
当readyState等于4且状态为200时，表示响应已就绪。
使用Callback函数
callback 函数是一种以参数形式传递给另一个函数的函数。
如果您的网站上存在多个 AJAX 任务，那么您应该为创建 XMLHttpRequest 对象编写一个标准的函数，并为每个 AJAX 任务调用该函数。
该函数调用应该包含 URL 以及发生 onreadystatechange 事件时执行的任务（每次调用可能不尽相同）：
<html> <head> <script type="text/javascript"> var xmlhttp; function loadXMLDoc(url,cfunc) { if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=cfunc; xmlhttp.open("GET",url,true); xmlhttp.send(); } function myFunction() { loadXMLDoc("/ajax/test1.txt",function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } }); } </script> </head> <body> <div id="myDiv"><h2>Let AJAX change this text</h2></div> <button type="button" onclick="myFunction()">通过 AJAX 改变内容</button> </body> </html>
3. jQuery AJAX
load()方法，从服务器加载数据，并把返回的数据放入被选中的元素中。
语法：
$(selector).load(URL,data,callback);
必需的 URL 参数规定您希望加载的 URL。
可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
可选的 callback 参数是 load() 方法完成后所执行的函数名称。
可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数：
- responseTxt - 包含调用成功时的结果内容
- statusTXT - 包含调用的状态
- xhr - 包含 XMLHttpRequest 对象
$("button").click(function(){
$("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
if(statusTxt=="success")
alert("外部内容加载成功！");
if(statusTxt=="error")
alert("Error: "+xhr.status+": "+xhr.statusText);
});
});
HTTP请求：GET vs POST
两种在客户端和服务器端进行请求-响应的常用方法是：GET 和 POST。
- GET - 从指定的资源请求数据
- POST - 向指定的资源提交要处理的数据
GET 基本上用于从服务器获得（取回）数据。注释：GET 方法可能返回缓存数据。
POST 也可用于从服务器获取数据。不过，POST 方法不会缓存数据，并且常用于连同请求一起发送数据。
进行GET请求的语法：
$.get(URL,callback);
进行POST请求的语法：
$.post(URL,data,callback);
必需的 URL 参数规定您希望请求的 URL。
可选的 data 参数规定连同请求发送的数据。
可选的 callback 参数是请求成功后所执行的函数名。
下面的例子使用 $.post() 连同请求一起发送数据：
$("button").click(function(){
$.post("demo_test_post.asp",
{
name:"Donald Duck",
city:"Duckburg"
},
function(data,status){
alert("Data: " + data + "\nStatus: " + status);
});
});
