jQuery中JSONP的两种实现方式简单解释
来源:互联网 发布:淘宝淘金币在哪看 编辑:程序博客网 时间:2024/05/18 14:14
前台代码如下:(jsonp的方式可以简单的理解为会给前端生成一个回调函数,而不需要自己编写,当然也是可以自己编写的)
后台Action代码如下:
运行后就可以看到结果了。我追踪了下后台ProcessCallback代码,如下图:
可以看到jsonCallback的值为"jQuery17104721....",它是前端传给远程服务器后台Action的。这里 jQuery171..表示的是jQuery的版本,可以简单地将这个理解为JSONP类型请求回调函数,jQuery在我们每次指定Ajax请求方式为 JSONP时都会生成这么一个JSONP回调函数。虽然jQuery会自动帮我们生成一个回调函数,但是我们也可以通过设置 jsonpCallback 参数为jsonp请求定制一个我们自己的回调函数。
第一种方式下面这三行代码设定了JSONP请求方式:
dataType: "jsonp",
jsonp: "jsonpcallback",// 指定回调函数参数名称,这里名字可以为其他任意你喜欢的,比如callback,不过必须与下一行的GET参数一致
data: "name=jxq&email=feichexia@yahoo.com.cn&jsonpcallback=?", // jsonpcallback与上面的jsonp值一致
第二种方式则直接在GET参数后面带上jsonpcallback=?来标识。
我们可以推断这么做以后,jQuery内部机制就帮我们绕过了浏览器的跨域访问限制,然后就可以像正常请求同域Action一样请求跨域Action了。
最后返回的是一个函数表达式:
return jsonCallback + "(" + new JavaScriptSerializer().Serialize(user) + ")";
这样返回给前端的就是类似这种jQuery17104721....('{Name:"jxq", Email:"feichexia@yahoo.com.cn"}'),它一返回到前端就会执行,得到的是一个JavaScript对象,对象有两个属 性:Name和Email,所以我们可以直接调用json.Name和json.Email
通过此文,希望能帮助大家学习掌握此部分知识,谢谢大家对本站的支持!
补充:如果在$.ajax请求中指定了jsonpCallback="jsonCallback2";表示的意思是这个回调函数的函数名称为“jsonCallback2”.
原文链接:http://blog.sina.com.cn/s/blog_a3468cf60102w4rg.html
- jQuery中JSONP的两种实现方式简单解释
- jQuery中JSONP的两种实现方式
- jquery的ajax实现jsonp的两种方式
- nodejs两种方式实现跨域(jsonp,cors)
- Jsonp的实现方式
- web前端js跨域的两种实现方式jsonp和src
- 学习淘淘商城第九十五课(jsonp的原理及两种实现方式)
- 淘淘商城系列——jsonp的原理及两种实现方式
- JSONP以及jQuery对JSONP的实现
- jQuery图片无缝滑动效果的两种实现方式
- jquery的ajax实现jsonp
- jquery实现的jsonp跨域
- jquery两种方式实现链接失效
- jquery两种方式实现链接失效
- js实现文件下载的两种简单方式
- cocos2dx 简单实现遮罩的两种方式
- 智能指针的简单实现及两种误用方式
- 拖拽最简单的实现方式[JQuery实现]
- datatable对某一列的值进行模糊或非模糊搜索
- 习题27
- 哈夫曼压缩算法C语言实现——步骤,详细注释源码
- 统计学习方法
- Convolutional Neural Network-based Place Recognition
- jQuery中JSONP的两种实现方式简单解释
- NSAttributedString
- 修改系统默认 alert 弹框样式
- python matplotlib阶段性总结——word转txt、绘图、文件操作
- 抓取一个网页并解析HTML
- 关于自然语言的实体抽取和舆情分析技术
- 将数组转换为List
- J2EE系列之Spring4学习笔记(十二)--Spring对事务管理
- 线程中断、超时与降级——《亿级流量》内容补充