小虎博客

A-A+

jquery ajax跨域用jsonp方式调用web服务的例子

2016年01月13日 编程技术 暂无评论

ajax跨域对于许多的朋友来讲还是用到的比较少了，但在一些大的应用开发时会用到了ajax跨域用jsonp了，下面我们就来看一篇jquery ajax跨域用jsonp方式调用web服务的代码实例，希望文章能够帮助到各位朋友。
在做一个demo的项目，需要将php，.net的几个人，加起来一起做个web系统。考虑到语言不通，demo要的急。就直接web使用html+js+asmx服务的方式进行开发。

数据请求及返回流程是这样的：

理解了上面的流程图，其实实现起来是很简单的。

1、html中引用jquery

2、jquery使用ajax调用远程web服务，这里需要定义为JSONP格式，并且加上callback参数

  1. $.ajax({    
  2.         //url:"http://y.com/ceshi.php",    
  3.         url:"http://192.168.3.5:8880/stat.asmx/Login",    
  4.         dataType:'jsonp',    
  5.         data: {  
  6.                     name:"a",  
  7.                     pwd:"a"  
  8.                },   
  9.         jsonp:'callback',          
  10.         success:function(result) {    
  11.             alert(JSON.stringify(result));  
  12.         },    
  13.         timeout:3000    
  14.     });  

其中?jsoncallback=?是必须的，需要在服务器端，针对这个参数对返回的jsonp进行参数组合。

这里需要注意，web服务的真正地址是：服务.asmx/Login参数。login是.net的函数名称

3、服务器端获取数据库数据后，对返回值进行封装

  1. public void Login(string name, string pwd)  
  2.        {  
  3.            AP.Model.TB_User user = new TB_User();  
  4.            AP.BLL.TB_User userbll=new AP.BLL.TB_User();  
  5.            HttpContext.Current.Response.ContentType = "application/json;charset=utf-8";  
  6.            string jsoncallback = CheckResponse.GetResponse("callback");      
  7.            user = userbll.GetModel(name, pwd);  
  8.            string rehtml = CheckResponse.Cleaner(CheckResponse.GetObjectJson(user));  
  9.            string returnvalue = "";  
  10.            returnvalue = returnvalue + (jsoncallback + "({\"jsondata\":\"" + rehtml + "\"})");  
  11.           // return returnvalue;  
  12.            HttpContext.Current.htm = htm&(returnvalue);  
  13.            HttpContext.Current.Response.End();  
  14.        }  

这使用了Newtonsoft的序列化组件

  1. /// <summary>  
  2.    /// 序列化数据到json  
  3.    /// </summary>  
  4.    /// <param name="value"></param>  
  5.    /// <returns></returns>  
  6.    public static string GetObjectJson(object value)  
  7.    {  
  8.        return Newtonsoft.Json.JsonConvert.SerializeObject(value);  
  9.    }  

其中,jsonp的字符串可能会有特殊字符串,需要转移一下.

  1. /// <summary>  
  2.    /// json html字符串转义  
  3.    /// </summary>  
  4.    /// <param name="_s"></param>  
  5.    /// <returns></returns>  
  6.    public static string Cleaner(string _s)  
  7.    {  
  8.        if (_s == null) return "";  
  9.        System.Text.StringBuilder sb = new System.Text.StringBuilder(_s);  
  10.        sb.Replace(@"\", @"\\"); 
  11.        sb.Replace(@"'", @"\'"); 
  12.        sb.Replace(@"""", @"\"""); 
  13.        sb.Replace(Environment.NewLine, @"\n");   //替换连在一起的\r\n 
  14.        sb.Replace("\n", @"\n");               //单个替换 
  15.        sb.Replace("\r", @"\n");  
  16.        return sb.ToString();  
  17.    }  

可以看到这段代码根据callback参数进行了封装。

  1. context.Response.ContentType = "text/json";  
  2. returnvalue = returnvalue + (jsoncallback + "({\"datata\":\"" + rehtml + "\"})");  

跨域调用不是很困难的事情,跨域相关问题及同源策略,域这么麻烦为什么浏览器或者系统直接允许不就行了？跨域的初衷是什么？初衷主要是浏览器的安全策略:同源策略。

受同源策略限制，JavaScript不能跨域!　这里提到了同源策略，那么什么是同源策略呢？

同源策略(Same Origin Policy)，它是由Netscape提出的一个著名的安全策略。 现在所有支持JavaScript 的浏览器都会使用这个策略。同源策略阻止从一个域上加载的脚本去获取或操作另一个域上的文档属性。也就是说，受到请求的 URL 的域必须与当前 Web 页面的域相同。这说明浏览器隔离来自不同源的内容，以防止它们之间的操作。

为何要使用同源策略？

答案:安全,一个简单的例子：比如一个黑客，他利用Iframe把真正的银行登录页面嵌到他的页面上，当你使用真实的用户名，密码登录时，他的页面就可以通过Javascript读取到你的表单中input中的内容，这样用户名，密码就轻松到手了。后果会非常严重！

那么什么才是同源？

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

同源的几种情况：

1.不同域名属于跨域，如：www.a.com和www.b.com，另外www.a.com 和www.a.com.cn 也属于不同域名。

2.主域名和子域名（二级域名、三级域名等）跨域，如：www.a.com 和 sub.a.com

属于跨域，sub.a.com 和 sub1.a.com 之间也是跨域。

3.不同协议属于跨域，如：http://www.a.com 和 https://www.a.com。

4.不同端口，如： www.a.com:80和 www.a.com:81 。

5.IP和域名属于跨域，如：123.125.106.16 和 t.suchso.com。

标签：

给我留言