使用jsonp跨域请求

一、异步对象，不能实现跨域请求

在站点A中访问站点B的数据：

站点A代码：

     window.onload = function () {
             document.getElementById("btnAjax").onclick = doAjax;
         }
         function doAjax() {
             var xhr = new XMLHttpRequest();
             xhr.open("get", "http://www.ruanmou.net/C01Target.ashx", true);
             xhr.setRequestHeader("If-Modified-Since", "");
             xhr.onreadystatechange = function () {

                 if (xhr.readyState ==  && xhr.status == ) {
                     var res = xhr.responseText;
                     alert(res);
                 }
             };
             xhr.send(null);
         }

<input type="button" value="使用异步请求跨域请求是错的" id="btnAjax" />

站点B代码：

C01Target.ashx中：

 public void ProcessRequest(HttpContext context)
         {
             context.Response.ContentType = "text/plain";
             context.Response.Write(“hello world”);
         }

二、使用script标签实现跨域请求

站点A代码：

 <script type="text/javascript" src="http://www.ruanmou.net/C01Target.ashx?callback=showData"></script>

  function showData(data) {
             for (var key in data) {
                 alert(data[key]);
             }
         }

站点B代码：

C01Target.ashx中：

 public void ProcessRequest(HttpContext context)
         {
             string funName = context.Request.Params["callback"];
             context.Response.ContentType = "text/plain";
             string strDate = funName+"({\"name\":\"Xuj\",\"age\":\"18\"})";//返回数据为json格式
             context.Response.Write(strDate);
         }

 三、jquery使用jsonp实现跨域请求

站点A代码：

 window.onload = function () {
             document.getElementById("btnAjax").onclick = doAjax;
         }
         function doJq() {
             $.ajax("http://www.ruanmou.net/C01Target.ashx"), {
                 type: "get",//内部就是创建一个script标签
                 jsonp:"callback",//传的参数名，和服务器端一致
                 dataType: "jsonp",//指定回调的函数名
                 jsonCallback: "showData",
                 success: function () {
                     alert("");
                 }
             });
         }

 function showData(data) {
             for (var key in data) {
                 alert(data[key]);
             }
         }