JS 中的 Ajax

异步

Javascript语言的执行环境是”单线程”（single thread）。所谓”单线程”，就是指一次只能完成一件任务。如果有多个任务，就必须排队，前面一个任务完成，再执行后面一个任务，以此类推。

这种模式的好处是实现起来比较简单，执行环境相对单纯；坏处是只要有一个任务耗时很长，后面的任务都必须排队等着，会拖延整个程序的执行。常见的浏览器无响应（假死），往往就是因为某一段Javascript代码长时间运行（比如死循环），导致整个页面卡在这个地方，其他任务无法执行。 为了解决这个问题，Javascript语言将任务的执行模式分成两种：同步（Synchronous）和异步（Asynchronous）。

通常用ajax来实现异步请求。

Ajax

在现代浏览器上写Ajax主要是依靠XMLHttpRequest对象：

function success(data){
    console.log(data);
}
function error(status){
    console.log(status);
}
var request;
if (window.XMLHttpRequest) {
    request = new XMLHttpRequest(); //新建XMLHttpRequest对象
} else {
    request = new ActiveXObject('Microsoft.XMLHTTP');//兼容ie5,ie6
}
request.onreadystatechange = function () { //状态发生变化时，函数被回调
    if (request.readyState === 4) { // 请求完成
        //判断响应结果：
        if (request.state === 200) { //成功通过responseText拿到响应文本
            return success(request.responseText);
        } else {
            //失败，根据响应码判断失败原因
            return error(request.status);
        }
    } else {
        //HTTP请求还在继续...
    }
};
request.open('GET', '/api/categories');
request.send();

open(‘method’, url, true/ false)，第三个参数默认是true（异步），一般不填

send(data)，get方法发送的数据写在url里，send()中一般不填，post方法，则填请求的数据。

跨域

由于浏览器的同源策略。默认情况下，JavaScript在发送Ajax请求时，url 的域名必须和当前页面完全一致。

完全一致是指：

• 域名要相同（www.example.com和example.com不同）
• 协议要相同（http和https不同）
• 端口号要相同（默认是:80端口，它和:8080不同，与其它端口也不同），有点浏览器允许端口不同，大部分浏览器不允许

但有些时候我们就是需要跨域请求资源，怎么办呢？

通常使用的方法有以下几种：

第一种：JSONP，它有个限制，只能用GET请求，并且要求返回JavaScript。这种方式跨域实际是利用了浏览器允许跨域引用JavaScript资源。

第二种：CORS，它是对方服务器给你所在域设置了Access-Control-Allow-Origin ，你的请求才会成功。而且需要浏览器支持HTML5。

第三种：代理服务器。

jQuery 中的 Ajax

在实际开发中，我们一般使用集成的类库来写Ajax。下面写一个简单的jq中的ajax。

$.ajax({
    type:POST,
    url:'createStaff.php',
    data:{
        name:'wang',
        age:18
    }
    dataType:json,
    success:function(data){
        console.log(data.msg);
    },
    error:function(jqXHR){
        alert(jqXHR.status);
    }
});