上集回顾
上一篇我简单的介绍了一下整个WebService建立和后端访问的过程,如果感兴趣可以看一看:简述WebService的使用(一)
//如有不懂请留言,觉得有用请点赞
内容提要
这一篇主要介绍一下WebService的ajax前端访问,侧重点是“跨域访问”。有兴趣的继续看过来···
至于跨域访问的概念,我就说一句,就是“网站A想访问域名不同的网站B”(具体概念可以上网查),这在网络安全上是不被赞成的,大部分大型网站也关闭这个访问,然而需求依然在。
网上有很多解决方案,比如Ifame,代理,jsonp等等。
建议:如果没有必要就不要用。
重点:本文主要介绍一下jsonp的用法,希望可以帮助到各位小主。
具体内容
一、配置文件中添加适当的配置:
1 <system.web> 2 <compilation debug="true" targetFramework="4.5" /> 3 <httpRuntime targetFramework="4.5" /> 4 <customErrors mode="Off"></customErrors> 5 <webServices> 6 <protocols> 7 <add name="HttpGet"/> 8 <add name="HttpPost"/> 9 </protocols> 10 </webServices> 11 </system.web>
1、若要使他人能够在远程计算机上查看此特定错误信息的详细信息,请在位于当前 Web 应用程序根目录下的“web.config”配置文件中创建一个 <customErrors> 标记。然后应将此 <customErrors> 标记的“mode”属性设置为“Off”。 <!-- Web.Config 配置文件 --> <configuration> <system.web> <customErrors mode="Off"/> </system.web> </configuration>
注释: 通过修改应用程序的 <customErrors> 配置标记的“defaultRedirect”属性,使之指向自定义错误页的 URL,可以用自定义错误页替换所看到的当前错误页。
2、所有四个可能的协议都使用 HTTP/1.1(超文本传输协议)作为其传输协议。从字面上可以看出,HttpGet 和 HttpPost 协议值分别使用 HTTP 的 GET 和 POST 方法。HttpSoap 值也使用 POST 方法,但不使用 HTML 表单使用的传统 HTTP POST 语义。如对此想要深入理解,请看MSDN介绍:
http://msdn.microsoft.com/zh-cn/library/4yx7be39%28v=vs.100%29.aspx
二、后端代码(WebService)
要想把后端代码写的完整,还不是一下子就能理解的,这需要和前端代码配合着看,所以这里需要我们知道的是,这种方式(jsonp)只适用于同时掌握WebService的写权利的亲们~~~
上一篇里面有全部代码,这里主要是贴出主要代码:
1 [WebMethod] 2 public void HelloWorld1() 3 { 4 HttpRequest request = HttpContext.Current.Request; 5 HttpResponse response = HttpContext.Current.Response; 6 string jsoncallback = request.QueryString["jsoncallback"]; 7 //response.ContentEncoding = System.Text.Encoding.UTF8; 8 //response.ContentType = "application/json"; 9 Context.Response.Write(jsoncallback + "({ \"state\": { \"return\": \"true\", \"info\": \"成功\", \"code\": \"HelloWorld\" } })"); 10 response.End(); 11 }
里面的具体内容,大家应该可以大部分理解,至于jsoncallback是什么东西,等我慢慢道来~~~
可以看到,这里面是将要输出的内容拼成了jsoncallback(JSON内容)的格式,原因就是jsonp这个非官方格式所要求的解析格式,这样在前端才能以一种回调函数的方式获取到内容。
可能各位看的一头雾水,下面来看前端代码。
三、前端代码(JQuery)
1 <script> 2 $(document).ready(function () { 3 $.ajax({ 4 type: "GET", //访问WebService使用请求 5 contentType: "application/json", //WebService 会返回Json类型 6 url: "http://WebService的地址/WebService1.asmx/HelloWorld1?jsoncallback=?", //调用WebService的地址和方法名称组合 ---- WsURL/方法名 7 //data: { str: ‘hello‘ }, //这里是要传递的参数,格式为 data: "{paraName:paraValue}" 8 dataType: ‘jsonp‘, 9 success: function (result) { //回调函数,result,返回值 10 result = result.state; 11 alert("return:" + result.return + " info:" + result.info + " code:" + result.code); 12 }, 13 error: function (jqXHR, textStatus, errorThrown) { 14 alert("jqXHR:" + jqXHR); 15 } 16 }); 17 }) 18 </script>
看,这里~~~
这里~~~
这就是主要变化,这种方法利用jsonp格式将生成的一个名字类似于jQuery1102006871441782948595_1420771230089的jsoncallback作为参数传到后台,后台拼成相应格式的函数形式返回,前台拿到这个函数后即可以函数调用的方式获取其中的json数据,包装了一下而已,这种暗度陈仓的方式~~~也是醉了。
可能有些人就会问,那为什么这样就能访问了呢?这就是问题所在。
jsonp的最基本的原理是:动态添加一个<script>标签,而script标签的src属性是没有跨域的限制的。这样说来,这种跨域方式其实与ajax XmlHttpRequest协议无关了. 这样其实"jQuery AJAX跨域问题"就成了个伪命题了,jquery $.ajax方法名有误导人之嫌. 如果设为dataType: ‘jsonp‘, 这个$.ajax方法就和ajax XmlHttpRequest没什么关系了,取而代之的则是JSONP协议. JSONP是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问 JSONP即JSON with Padding。由于同源策略的限制,XmlHttpRequest只允许请求当前源(域名、协议、端口)的资源。如果要进行跨域请求, 我们可以通过使用html的script标记来进行跨域请求,并在响应中返回要执行的script代码,其中可以直接使用JSON传递javascript对象。 这种跨域的通讯方式称为JSONP。(转载)
这段话应该将这个原理讲述的很清楚了吧,各位看官,通过以上的方式就能简单的实现跨域访问的问题了,不过。。。jsoncallback这个取名可能很重要,如果不写的话,会有一个默认的名字就是callback传过去。
参数:
响应:
输出:
这时前台界面上多了一个东西,想必大家应该也知道了吧。
它以脚本的形式出现在这里了~~~
遇到的问题
由于笔者也是刚接触这一块,所以还是历经了一些困难。
因为最开始不明白这中的道理,所以走了不少弯路,包括配置文件的内容,和前后端的不断调试,为避免各位走弯路,浪费时间,特写了这篇文章(此处该有掌声~~~)
问题:
1、前端访问不到的数据
可能是因为XML配置的问题,就是上文中提到的两处配置,其实出现错误的时候都有相应的提示。
2、前端能访问到数据,但是有JS错误,类似于jQuery1102020437700958943394_1420766736229 was not called,错误名称是parsererror
可能的原因就是jsonp的格式没有拼对,或者后台没有拿到那个jsoncallback字符串,这样前端无法按照jsonp的格式去回调函数,这样就会出现这个错误
至此结束,欢迎交流
OK,顿时神清气爽啊~~