ajax實現跨域請求程式碼例項簡單介紹

antzone發表於2017-04-08
跨域

其實ajax是不具有跨域功能，這裡說的ajax是jquery封裝後的ajax。

關於原生的ajax相關內容可以參閱ajax教程版本。

實現的原理也是依靠jsonp，關於它的實現原理可以參閱JSONP用法詳解一章節。

關於非跨域的使用可以參閱jquery使用ajax讀取後臺資料在表格中顯示一章節。

上一個例子如果使用本站的編輯器執行，當然非跨域使用，但是如果在本地測試，那麼就是跨域，肯定會首先。

截圖如下:

a:3:{s:3:\"pic\";s:43:\"portal/201704/08/113826dfxom09smfdxd5i0.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" gb2312">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
  $("#bt").click(function () {
    var str = "<table>";
    $.ajax({
      url: "http://softwhy.com/demo/ajax/net/jsonp.ashx",
      data: {},
      type: "get",
      async: true,
      dataType: "jsonp",
      jsonp: "jsoncallback",
      jsonpCallback: "success_jsonpCallback",
      success: function (json) {
        $.each(json, function (index, obj) {
          $.each(obj, function (y, data) {
            str = str + "<tr>";
            str = str + "<td>" + data["username"]
            + "</td><td>" + data["address"]
            + "</td><td>" + data["score"] + "</td>";
            str = str + "</tr>";
          })
        })
        str = str + "</tr></table>";
        $("#antzone").html(str);
      }
    });
  })
})
</script>
</head>
<body>
<div id="antzone"></div>
<input type="button" id="bt" value="檢視效果"/>
</body>
</html>

特別說明:在www.softwhy.com和softwhy.com之間相互訪問也屬於跨域，所以上面的程式碼也屬於跨域操作。

下面對上面的程式碼的主要部分進行以下說明:

（1）.url: "http://softwhy.com/demo/ajax/net/jsonp.ashx"，請求的地址。

（2）.data: {}，要發動到伺服器的資料。

（3）.type: "get"，規定請求方式。

（4）.async: true，非同步請求。

（5）.dataType: "jsonp"，規定是jsonp跨域請求。

（6）.jsonp: "jsoncallback",會作為url的一個引數進行傳遞，softwhy.com?jsoncallback=xxx。

（7）.jsonpCallback: "success_jsonpCallback"，規定jsoncallback的引數值，softwhy.com?jsoncallback=success_jsonpCallback。

（8）.success: function (json)，jons是json格式物件。

上面的程式碼實現了跨域，大家好像沒有看到jsonp和jsonpCallback的作用，程式碼修改如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" gb2312">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
function success_jsonpCallback(obj) {
  console.log(obj);
}
$(document).ready(function () {
  $("#bt").click(function () {
    var str = "<table>";
    $.ajax({
      url: "http://softwhy.com/demo/ajax/net/jsonp.ashx",
      data: {},
      type: "get",
      async: true,
      dataType: "jsonp",
      jsonp: "jsoncallback",
      jsonpCallback: "success_jsonpCallback",
      success: function (json) {
        $.each(json, function (index, obj) {
          $.each(obj, function (y, data) {
            str = str + "<tr>";
            str = str + "<td>" + data["username"]
            + "</td><td>" + data["address"]
            + "</td><td>" + data["score"] + "</td>";
            str = str + "</tr>";
          })
        })
        str = str + "</tr></table>";
        $("#antzone").html(str);
      }
    });
  })
})
</script>
</head>
<body>
<div id="antzone"></div>
<input type="button" id="bt" value="檢視效果"/>
</body>
</html>

上面的程式碼我們只是在javascript程式碼的頂部新增如下一段:

[JavaScript] 純文字檢視 複製程式碼
function success_jsonpCallback(obj) {
  console.log(obj);
}

控制檯資料結果是:

a:3:{s:3:\"pic\";s:43:\"portal/201704/08/114045ajatt1ailraaswfa.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

這說明softwhy.com?jsoncallback=success_jsonpCallback傳遞到後臺以後，經過包裝又傳送到客戶端。

後臺程式碼確實如此:

[C#] 純文字檢視 複製程式碼
public void ProcessRequest(HttpContext context)
{
    context.Response.ContentType = "text/plain";
    string callback = context.Request.QueryString["jsoncallback"];
    DataSet ds = done();
    string jsonStr = GetJsonByDataset(ds);
    context.Response.Write(callback+"("+jsonStr+")");
}

特別說明:還是要首先看懂jsonp的實現原理，才能夠真正明白上面這一切。

相關文章