菜鸟教程--AJAX

一.简介
1.AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
2.AJAX = 异步 JavaScript 和 XML。
3.通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
二.原理：
1. 创建 XMLHttpRequest 对象
(1).XMLHttpRequest 对象：
所有现代浏览器均支持 XMLHttpRequest对象（IE5 和 IE6 使用ActiveXObject）
XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
(2).variable=new XMLHttpRequest();
所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。
2.向服务器发送请求
(1).如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
说明：
open(method,url,async) 规定请求的类型、URL 以及是否异步处理请求。
method：请求的类型；GET 或 POST
url：文件在服务器上的位置
async：true（异步）或 false（同步）

send(string) 将请求发送到服务器。
string：仅用于 POST 请求
（2）get/post区别
更新服务器上的文件或数据库 使用post
向服务器发送大量数据（POST 没有数据量限制）
(3).get请求
一个简单的 GET 请求：
xmlhttp.open("GET","/try/ajax/demo_get.php",true);
xmlhttp.send();
------------------------------------------------
在上面的例子中，您可能得到的是缓存的结果。
为了避免这种情况，请向 URL 添加一个唯一的 ID：
xmlhttp.open("GET","/try/ajax/demo_get.php?t=" + Math.random(),true);
xmlhttp.send();
------------------------------------------------
如果您希望通过 GET 方法发送信息，请向 URL 添加信息：
xmlhttp.open("GET","/try/ajax/demo_get2.php?fname=Henry&lname=Ford",true);
xmlhttp.send();
(4).post请求
一个简单 POST 请求：
xmlhttp.open("POST","/try/ajax/demo_post.php",true);
xmlhttp.send();
---------------------------------------------------
如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据：
xmlhttp.open("POST","/try/ajax/demo_post2.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");
3.服务器 响应
如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。
说明：
responseText 获得字符串形式的响应数据。
responseXML 获得 XML 形式的响应数据。
例如：
(1).document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
--------------------------------------------------------------
(2).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;
4.onreadystatechange 事件
1).当请求被发送到服务器时，我们需要执行一些基于响应的任务。
每当 readyState 改变时，就会触发 onreadystatechange 事件。
readyState 属性存有 XMLHttpRequest 的状态信息。
2).说明：
(1).onreadystatechange 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。

(2)readyState
存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪

(3)status
200: "OK"
404: 未找到页面
3).例如
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
注意： onreadystatechange 事件被触发 5 次（0 - 4），对应着 readyState 的每个变化。
5.Ajax XML
<button type="button" onclick="loadDoc()">获取我收藏的 CD</button>
<br><br>
<table id="demo"></table>

<script>
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myFunction(this);
}
};
xhttp.open("GET", "cd_catalog.xml", true);
xhttp.send();
}
function myFunction(xml) {
var i;
var xmlDoc = xml.responseXML;
var table="<tr><th>Artist</th><th>Title</th></tr>";
var x = xmlDoc.getElementsByTagName("CD");
for (i = 0; i <x.length; i++) {
table += "<tr><td>" +
x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +
"</td><td>" +
x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
"</td></tr>";
}
document.getElementById("demo").innerHTML = table;
}
</script>