詳細(xì)解密jsonp跨域請求

更新時間：2015年04月15日 09:52:10 投稿：hebedich

當(dāng)進(jìn)行一些比較深入的前端編程的時候，不可避免地需要進(jìn)行跨域操作，JSONP跨域GET請求是一個常用的解決方案，下面我們來看一下JSONP跨域是如何實現(xiàn)的，并且探討下JSONP跨域的原理。

1.什么是跨域請求：

服務(wù)器A上的一個頁面，要請求服務(wù)器B上的一個處理程序，這就叫做跨域請求

本次的測試頁面為：

處理程序kimhandler.ashx，如下：

%@ WebHandler Language="C#" Class="KimHandler" %>

using System;
using System.Web;

public class KimHandler : IHttpHandler {
  
  public void ProcessRequest (HttpContext context)
  {
    string msg = "{\"name\":\"kim\",\"gender\":\"男\(zhòng)",\"age\":24}";
    context.Response.Write(msg);
  }
 
  public bool IsReusable {
    get {
      return false;
    }
  }
}

另一張?zhí)幚沓绦騢andler.ashx如下：

<%@ WebHandler Language="C#" Class="Handler" %>

using System;
using System.Web;

public class Handler : IHttpHandler {
  
  public void ProcessRequest (HttpContext context)
  {
    string callbackName = context.Request.Params["callbackFun"];
    string msg = callbackName+ "({\"name\":\"kim\",\"age\":\"18\"});";
    context.Response.Write(msg);
  }
 
  public bool IsReusable {
    get {
      return false;
    }
  }

}

2.Ajax無法實現(xiàn)跨域請求

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title></title>
  <script>
    var requestUrl = "http://qxw1192430265.my3w.com/kimhandler.ashx";
    window.onload = function () {
      document.getElementById("btnAjax").onclick = function() {
        var xhr = new XMLHttpRequest();
        xhr.open("get", requestUrl, true);
        xhr.setRequestHeader("If-Modified-Since", 0);
        xhr.onreadystatechange = function () {
          if (xhr.readyState == 4 && xhr.status == 200) {
            var res = xhr.responseText;
            alert(res);
          }
        }
        xhr.send(null);
      }
    }
  </script>
</head>
<body>
  <input type="button" id="btnAjax" value="點擊" />
</body>
</html>

查看監(jiān)視器，發(fā)現(xiàn)沒有返回任何請求報文體

3.使用script標(biāo)簽，可以實現(xiàn)跨域請求

測試代碼如下：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title></title>
  <script src="http://qxw1192430265.my3w.com/kimhandler.ashx"></script>
</head>
<body>

</body>
</html>

查看監(jiān)視器，可以看到，有返回請求報文體

在用json格式看下

4.使用js方式，在瀏覽器端，讀取響應(yīng)是數(shù)據(jù)

測試代碼如下，注意換了一個處理程序

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title></title>
  <script>
    function getData(data) {
      for (var key in data) {
        alert(data[key]);
      }
    }
  </script>
  <script src="http://qxw1192430265.my3w.com/handler.ashx?callbackFun=getData"></script>
 </head>
<body>
  
</body>
</html>

通過后臺代碼，可知

然后在監(jiān)視器上看看

發(fā)現(xiàn)在瀏覽器端，彈出了kim還有18

5.使用Jq來實現(xiàn)跨域請求（內(nèi)部原理就是為我們創(chuàng)建了一個script標(biāo)簽）

代碼如下

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title></title>
  <script src="jquery-1.9.0.js"></script>
  <script>
    var requestUrl = "http://qxw1192430265.my3w.com/handler.ashx";
    window.onload = function () {
      document.getElementById("btnJq").onclick = function() {
        $.ajax(requestUrl, {
          type: "get", //請求方式
          dataType: "jsonp", //數(shù)據(jù)發(fā)送類型
          jsonp: "callbackFun", //服務(wù)器端接收的參數(shù)
          jsonpCallback: "fun", //js處理方法
          success: function () {
            alert("成功");
          }
        });
      }
    }

    function fun(data) {
      for (var key in data) {
        alert(data[key]);
      }
    }
  </script>
</head>
<body>
  <input type="button" id="btnJq" value="Jq按鈕" />
</body>
</html>

點擊按鈕后，可以看到效果，再看下監(jiān)視器