JSONP的原理
来源:互联网 发布:情趣内衣淘宝买家秀 编辑:程序博客网 时间:2024/05/18 01:36
那JSONP是如何工作的呢,我们知道,由于同源策略的限制,XmlHttpRequest只允许请求当前源(域名、协议、端口)的资源。若要跨域请求出于安全性考虑是不行的,但是我们发现,Web页面上调用js文件时则不受是否跨域的影响,而且拥有”src”这个属性的标签都拥有跨域的能力,比如
function CallWebServiceByJsonp() { $("#SubEquipmentDetails").html(''); $.ajax({ type: "GET", cache: false, url: "http://servername/webservice/webservice.asmx/GetSingleInfo", data: { strCparent: $("#Equipment_ID").val() }, dataType: "jsonp", //jsonp: "callback", jsonpCallback: "OnGetMemberSuccessByjsonp" });}function OnGetMemberSuccessByjsonp(data) { //处理data alert(data);}
//后端
public void GetSingleInfo(string strCparent){ string ret = string.Empty; HttpContext.Current.Response.ContentType = "application/json;charset=utf-8"; string jsonCallBackFunName = HttpContext.Current.Request.Params["callback"].ToString(); //string jsonCallBackFunName1 = HttpContext.Current.Request.QueryString["callback"].Trim(); //上面代码必须 //中间代码执行自己的业务操作,可返回自己的任意信息(多数据类型) BLL.equipment eq_bll = new BLL.equipment(); List<Model.equipment> equipmentList = new List<Model.equipment>(); equipmentList = eq_bll.GetModelEquimentList(strCparent); ret = JsonConvert.SerializeObject(equipmentList); //下面代码必须 HttpContext.Current.Response.Write(string.Format("{0}({1})", jsonCallBackFunName, ret)); HttpContext.Current.Response.End();}
如上所示,前端的CallWebServiceByJsonp方法采用jQuery的ajax方法调用后端的Web服务GetSingleInfo方法,后台的GetSingleInfo方法,使用前端的回调方法OnGetMemberSuccessByjsonp包装后台的业务操作的JSON对象,返回给前端一段javascript片段执行。巧妙的解决了跨域访问问题。
JSONP的缺点:
JSONP不提供错误处理。如果动态插入的代码正常运行,你可以得到返回,但是如果失败了,那么什么都不会发生。
原生JS请求jsonp
function getJSONP( url, callback ){ var cbnum = "cb" + getJSONP.counter++; var cbname = "getJSONP." + cbnum; if( url.indexOf( "?" ) === -1 ){ url += "?jsonp=" + cbname; }else{ url += "&jsonp" + cbname } var script = document.createElement( "script" ); // 回调函数 getJSONP[cbnum] = function( response ){ try{ callback( response ); }finally{ delete getJSONP[num]; script.parentNode.removeChild( script ); } }; script.src = url; document.body.appendChild( script );}getJSONP.counter = 0;
0 0
- Jquery的Jsonp原理
- JSONP的原理
- jsonp的简单原理
- jsonp的原理
- :jsonp的原理
- jsonp的原理
- JSONP的原理
- JSONP的原理
- jsonp的原理
- webjs -- jsonp的原理
- JSONP的原理
- JSONP 的工作原理
- JSONP 的工作原理
- JSONP 的工作原理,JSONP Demo讲解
- jsonp的工作原理 跨域
- jsonp 的原理和使用
- jsonp 的原理与实现
- 浅谈JSONP 的工作原理
- Linux线程同步--条件变量
- RESTful
- java判断字符串是什么编码
- linux下调试postgreSQL
- bootstrap-table表格导出功能学习分享
- JSONP的原理
- Mac系统&Android studio&抽方法的快捷键&&Android studio 抽方法快捷键&&抽代码成方法
- 40个比较重要的Android面试题
- pycharm的两种激活方法
- C#枚举中使用Flags特性
- 蓝桥杯 算法训练 字串统计 By Assassin 字符串操作+离散化
- [LeetCode] 125. Valid Palindrome java
- angular内置事件
- Puppet vs. Chef vs. Ansible vs. SaltStack