跨域的jsonP

简介:
1.出现原因:因为web中的同源策略(域名,协议,端口号)限制了跨域访问。
 
2.区别于json
(个人理解) json是数据交换格式,jsonp是数据通信中的交互方式
 
3.jsonp的get与post
本质是使用script标签的跨域特性。
 
4.jQuery的写法(一)
复制代码
$.ajax({ 
 async:false, 
    url: , 
    type: "GET", 
    dataType: 'jsonp', 
    jsonp: 'jsoncallback', 
    data: qsData, 
    timeout: 5000, 
    success: function (json) {
    
    }, 
    error: function(xhr){ 
     
});
复制代码
 
jQuery的写法(二)
$.getJSON("http://跨域的dns/document!searchJSONResult.action?name1="+value1+"&jsoncallback=?", 
 function(json){ 
 
}); 
 
 
 
5.JS的写法
var eleScript= document.createElement("script");
eleScript.type = "text/javascript";
eleScript.src = "http://...";
document.getElementsByTagName("HEAD")[0].appendChild(eleScript);
 
6.原理与过程

首先在客户端注册一个callback, 然后把callback的名字传给服务器。

此时,服务器先生成 json 数据。 然后以 javascript 语法的方式,生成一个function , function 名字就是传递上来的参数 jsonp。

最后将 json 数据直接以入参的方式,放置到 function 中,这样就生成了一段 js 语法的文档,返回给客户端。

客户端浏览器,解析script标签,并执行返回的 javascript 文档,此时数据作为参数,传入到了客户端预先定义好的 callback 函数里。(动态执行回调函数)


 
7.一些需要注意的问题
<1>“myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。
<2>jQuery中的jsonpCallback:为 jsonp 请求指定一个回调函数名。这个值将用来取代 jQuery 自动生成的随机函数名。这主要用来让 jQuery 生成度独特的函数名,这样管理请求更容易,也能方便地提供回调函数和错误处理。
转载: http://www.cnblogs.com/zqzjs/p/4975829.html
目录
相关文章
|
5月前
Ajax-jsonp跨域
Ajax-jsonp跨域
|
7月前
|
缓存 JSON 前端开发
Ajax:跨域与JSONP
Ajax:跨域与JSONP
41 1
|
10月前
|
JSON JavaScript 前端开发
jsonp解决Ajax跨域问题
jsonp解决Ajax跨域问题
80 0
|
前端开发
利用jsonp解决跨域问题
这篇文章给大家分享的是利用jsonp解决跨域问题。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
75 0
|
JSON 安全 JavaScript
跨域访问(JSONP)
跨域访问(JSONP)
104 0
跨域访问(JSONP)
|
JSON 缓存 JavaScript
同源策略与跨域访问(jsonp和cors等)
同源策略与跨域访问(jsonp和cors等)
264 0
同源策略与跨域访问(jsonp和cors等)
|
JSON 缓存 JavaScript
JSONP - 跨域篇
JSONP - 跨域篇
204 0
JSONP - 跨域篇
|
JSON JavaScript 前端开发
学习AJAX必知必会(5)~同源策略、解决跨域问题(JSONP、CORS)
学习AJAX必知必会(5)~同源策略、解决跨域问题(JSONP、CORS)
223 0
学习AJAX必知必会(5)~同源策略、解决跨域问题(JSONP、CORS)
|
Web App开发 前端开发 JavaScript
|
JSON JavaScript 数据格式
jsonp和cors实现跨域
jsonp实现的原理主要是利用src属性可以去加载跨域的资源,例如script、img。 动态的创建script标签,加载跨域资源
1151 0