首页 > 代码库 > 简述WebService的使用（二）
简述WebService的使用（二）
上集回顾
上一篇我简单的介绍了一下整个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，顿时神清气爽啊~~
简述WebService的使用（二）