AJAX 工作原理

AJAX = 异步 JavaScript 和 XML。
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量的数据交换，可以实现网页的异步更新。
这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

二、AJAX 工作原理

三、XmlHttpRequest对象（XHR）–Ajax的基础

所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。
XMLHttpRequest用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

1、创建对象

创建 XMLHttpRequest 对象的语法：

var xmlhttp = new XMLHttpRequest();

老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：

var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

2、请求

向服务器发送请求
如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：

open(method,url,async)规定请求的类型、URL 以及是否异步处理请求。
    1、method：请求的类型；GET 或 POST
    2、url：文件在服务器上的位置
    3、async：true（异步）或 false（同步）
send(string)将请求发送到服务器。
    string：仅用于 POST 请求

xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();

• get传参

xmlhttp.open("GET","/try/ajax/demo_get2.php?fname=Henry&lname=Ford",true);
xmlhttp.send();

• post传参

xmlhttp.open("POST","/try/ajax/demo_post2.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");

setRequestHeader(header,value)是向请求添加 HTTP 头，也可以不写
header: 规定头的名称
value: 规定头的值

send(String)只能用于POST方法，get使用send();

3、响应

如需获得来自服务器的响应，使用XMLHttpRequest 对象的 responseText 或 responseXML 属性。

属性               描述
responseText    获得字符串形式的响应数据。
responseXML 获得 XML 形式的响应数据。

• responseText响应数据：

document.getElementById("MyDiv").innerHTML=xmlhttp.responseText;

• responseXML响应数据：

xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i<x.length;i++)
{
    txt=txt + x[i].childNode s[0].nodeValue + "<br>";
}
document.getElementById("myDiv").innerHTML=txt;

4、异步或同步

• 异步
  XMLHttpRequest 对象如果要用于 AJAX 的话，其 open() 方法的 async 参数必须设置为 true：

xmlhttp.open("GET","ajax_test.html",true);

当使用 async=true 时，请规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数：

xmlhttp.onreadystatechange=function()
{
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
}
xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
xmlhttp.send();

• 同步
  async=flase;

xmlhttp.open("GET","/try/ajax/ajax_info.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

5、 onreadystatechange 事件

属性	说明
onreadystatechange	存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState	存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4:请求已完成，且响应已就绪
status	200: “OK” 404: 未找到页面

6、前端通过ajax访问服务器php文件
前端通过的onkeyup属性获得用户输入值，通过xmlhttprequest传参，php文件接收并处理返回数据，由innerHTML输出。