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);
// }
//});

 

配置文件中

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();                 }

　这样会得到

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请求远程站点服务也成功实现了跨域请求，这个是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. });

上面结果图中的圈中部分就是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
});
}
}