jquery ajax中使用jsonp的限制解决方法

使用jQuery进行AJAX（异步 Javascript 和 XML），通过使用JSONP（JSON with Padding）跨域获取数据时，可能会遇到一些限制。本文将介绍如何解决这些限制。

什么是JSONP

JSONP是一种使用JavaScript和JSON的技术，主要用于解决跨域请求的问题。在跨域请求中，由于安全策略的限制，一般只能请求同域下的资源。而使用JSONP可以通过script标签通过get请求获取外域的数据，实现跨域请求。

示例

以http://example.com域名下的网页请求http://example2.com域名下的数据为例。

请求方式：JSONP

1. 在http://example.com页面中，使用jQuery进行AJAX请求：

$.ajax({
    type: "GET",
    url: "http://example2.com/data",
    dataType: "jsonp", //设置数据类型为jsonp
    jsonp: "callback", //自定义请求字段名
    success: function(data){
        console.log(data);
    },
    error: function(xhr, status, error){
        console.log(error);
    }
});

1. 在http://example2.com服务端程序中，返回的数据格式如下：

callback({"data": "xxx"});

在这种情况下，服务端返回的数据格式必须是一个函数调用，参数是一个闭合的JSON对象。callback是自定义的请求参数名称，在jQuery中一般默认为callback，服务端需要接收这个参数，并将数据封装在一个函数中返回。

JSONP的限制

使用JSONP时，存在一些限制：

1. 只能使用GET请求，不能使用POST等其他方式。
2. 只能下载GET请求的数据，不能上传数据。
3. 安全性问题，有一定的风险。
4. 无法使用普通的错误处理方式。

解决JSONP的限制

1. 只能使用GET请求

解决方法：使用服务端软件代理POST请求，将请求数据以GET方式传递。

$.ajax({
   url: '/api/proxy',
   type: 'POST',
   data: {
     url: 'http://example2.com/data',
     data: 'data'
   },
   dataType: "jsonp", 
   jsonp: "callback",
   success: function(){
   }
 });

使用/api/proxy 服务端程序，将请求数据以GET方式传递到http://example2.com/data 服务上。

callback(serverData);

返回的数据格式同样需要支持JSONP。

### 2. JSONP只能下载数据，不能上传数据

解决方法：在服务器中指定一个回调函数用于将数据从客户端带回服务器。

$.ajax({
   url: 'http://example2.com/data',
   type: 'POST',
   data: {
     data: 'data'
   },
   dataType: "jsonp",
   jsonp: "callback",
   success: function(){
   }
 });

服务器需要提供一个处理程序来解析POST请求，并返回数据，这个数据使用指定的函数包装，将数据发送回客户端。

3. 安全性问题

解决方法：使用生成随机JSON回调函数的方式。

var random = Math.floor(Math.random()*100000001);

在请求时不是使用指定的回调函数而是要使用一个随机而唯一的函数名称，服务端无法查找这个函数的源函数，解决了安全性问题。

$.ajax({
   url: 'http://example2.com/data',
   type: 'POST',
   data: {
     data: 'data'
   },
   dataType: "jsonp",
   jsonp: "callback" + random, //生成随机回调函数
   success: function(){
   }
 });

4. 无法使用普通的错误处理方式

解决方法：使用error回调函数，jQuery在请求错误时调用此回调函数。

$.ajax({
  url: 'http://example2.com/data',
  type: 'POST',
  data: {
    data: 'data'
  },
  dataType: "jsonp",
  jsonp: "callback" + random,
  success: function(data){
    console.log(data);
  },
  error: function(XMLHttpRequest, textStatus, errorThrown){
    console.log(textStatus);
  }
});

以上是jquery ajax中使用jsonp的限制解决方法的完整攻略，希望对你有所帮助。