Asynchronous JavaScript and XML，简称AJAX（异步的 JavaScript 和 XML）。AJAX 不是新的编程语言，而是一种使用现有标准的新方法。AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。
XMLHttpRequest 对象
XMLHttpRequest 是 AJAX 的基础，所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
创建xmlHttpRequest：
var xmlhttp;
if (window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest();//IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
}else{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");// IE6, IE5 浏览器执行代码
}
向服务器发送请求：
xmlHttpRequest对象的open()方法可以创建get或者post请求，send()方法发送请求。
xmlhttp.open("GET","https://gank.io/api/v2/data/category/Girl/type/Girl/page/1/count/10",true);//open方法接收三个参数，分别是请求方式，请求目标，是否异步
xmlhttp.send();//send方法接收一个字符串，仅post请求生效。
服务器响应：
如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。responseText获得字符串形式的响应数据，responseXML获得 XML 形式的响应数据，这里就只演示responseText了。
var res = xmlhttp.responseText;
console.log(res);
响应状态：
如果把上面的代码整合到一起，你可能会发现控制台没有输出内容，但事实上请求可能是成功的，因为控制台打印的时候还没请求完成，这时候就需要判断响应状态了。
var xmlhttp,res;
if (window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest();//IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
}else{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");// IE6, IE5 浏览器执行代码
}
xmlhttp.open("GET","https://gank.io/api/v2/data/category/Girl/type/Girl/page/1/count/10",true);
xmlhttp.send();
xmlhttp.onreadystatechange = function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
res = xmlhttp.responseText;
console.log(res);
}
}
onreadystatechange是一个函数，每当readyState发生改变，就会触发这个函数。
封装回调函数
上面的例子已经可以实现根据响应状态触发回调了，但是还可以优化一下封装成回调函数。
var xmlhttp,res;
function request(url, func) {
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = func;
xmlhttp.open("GET", url, true);
xmlhttp.send();
}
function myReq(url) {
request(url, function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
res = xmlhttp.responseText;
console.log(res);
}
})
}
myReq('https://gank.io/api/v2/data/category/Girl/type/Girl/page/1/count/10');//调用函数即可
这里只是简单的封装，其实也可以做更多的优化，就看你要实现怎么样的需求了。
