什么是ajax？W3School中给ajax的定义是：
1、AJAX = 异步 JavaScript 和 XML。
2、AJAX 是一种用于创建快速动态网页的技术。
3、通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
4、传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。
通俗的讲，AJAX就是JS通过一个网址去加载数据，这个过程通常是用户不可见的。使用ajax的能够异步加载数据，及时验证数据，不需要刷新整个页面（有时会局部加载），进而能提高用户体验并且节省流量。
1、基本API：new XMLHttpRequest()、open()、send()、onreadystatechange()、responseText()等
①：使用ajax之前必须要创建一个对象，要用到new XMLHttpRequest()。
var xhr = new XMLHttpRequest();
值得一提的是，在老的浏览器（比如IE6、IE5）中并不支持XMLHttpRequest()对象。在老浏览器 中，XHR(XMLHttpRequest的缩写，下面的都是指该对象)对象是通过MSXML库中的一个ActiveX对象实现的。为了兼容模式，我们可以这样子去创建XMLHttpRequest对象。
if (window.XMLHttpRequest){ //如果浏览器支持该对象
var xhr = new XMLHttpRequest();
}else{
var xhr = new ActiveXObject("Msxml2.XMLHTTP"); //如果是低版本浏览器
}
在IE 中可能会遇到三种不同版本的XHR 对象，即MSXML2.XMLHttp、MSXML2.XMLHttp.3.0 和MXSML2.XMLHttp.6.0。
②：创建好xhr对象后，接下来就是要使用该对象，就要调用到一个方法：open();
它接受3 个参数：要发送的请求的类型（"get"、"post"等）、请求的URL 和表示是否异步发送请求的布尔值。下面就是调用这个方法的例子。
xhr.open("get", "example.php", true);
这行代码会启动一个针对example.php 的GET 请求，调用open()方法并不会真正发送请求，而只是启动一个请求以备发送。一般情况下布尔值为true，表示需要异步发送请求。发送工作准备就绪后调用send();方法发送请求。
xhr.send(null);
send方法接受一个参数，作为请求主体发送的数据。如果不需要通过请求主体发送数据，则必须传入null，因为这个参数对有些浏览器来说是必需的。对于get的请求类型，是不需要发送数据的，所以只需要传入null，如果是post的请求类型，则必须传入数据。
③：调用send()之后，请求就会被分派到服务器。由于这次请求是同步的，JavaScript 代码会等到服务器响应之后再继续执行。在收到响应后，响应的数据会自动填充XHR对象的属性，相关的属性简介如下。
responseText：作为响应主体被返回的文本。
responseXML：如果响应的内容类型是"text/xml"或"application/xml"，这个属性中将保存包含着响应数据的XML DOM 文档。
status：响应的HTTP 状态。
statusText：HTTP 状态的说明。
当status为200到300或者304的时候，表明响应返回成功。（详细可以见HTTP状态码及文字说明）。同时xhr对象有个readyState 属性，该属性表示请求/响应过程的当前活动阶段。这个属性可取的值如下。
0：未初始化。尚未调用open()方法。
1：启动。已经调用open()方法，但尚未调用send()方法。
2：发送。已经调用send()方法，但尚未接收到响应。
3：接收。已经接收到部分响应数据。
4：完成。已经接收到全部响应数据，而且已经可以在客户端使用了。
只要readyState 属性的值由一个值变成另一个值，都会触发一次readystatechange 事件。可以利用这个事件来检测每次状态变化后readyState 的值。通常，我们只对readyState 值为4 的阶段感兴趣，因为这时所有数据都已经就绪。代码表示以下：
xhr.onreadystatechange = function (){ //当xhr对象触发readystatechange 事件时
alert(ajax.readyState); //测试readyState 属性的值
if (xhr.readyState == 4){ //当readyState等于4说明数据接收完成
if (xhr.status >= 200 && xhr.status < 300 ||xhr.status == 304){//响应返回成功，并且将返回值传给了responseText属性，responseText内容类型正确
alert(xhr.responseText); //弹出xhr对象responseText属性的值
}else{
alert(xhr.statusText); //如果不成功，则弹出错误HTTP状态说明
}
}
}
以上就是一个完整的pet请求类型的ajax使用方法，整理代码如下：
if (window.XMLHttpRequest){ //如果浏览器支持该对象
var xhr = new XMLHttpRequest(); //创建对象
}else{
var xhr = new ActiveXObject("Msxml2.XMLHTTP"); //如果是低版本浏览器
}
xhr.open("get", "example.php", true);
xhr.send(null);
xhr.onreadystatechange = function (){ //当xhr对象触发readystatechange 事件时
alert(ajax.readyState); //测试readyState 属性的值
if (xhr.readyState == 4){ //当readyState等于4说明数据接收完成
if (xhr.status >= 200 && xhr.status < 300 ||xhr.status == 304){ //响应返回成功，并且将返回值传给了responseText属性，responseText内容类型正确
alert(xhr.responseText); //弹出xhr对象responseText属性的值
}else{
alert(xhr.statusText); //如果不成功，则弹出错误HTTP状态说明
}
}
}
下面简单说一下post请求类型与get不同的地方：
首先，open()方法中第一个参数传入的是post，就可以初始化一个post请求。
xhr.open("get", "example.php", true);
然后将Content-Type 头部信息设置为application/x-www-form-urlencoded，也就是表单提交时的内容类型
接着向post发送请求的send()方法传入数据，这是必须的。
代码不在赘述，除了下面部分做修改大概相同。
xhr.open("post", "example.php", true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send(data);
JQ的ajax
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="jquery-1.11.2.min.js"></script> </head> <body> <input id="content" type="text"> <input id="send" type="button" value="发送消息"> </body> <script type="text/javascript"> $(function (){ $("#send").on("click",function (){ $.ajax({ url:"sendHandle.php", data:{ content:$("#content").val() }, success:function (s){ alert(s); } }); }); }); </script> </html>