【JavaScript】AJAX的初步了解

简介

AJAX全称（ Asynchronous JavaScript and XML）即异步的 JavaScript 和 XML；
作用：在不重新加载整个页面的情况下，与服务器交互并更新部分网页内容。
了解AJAX首先需要认识一个对象，叫XMLHttpRequest；

1、XMLHttpRequest

XMLHttpRequest是一种JS对象，也是AJAX的基础， 用于在后台与服务器交换数据。
其缩写为XHR，在F12开发者模式中可以看到你当前操作是否用到了XHR来与服务器交互数据；

1.1-XMLHttpRequest的兼容性

现代大部分浏览器都支持XMLHttpRequest对象，但IE5、IE6则需要使用ActiveX对象代替；

var xmlhttp;
if (window.XMLHttpRequest)
{
    //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
    xmlhttp=new XMLHttpRequest();
}
else
{
    // IE6, IE5 浏览器执行代码
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

可以看见XMLHttpRequest的创建方式较简单：
var xmlhttp = new XMLHttpRequest();

1.2-发送请求

open方法

open(String method,String url,boolean async)

open方法主要对我们的AJAX请求进行配置，
包括三个参数：1-请求类型、2-请求地址、3-是否异步执行；

method：请求的类型；GET 或 POST ;
url：请求地址 ；
async： true（异步）或 false（同步);

send方法

send([String args])

send方法则顾名思义，是将AJAX请求发送到指定服务器，
其有一个String类型的可选参数，用于在Post请求中模拟HTML表单传值；

args：参数字符串；

一个简单的GET请求

xmlhttp.open("GET","runoob.com/try/ajax/demo_get.php",true);
xmlhttp.send();

一个带参数的GET请求

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

一个简单的POST请求

xmlhttp.open("POST","runoob.com/try/ajax/demo_post.php",true);
xmlhttp.send();

setRequestHeader方法
如果需要像 HTML 表单那样向服务器发送数据，需要使用 setRequestHeader() 来添加请求头，然后在 send() 方法中填写参数：

setRequestHeader(String header,String value)

header: 请求头名称；
value: 请求头的值；

一个带参数的POST请求

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

1.3-XMLHttpRequest的异步

如果 open() 方法的 async 参数设置为 true，即异步AJAX；
通过 AJAX，JavaScript 无需等待服务器的响应，即可执行JS代码；
同时应当设置请求成功后onreadystatechange事件为就绪状态时执行的函数：

xmlhttp.status==200 //代表请求成功！

xmlhttp.onreadystatechange=function()
{
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {//请求成功后需要执行的代码：
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
}
xmlhttp.open("GET","runoob.com/try/ajax/ajax_info.txt",true);
xmlhttp.send();

如果open() 方法的 async 参数设置为 false,即同步，
JavaScript 会等到服务器响应就绪才继续执行；
同时，不编写 onreadystatechange 函数 ， 把代码放到 send() 语句后面即可：

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

1.4-处理响应

如果你的AJAX请求带有来自服务器的响应数据，
则需要用到 XMLHttpRequest 对象的 responseText 或 responseXML 属性；

responseText ：获得字符串形式的响应数据。
responseXML ：获得 XML 形式的响应数据。

responseText属性
responseText可以直接获取，如下:

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

responseXML属性
responseXML的获取需要作为 XML 对象进行解析：

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;

1.5-响应信息

在XMLHttpRequest对象的响应中，包含如下一些信息：

2、工作原理

这里补充一张AJAX的工作原理；

（部分图出自runoob.com-菜鸟教程）