JavaScript请求网络数据 AJAX简单使用

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');//调用函数即可

这里只是简单的封装，其实也可以做更多的优化，就看你要实现怎么样的需求了。