ajax调用webservice 跨域问题

用js或者jquery跨域调用接口时

对方的接口需要做jsonp处理,你的ajax jsonp调用才可以

egg 接口中已经做了jsonp处理,所以可以跨域调用

//$.ajax({
// url: "http://api.k780.com:88/?app=weather.today&weaid=1&appkey=10003&sign=b59bc3ef6191eb9f747dd4e83c99f2a4&format=json&jsoncallback=?",
// dataType: "jsonp",
// type: "Post",
// jsonpCallback: "jsonpCallback",
// success: function (data) {
// var $ul = $("<ul></ul>");
// $.each(data, function (i, v) {
// alert(i);
// //if (i=="success") {

// //} else {
// // $("#dvWeather").html("weaid:" + v.weaid + "<br/>" + "days:" + v.days + "<br/>" + "week:" + v.week + "<br/>" + "cityno:" + v.cityno + "<br/>" + "citynm:" + v.citynm + "<br/>" + "cityid:" + v.cityid + "<br/>" + "temperature:" + v.temperature + "<br/>" + "humidity:" + v.humidity + "<br/>" + "weather:" + "<br/>" + "weather_icon:" + "<img src='" + v.weather_icon + "'></img>" + "<br/>" + "weather_icon1:" + "<img src='" + v.weather_icon1 + "'></img><br/>" + "wind:" + v.wind + "<br/>" + "winp:" + v.winp + "<br/>" + "temp_high:" + v.temp_high + "<br/>temp_low:" + v.temp_low + "<br/>humi_high:" + v.humi_high + "<br/>humi_low:" + v.humi_low + "<br/>weatid:" + v.weatid + "<br/>weatid1" + v.weatid1 + "<br/>windid:" + v.windid + "<br/>winpid:" + v.winpid);
// //}

// });
// },
// error: function (responseText, textStatus, XMLHttpRequest) {
// alert(textStatus);
// }
//});
});

跨域调用webservice的例子

//$.ajax({
// url: "http://localhost:9836/Serviceajax.svc/aaa?jsoncallback=?",
// type: "get",
// dataType: "jsonp",
// success: function (data) {
// alert(data);
// }
//});

ajax调用webservice 跨域问题

配置文件中

ajax调用webservice 跨域问题

ajax调用webservice 跨域问题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$.ajax({
 
        type: "POST",
        url: "http://localhost:9767/WebService1.asmx/HelloWorld?jsoncallback=?",
 
        data: "{}",
        dataType: "jsonp",
        success: function (data) {
             
            alert(data.result);
        }
 
 
 
    });

webservice 的代码

1
2
3
4
5
6
7
8
public void HelloWorld()
      {
 
          string callbackMethodName = HttpContext.Current.Request.Params["jsoncallback"] ?? "";
          HttpContext.Current.Response.Write(callbackMethodName + "({result:'Hello World'})");
          HttpContext.Current.Response.End();
         
      }

 这样会得到

ajax调用webservice 跨域问题

OK,JSONP的实现方式和相关验证基本上就爱完成了,现在也知道了JSONP的实现原理和实现方式,但是上面这种实现方式有点麻烦,既要自己添加script标签,同时还要自己定义一个回调函数,感觉略显麻烦,其实jQuery中已经直接提供类似的JSONP请求方式,我们只需要按照其定义好调用方式即可进行Http的跨域请求。现在我将remoteBtnClick()实现方式修改为如下,远程服务端代码不修改:

  1. //请求
  2. function remoteBtnClick() {
  3. $.ajax({
  4. url: 'http://localhost:8085/Remote/JSONPServlet',
  5. dataType: "jsonp",
  6. jsonp: "callback",
  7. jsonpCallback: "callbackHandler",
  8. success: function (data) {
  9. console.log(data);
  10. console.log("success");
  11. }
  12. });
  13. }
  14. //客户端回调
  15. function callbackHandler(json) {
  16. console.log(json);
  17. console.log("callbackHandler");
  18. }

请求结果如下:

ajax调用webservice 跨域问题

可以看到,现在直接通过ajax请求远程站点服务也成功实现了跨域请求,这个是jQuery自己已经帮我们封装好的功能。对于ajax请求中的几个参数我简单说描述下作用:
1.
dataType:’jsonp’,这个是代表当前Http请求为jsonp的请求方式;
2.
jsonp:’callback’,这个代表的是远程服务端接收客户端回调函数名的参数名,即:String
callback =
request.getParameter("callback")
 这个参数,ajax请求中jsonp参数的默认值就是callback,这个也可以自己随便更换;
3.
jsonpCallback:’callbackHandler’,这个代表远程服务调用结束后的本地回调函数名,比如上面的代码中的那个客户端回调函数名,这个jsonpCallback的参数值也是可以自己随便定义的,也可以不给这个jsonpCallback参数,其实jQuery会自动为我们生成一个函数和函数名,从上面的结果图中我们可以看到,远程服务调用成功后,既执行了SUCCESS这个回调函数,也执行我们自己定义的callbackHandler这个回调函数,所以我们完全可以使用jQuery给我们生成的回调函数,在调用结束后在SUCCESS回调中做相应的处理即可,如下是不加该参数的调用方式:

  1. $.ajax({
  2. url: 'http://localhost:8085/Remote/JSONPServlet',
  3. dataType: "jsonp",
  4. jsonp: "callback",
  5. success: function (data) {
  6. console.log(data);
  7. }
  8. });
ajax调用webservice 跨域问题

上面结果图中的圈中部分就是jQuery为我们自动生成的回调函数名。

OK,JSONP的实现方式及实现原理基本上介绍演示完了,至于jQuery中对于JSONP的实现封装方式等我有时间研究下了再继续吧~~~~~~~~~~

//ajax封装
var majax = {
//跨域ajax请求,返回结果格式:json
//url:请求地址
//type:请求方式POST,GET
//dataMap:请求参数 GET时可为null
//cache:cache参数
//async:async参数
//fn:请求成功处理函数
cross: function (url, type, dataMap, cache, async, fn) {
$.ajax({
type: type,
datatype: 'jsonp',
data: dataMap,
jsonp: "callbackparam",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(默认为:callback)
jsonpCallback: "success_jsonpCallback",//自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名
cache: cache,
async: async,
url: url,
success: fn
});
},
//非跨域ajax请求,返回结果格式:json
//url:请求地址
//type:请求方式POST,GET
//dataMap:请求参数 GET时可为null
//cache:cache参数
//async:async参数
//fn:请求成功处理函数
mormal: function (url, type, dataMap, cache, async, fn) {
$.ajax({
type: type,
datatype: 'json',
data: dataMap,
cache: cache,
async: async,
url: url,
success: fn
});
}
}

上一篇:发布windows phone应用经历实谈


下一篇:Sliverlight调用WebService跨域问题解决