Ajax jsonp跨域请求实现方法

<script type="text/javascript" src="/UploadFiles/2021-04-02/xxxx.js">

其中src属性引入js文件的时候是没有同源限制的,此时是可以引入域外资源的.jsonp的原理就在这里,通过动态的创建一个以上那行js引入语句,通过其src属性访问域外资源.而域外资源服务器只要返回一个能被解析为js语句的字符串即可达到返回结果的目的,形如:


callback({"key":"value",...}) 


其中callback是需要事先约定的名字,绿字部分为要返回到json字符串,然后拼接成以上那种形式直接返回即可.这样页面中的js从服务端接收到这个拼接的字符串后,就会直接执行本地的名为callback的js方法,这也就是为何callback这个需要事先约定的原因,需要保证页面侧要存在这个js方法,这个方法传入的参数就为服务器侧的返回值.
ajax是支持jsonp的,所以以上那些麻烦事情都会替我们做,写法如下:


$.ajax({
     type: 'GET',
     url: "http://127.0.0.1:8080/xxx/xxx",
     async: false,
     dataType: "jsonp",
     jsonp: "callback",
     success: function(result){
       .....
     },
     timeout:3000 
  });


红字部分标识我们使用jsonp的方式调用,实际上此时这个已经不是传统意义上的ajax的get请求了,它的真实实现方式就是我们上文中说的那样.其中红字部分的callback为我们要和服务器端进行沟通的部分,这个请求发送到服务器端,实际上这样的:
http://127.0.0.1:8080/xxx/xxx"callback")),也就是取后面的jqueryxxxx等自动生成的值,这个值实际上就是对应的我们发送请求的ajax方法中的success回调方法,服务器端如果返回


jqueryxxxx({"ret":"ok"})




页面中会自动执行success方法,且将{"ret":"ok"}传给success方法的参数result.
以上就是ajax通过jsonp的方式实现跨域访问的过程.可以看出基本不用我们做什么额外操作,全都封装好了.
ps：在jQuery中如何通过JSONP来跨域获取数据
第一种方法是在ajax函数中设置dataType为'jsonp'： 




$.ajax({
    dataType: 'jsonp',
    url: 'http://www.a.com/user"color: #0000ff">第二种方法是利用getJSON来实现，只要在地址中加上callback="htmlcode">

$.getJSON('http://www.a.com/user"htmlcode">

//此时也可以在函数外定义foo方法
function foo(data){
    //处理data数据
}
$.getJSON('http://www.a.com/user"color: #0000ff">JSONP的应用

JSONP在开放API中可以起到非常重要的作用，开放API是运用在开发者自己的应用上，而许多应用往往是在开发者的服务器上而不是在新浪微博的服务器上，因此跨域请求数据成为开发者们所需要解决的一大问题，广大开放平台应该实现对JSONP的支持，这一点新浪微博开放平台便做的非常好（虽然某些API里没有说明，但实际上是可以使用JSONP方式调用的）。

            
            上一篇：asp.net+ajax简单分页实例分析

            下一篇：简单谈谈AJAX核心对象