AJAX跨域调用WebService解决方案

//描述：AJAX调用WebService的解决方案

//作者：Faneok

//日期：2012.06.14

//调用示例：

// <script language="javascript" type="text/javascript">

// function jsonpCallback(result) {//这里是回调方法

// alert(result.msg);

// $("ws1").remove();//注意回调后如果有可能请执行删除操作

// }

// $(function () {

// $.fn.getWS({ id: 'ws1', url: 'http://host:prot/ser.asmx/method', Callback: "jsonpCallback" });

// });

// </script>

//服务器端需要执行的操作示例:

//[WebMethod]

//public string method1()

//{

// string str = "{\"msg\":\"这里是主要内容\"}";

// if (HttpContext.Current.Request["jsonp"] != null)//这里是执行是否需要返回JSONP字符串的唯一标识

// {

// HttpRequest Request = HttpContext.Current.Request;

// HttpResponse Response = HttpContext.Current.Response;

// string callback = Request["jsonp"];

// Response.Write(callback + "(" + str + ")");

// Response.End();//结束后续的操作，直接返回所需要的字符串

// }

// return str;

//}

(function ($) {

//向目标DOM设置值，常规表单标签则直接设置Value，Item标签设置val属性

$.fn.getWS = function (options) {

var defaults = {

id: "",

url: "",

Callback: ""

}

var options = $.extend(defaults, options);

var oHead = document.getElementsByTagName('HEAD').item(0);

var oScript = document.createElement("script");

oScript.type = "text/javascript";

oScript.setAttribute("id", options.id);

oScript.src = options.url + "?jsonp=" + options.Callback;

oHead.appendChild(oScript);

}

})(jQuery);

一个简单的调用方法,Jquery原始方法：

$.ajax({

type: "get",

url: "http://localhost:17180/Service1.asmx/method1",

dataType: "jsonp",

jsonp: "jsonp", //传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(默认为:callback)

jsonpCallback: "jsonpCallback", //自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名

contentType: "application/json; charset=utf-8",

success: function (json) {

alert(json.msg);

},

error: function () {

debugger;

alert('fail');

}

});