AJAX

一、什么是AJAX？

AJAX 是一种用于创建快速动态网页的技术。（异步的JavaScript 和 XML  Asynchronous JavaScript and XML）

二、为什么要用AJAX？

传统的网页如果需要更新内容，必须重新加载整个网页面。
而AJAX 则不需要加载更新整个网页，实现部分内容更新。
AJAX 主要是实现页面和 web 服务器之间数据的异步传输。 
AJAX 引擎在客户端运行，承担了一部分本来由服务器承担的工作，从而减少了大用户量下的服务器负载。
也就是：当采用ajax后，当用户发起请求后，还可以进行页面上的其他操作。（这就是异步）

三、AJAX 的工作原理

XHR ：浏览器内置对象 XMLHttpRequest，这是AJAX功能实现所依赖的对象。它是用来负责客户端与服务器之间的通信传输。
AJAX 通过 XHR 来发送异步请求的，异步i请求不会妨碍客户端的任何操作。

四、AJAX 应用

• 运用XHTML + CSS 来表达资讯
• 运行JS 操作 DOM 来执行动态效果
• 运用 XML 和 XSLT 操作资料
• 运用 XMLHttpRequest 或新的 Fetch API 与网页服务器进行异步资料交换

五、AJAX 基础——XMLHttpRequest

所有现代浏览器均支持XMLHttpRequest 对象
IE5 和 IE6 使用 ActiveXObject

5.1 创建XMLHttpRequest对象

<!-- 创建XMLHttpRequest对象 -->
variable = new XMLHttpRequest();
<!-- 老版本的浏览器使用 ActiveX 对象 -->
variable = new ActiveXObject("Microsoft.XMLHTTP");

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

5.2 向服务器发送请求

xmlhttp.open("GET","/try/ajax/ajax_info.html",true);
xmlhttp.send();

open(method，url, async) ：规定请求的类型、URL以及是否异步处理请求
method： 请求的类型；GRT / POST
url : 文件在服务器上的位置
async: true(异步) / false(同步)

send(string) : 将请求发送到服务器
string： 仅用于POST请求

setRequestHeader(header,value)：向请求添加HTTP头
header：规定头的名称
value：规定头的值

GET 和 POST 相比，GET更简单更快，大部分情况下可以使用
但是如果遇到以下情况，请使用POST

• 无法使用缓存文件（更新服务器上的文件或数据库）
• 向服务器发送大量数据（POST 没有数据量限制）
• 发送包含未知字符的用户输入时，POST 比 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();

// 一个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");

async：最好为true。
当async为false时，如果服务器繁忙或缓慢，应用程序会挂起或停止
此时请不要使用onreadystatechange 函数，把代码方法send()语句后面即可。

// true
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();

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

5.3 服务器响应

XMLHttpRequest 对象有两个属性：

• 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].childNodes[0].nodeValue + "<br>";
}
document.getElementById("myDiv").innerHTML=txt; // 放到引用该js文件的html文件的myDiv内

5.4 onreadystatechange 事件

当请求被发送到服务器时，我们需要执行一些基于响应的任务
当 readyState 改变时，就会触发 onreadystatechange 事件

在该事件中，我们规定当服务器响应已做好处理的准备时所执行的任务
当 readyState 等于4 且状态为 200 时，表示响应已经就绪

XMLHttpRequest 对象有三个重要属性：

onreadystatechange ：存储函数，每当 readyState 属性改变时，就会调用该函数（在执行中判断）

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

status ：状态
200：“OK”
404：未找到页面

// 响应已经就绪
xmlhttp.onreadystatechange=function()
{
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
}

// 回调函数是一种以参数形式传递给另一个函数的函数。
// 如果您的网站上存在多个 AJAX 任务，那么您应该为创建 XMLHttpRequest 对象编写一个标准的函数，并为每个 AJAX 任务调用该函数。
// 该函数调用应该包含 URL 以及发生 onreadystatechange 事件时执行的任务（每次调用可能不尽相同）：
function myFunction()
{
    loadXMLDoc("/try/ajax/ajax_info.txt",function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
        }
    });
}

首先创建一个 XMLHtmlRequest 对象
其次设置 onreadystatechange 函数
接着发送请求（send、open）
最后如果准备就绪，执行onreadystatechange 函数。

六、$.ajax的使用

JQuery 是对 JS 代码进行封装（$.ajax，$.post， $.get， $.getJSON）

var configObj = {

       method   //数据的提交方式：get和post

       url   //数据的提交

       async   //是否支持异步刷新，默认是true

       data    //需要提交的数据

       dataType   //服务器返回数据的类型，例如xml,String,Json等

       success    //请求成功后的回调函数

       error   //请求失败后的回调函数
    }
    
$.ajax(configObj);//通过$.ajax函数进行调用。