Jsonp

时间：2017-03-08 22:58:44 阅读：236 评论：0 收藏：0 [点我收藏+]

标签：text 实现 line url err get cal 不能 app

JSONP(JSON with Padding)

用来实现跨域请求

由于浏览器同源策略的限制，

XmlHttpRequest只允许请求当前源

所谓同源是指，域名，协议，端口相同

含有 Src 属性的html标签

比如图片src，引入样式src，引入脚本src

都是本身就自带跨域请求

JSONP原理

在客户端声明JSONP回调函数之后，

客户端向服务器跨域请求数据并指定?callbackxxx=jsonpcallbackxxx，

然后服务端以 jsonpcallback (json) 返回给浏览器执行

JSONP缺点

1 没有关于 JSONP 调用的错误处理

如果动态脚本插入有效，就执行调用；如果无效，就静默失败。失败是没有任何提示的。

例如，不能从服务器捕捉到 404 错误，也不能取消或重新开始请求。

2 若被不信任的服务使用时会很危险

因为 JSONP 服务返回打包在函数调用中的 JSON 响应，

而函数调用是由浏览器执行的，这使宿主 Web 应用程序更容易受到各类攻击。

3 只支持GET请求，不支持POST和其他HTTP请求

jsonp示例服务端后台代码

public string TestJsonp()

{

string json = "";

json += "\"username\":\"用户1\",";

json += "\"age\":\"100岁\"";

json = "{" + json + "}";

string callback = Request["callbackxxx"];

return callback + "(" + json + ")";

}

javascript jsonp请求

function jsonpCallBackxxx(res) {

$("#test").append("<p>" + res.username + "</p>");

$("#test").append("<p>" + res.age + "</p>");

}

//jsonp url?callbackxxx=客户端预要处理此JSONP的回调函数

var jsonpurl = "http://localhost:901/Home/TestJsonp?callbackxxx=jsonpCallBackxxx";

//创建script对象并赋值其SRC属性

var $script = document.createElement("script");

$script.src = jsonpurl;

//追加到DOM中，此时即开始调用

document.getElementsByTagName(‘head‘)[0].appendChild($script);

</script>

jquery ajax jsonp请求

若指定了DataType为JSONP，那么就不再属于XMLHttpRequest请求了，

而是JSONP协议的请求，因此 error ，beforeSend 等 ajax事件不会得到执行

Ajax

Ajax 的 jsonpCallback参数注意
1 不指定或指定了不存在的回调函数

会执行success函数

2 指定存在的回调函数

即执行success函数，也执行指定的回调函数

3 指定为?

会导致失效

function jsonCallBackxxx(res) {

$("#test").append("<p>这是 jsonCallBackxxx</p>");

$("#test").append("<p>" + res.username + "</p>");

$("#test").append("<p>" + res.age + "</p>");

}

$.ajax({

url: "http://localhost:901/Home/TestJsonp",

type: "Get",

dataType: "jsonp", //设置ajax数据请求类型为jsonp

jsonp: "callbackxxx", //设置服务端读取jsonpCallback的Request.QueryString 参数

jsonpCallback: "jsonCallBackxxx", //指定JSONP回调函数

success: function (res) {

$("#test").append("<p>这是 ajax success</p>");

$("#test").append("<p>" + res.username + "</p>");

$("#test").append("<p>" + res.age + "</p>");

}

}); // ajax

////或者

//$.ajax({

// url: "http://localhost:901/Home/TestJsonp?callbackxxx=jsonCallBackxxx",

// type: "Get",

// dataType: "jsonp",

//}); // ajax

</script>

GET

GET url的 ?callbackxxx=jsonpcallbackxxx注意

1 不指定或指定不存在的回调函数

会导致失效

2 指定存在的jsonpcallback

执行指定的回调函数，不执行success函数

3 指定为?

表示让jquery随机生成函数名

当为?时，此图来自后台的调试

function jsonCallBackxxx(res) {

$("#test").append("<p>" + res.username + "</p>");

$("#test").append("<p>" + res.age + "</p>");

}

var jsonpurl = "http://localhost:901/Home/TestJsonp?callbackxxx=?";

$.get(

jsonpurl,

function (res) {

jsonCallBackxxx(res);

"jsonp"); // get

////或者

//var jsonpurl = "http://localhost:901/Home/TestJsonp?callbackxxx=jsonCallBackxxx";

//$.get(

// jsonpurl,

// function (res) {

// $("#test").append("<p>这种方式，这是 get success 不会被执行</p>");

// },

// "jsonp"); // get

</script>

GETJSON

GETJSON url的 ?callbackxxx=jsonpcallbackxxx注意

1 不指定或指定不存在的回调函数

会导致失效

2 指定存在的jsonpcallback

会导致失效

3 指定为?

表示让jquery随机生成函数名

function jsonCallBackxxx(res) {

$("#test").append("<p>" + res.username + "</p>");

$("#test").append("<p>" + res.age + "</p>");

}

var jsonpurl = "http://localhost:901/Home/TestJsonp?callbackxxx=?";

$.getJSON(

jsonpurl,

function (res) {

jsonCallBackxxx(res);

}); // getjson

</script>

本文部分参考以下博友文章

http://justcoding.iteye.com/blog/1366102

http://blog.csdn.net/z69183787/article/details/19191385

Jsonp

标签：text 实现 line url err get cal 不能 app

原文地址：http://www.cnblogs.com/guozewen/p/6523151.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行