一、什么是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函数进行调用。