JQuery的Ajax跨域请求原理概述及实例

JQuery是一款优秀的JS框架，可以方便地进行Ajax请求。但是在跨域请求方面，要特别注意相关的规则。

Ajax跨域请求原理概述

跨域请求的定义

所谓跨域请求，是指在发送Ajax请求的过程中，请求的地址和当前页面的地址不在同一个域下。

跨域请求的限制

浏览器出于安全性考虑，限制了Ajax请求所能请求的范围，即同源策略。同源策略限制了Ajax请求只能请求同一个域下的资源，也就是相同协议、相同主机、相同端口号、相同协议的域名下的资源。

跨域请求的解决办法

有几种方式可以解决跨域请求问题。其中最常用的方式是jsonp（JSON with Padding）和CORS（Cross-Origin Resource Sharing）。

JSONP实例

JSONP是通过动态创建script标签，设置src属性，然后在后台处理请求时，将返回的数据作为回调函数的参数返回到前端页面中。

$.ajax({
    type: 'get',
    url: 'http://www.example.com/jsonp',
    dataType: 'jsonp',
    jsonp: 'callback',
    success: function(data) {
        console.log(data);
    },
    error: function(err) {
        console.log(err);
    }
});

上面的代码中，我们指定请求数据的地址为'http://www.example.com/jsonp'，同时指定请求数据的类型为jsonp，以及回调函数的名称为'callback'。

在服务端接收到请求之后，将数据作为'callback'函数的参数返回：

// 服务端返回的数据为：
callback({data: 'Hello, JSONP!'});

浏览器自动执行回调函数，并将返回的数据传入成功回调函数。

CORS实例

CORS是一项跨域资源共享的技术。在ajax访问其他域下的数据时，浏览器会先发起一次options预检请求，确认当前请求是否符合CORS的要求，如果符合要求，则发起正式的请求，获取数据。

$.ajax({
    url: 'http://www.example.com/content',
    type: 'GET',
    crossDomain: true,
    xhrFields: {
        withCredentials: true
    },
    beforeSend: function(xhr) {
        xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
    },
    success: function (data) {
        console.log('数据获取成功！');
    },
    error: function (xhr, errorText, err) {
        console.log('数据获取错误！');
    }
});

上面的代码中，我们指定访问的地址为'http://www.example.com/content'，同时设置crossDomain和xhrFields属性，前者表示跨域请求，后者表示允许携带cookie等信息。我们还设置了beforeSend回调函数，在请求头中添加了X-Requested-With属性，使得后台判断请求是否是Ajax请求。最后，我们通过success和error回调函数处理获取数据成功或者失败的情况。