ajax与jsonp的区别及用法

当我们需要通过 JavaScript 从服务器获取数据时，可以使用两种方法：Ajax 和 JSONP。这两种方法都能通过异步请求从服务器获取数据。但它们使用的机制和格式都不相同，下面就详细讲解 Ajax 和 JSONP 的区别及用法。

Ajax与JSONP的基本区别

Ajax 和 JSONP 都能够异步请求服务器端数据，但它们的实现机制有所不同。

1. Ajax

Ajax 即 Asynchronous JavaScript and XML，是一种在不重载整个页面的情况下通过 JavaScript 异步获取数据的技术。Ajax 的请求形式是 XMLHttpRequest 对象请求数据，可以通过 HTTP 协议向服务器请求数据，在不刷新页面的基础上实现数据的动态更新。

1. JSONP

JSONP（JSON with Padding）是一种跨域访问的技术，允许使用 JavaScript 代码从其它域名（网站）获取数据。JSONP 的请求形式是通过动态生成 script 标签来请求数据，在请求 URL 的参数中携带一个回调函数名称。服务器返回的数据包裹在回调函数中，浏览器在执行 script 标签内的代码时会直接将数据作为参数传入回调函数中。

差别总结：

• Ajax 请求的数据格式是 XML、JSON、HTML、text，对于同域请求没有限制，但跨域需要加上所谓的CORS请求。
• JSONP 请求的数据格式只支持 JSON 格式，只能进行GET请求，请求的数据作为回调函数参数进行处理。

Ajax 用法示例

1. 发送 GET 请求

let xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
  }
}
xhr.open('GET', '/api/user?id=123', true);
xhr.send();

1. 发送 POST 请求

let xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
  }
}
xhr.open('POST', '/api/user', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify({ id: '123' }));

JSONP 用法示例

function jsonp (url, callback) {
  var callbackName = 'jsonp_' + Date.now();
  var script = document.createElement('script');
  script.src = url + '&callback=' + callbackName;
  window[callbackName] = function (data) {
    callback && callback(data);
    delete window[callbackName];
    document.body.removeChild(script);
  };
  document.body.appendChild(script);
}

jsonp('/api/user?id=123', function (data) {
  console.log(data);
});

上述代码动态生成一个 script 标签，设置其 src 属性为请求的 URL，同时在 URL 中添加回调函数名称。服务器在返回数据时将数据包裹在回调函数名称中，浏览器在执行 script 标签内的代码时会直接将数据作为参数传入回调函数中。

总结：

使用 Ajax 和 JSONP 可以实现不刷新页面的数据加载，但是各有优缺点。如果在同域情况下请求，优先选用 Ajax，如果是跨域请求，只能使用 JSONP。同时，Ajax 请求是 XMLHttpRequest 对象请求，处理 JSON 数据非常方便，而 JSONP 只能处理JSON 格式数据，但是 JSONP 的兼容性更好，可以应对更多浏览器。