Ajax

                           Ajax

一、Ajax（Asynchronous JavaScript and XML（异步的 JavaScript 和 XML））简介
1、什么是 AJAX ？ Ajax不是某种编程语言，AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
例如在传统的网页中，即不使用 AJAX的网页中，如果需要更新内容，那么必需重欣加载整个网页。但在使用了 AJAX的网页中，只需要更新我们想要更新的部分网页。
2、同步与异步：
（1）同步是指一个进程在执行某个请求的时候，若该请求需要一段时间才能返回信息，那么这个进程将会一直等待下去，直到收到返回信息才继续执行下去。
（2）异步是指进程不需要一直等下去，而是继续执行下面的操作，不管其他进程的状态。当有消息返回时系统会通知进程进行处理，这样可以提高执行的效率。
（3）我们要注意的是同步只执行当前进程，不执行下面的进程；直到当前进程执行完毕才会执行下一个进程；但当当前进程出现问题时，它会一直等待下去。而异步是所有进程同时执行，即使上一个进程出现问题，它也会继续执行下面的进程，而不会一直等待下去。
（4）异步的实现方式：
（a）运用HTML与CSS来实现页面，表达信息；
（b）运用XMLHttpRequest和web服务器进行数据的异步交换；
（c）运用JavaScript操作DOM，实现动态局部刷新。
3、AJAX中的创建 XMLHttpRequest 对象：
（1）什么是 XMLHttpRequest 对象？ XMLHttpRequest 对象用于在后台与服务器交换数据（具体介绍可见w3c）。
（2）所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）都内部创建了XMLHttpRequest 对象。我们只需要引用就可以了。
（3）创建 XMLHttpRequest 对象的语法是： var xhr=new XMLHttpRequest();而在老版本的 Internet Explorer（IE5 和 IE6）中使用的是ActiveXObject 对象：var xhr=new ActiveXObject(“Microsoft.XMLHTTP”);
（4）为了应对所有的现代浏览器，包括 IE5 和 IE6，我们需要检查浏览器是否支持 XMLHttpRequest 对象。如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject 对象。其代码如下：
var xhr;
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xhr = new XMLHttpRequest();
} else {
// code for IE6, IE5
xhr = new ActiveXObject(“Microsoft.XMLHTTP”);
}
4、 在AJAX中向服务器发送请求,我们使用的方法是 XMLHttpRequest 对象的 open()方法 和 send() 方法：
（1）open(method,url,async) 规定请求的类型、URL 以及是否异步处理请求。其中：
参数method表示的是请求的类型；
参数url表示文件在服务器上的位置（路径）；
参数async表示true（异步）或 false（同步）。
（2）send(string)是将请求发送到服务器。参数string仅用于 POST 请求。
（3）使用GET请求或 POST请求：
（a）一个简单的 GET 请求：
xhr.open(“GET”,”/jQueryAjax/getPersonInfor”,true);
xhr.send();
（b）一个简单 POST 请求：
xhr.open(“POST”,”/jQueryAjax/getPersonInfor”,true);
xhr.send();
（4）如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 方法来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据。例如：
xhr.open(“POST”,”/jQueryAjax/postPersonInfor”,true);
xhr.setRequestHeader(“Content-type”,”application/x-www-form-urlencoded”);
xhr.send(data);//data表示表单中需要提交的数据（字符串）
（5）setRequestHeader方法的语法是setRequestHeader(header,value)；它的作用是向请求添加 HTTP 的头部。参数header的作用是规定头的名称；参数value的作用是规定头的值。
5、在AJAX中是使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性去获取来自服务器的响应。
（1）属性responseText是获得字符串形式的响应数据。
（2）属性responseXML是获得 XML 形式的响应数据。
（3）用法：document.getElementById(“div”).innerHTML=xhr.responseText;
6、AJAX中的onreadystatechange 事件：每当 readyState 改变时，就会触发 onreadystatechange 事件。readyState 属性存有 XMLHttpRequest 的状态信息。
（1）下面是 XMLHttpRequest 对象的三个重要的属性：
（a）onreadystatechange表示存储函数或函数名，每当 readyState 属性改变时，就会调用该函数。
（b）readyState是存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。其中：
0表示的是请求未初始化；
1表示的是服务器连接已建立；
2表示的是请求已接收；
3表示的是请求处理中；
4表示的是请求已完成，且响应已就绪。
（c）status是返回值；当返回的是200时表示“OK”，而当返回的是404时表示未找到页面。
（2）在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。当 readyState 等于 4 且状态为 200 时，表示响应已就绪。其代码如下：
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
var txt = xhr.responseText;
console.log(txt);
}
}
二、用jQuery实现Ajax（jQuery.ajax()方法、jQuery.get()方法、jQuery.post()方法）
1、用jQuery实现Ajax的方法是jQuery.ajax({settings});
（1）type表示类型，”POST”或”GET”，默认值为”GET”；
（2）url表示发送请求的地址；
（3）async表示设置同步与异步，(默认: true) 默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。
（4）data是一个对象，连同请求发送到服务器的数据；
（5）dataType表示预期服务器返回的数据类型，如果不指定，jQuery将自动根据http包MIME信息来智能判断，一般我们采用json格式，可以设置为”json”；
（6）success是一个方法，请求成功后的回调函数，传入返回后的数据，以及包含成功代码的字符串；
（7）error是一个方法，请求失败是调用此函数，传入XMLHttpRequest对象。
2、jQuery.get()方法是以GET方式从服务器获取数据的方法；即通过远程 HTTP GET 请求载入信息。
（1）它的语法是jQuery.get(url, [data], [callback], [type])；其中：
（a）参数url表示的是待载入页面的URL地址；
（b）参数data表示的是待发送 Key/value 参数；
（c）参数callback表示的是载入成功时回调函数；
（d）参数type表示的是返回内容格式，xml, html, script, json, text, _default。
（2）这是一个简单的 GET 请求功能以取代复杂的 $ .ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $ .ajax。
3、jQuery.post()方法是以POST方式从服务器发送数据的方法；即通过远程 HTTP POST 请求载入信息。
（1）它的表达式是jQuery.post(url, [data], [callback], [type])；其中：
（a）参数url表示的是发送请求地址；
（b）参数data表示的是待发送 Key/value 参数；
（c）参数callback表示的是发送成功时回调函数；
（d）参数type表示的是返回内容格式；如xml, html, script, json, text, _default。
（2）这是一个简单的 POST 请求功能以取代复杂 $ .ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $ .ajax。