jsonp跨域原理,jsonp和ajax的区别?

摘要:Jsonp原理是动态创建一个script标签,利用script标签src属性访问没有限制,实现跨域。Ajax是页面无刷新请求数据操作,Jsonp不是真正的ajax请求。讲解Ajax 和 jsonp的区别,在jquery中使用jsonp

Jsonp原理

动态创建一个script标签,利用script标签src属性访问没有限制,实现跨域。

web客户端通过与调用脚本一样的方式来调用跨域服务器上动态生成的js格式文件(后缀.json),服务器之所以要动态生成json文件目的把客户端需要的数据装入进去。

允许用户传递一个callback参数给服务端,然后服务端返回数据时会将这个callback参数作为函数名来包裹住json数据 这样客户端就可以随意定制自己的函数来自动处理返回数据


Ajax 和 jsonp的区别

1.ajax和jsonp的调用方式很像,目的一样,都是请求url,然后把服务器返回的数据进行处理,因此jquery和ext等框架都把jsonp作为ajax的一种形式进行了封装;
2.实质不同
 ajax的核心是通过xmlHttpRequest获取非本页内容
 jsonp的核心是动态添加script标签调用服务器提供的js脚本(后缀.json)
3.区别联系
 不在于是否跨域
 ajax通过服务端代理一样跨域
 jsonp也不并不排斥同域的数据的获取
4.jsonp是一种方式或者说非强制性的协议
 ajax也不一定非要用json格式来传递数据 

5.jsonp只支持get请求,ajax支持get和post请求


jquery中使用jsonp

jQuery使用JSONP实现跨域获取数据的三种方法  

第一种方法是在ajax函数中设置dataType为'jsonp'

$.ajax({
  dataType: 'jsonp',
  url: 'http://www.a.com/user?id=123',
  success: function(data){
    //处理data数据
  }
});


第二种方法是利用getJSON来实现,只要在地址中加上callback=?参数即可

$.getJSON('http://www.a.com/user?id=123&callback=?', function(data){
  //处理data数据
});


第三种方法是使用getScript方法

//此时也可以在函数外定义foo方法
function foo(data){
  //处理data数据
}
$.getScript('http://www.a.com/user?id=123&callback=foo');


本文内容仅供个人学习、研究或参考使用,不构成任何形式的决策建议、专业指导或法律依据。未经授权,禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载,请保留原文来源信息,不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持!

链接: https://shenqiku.cn/article/FLY_667