詳細解密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)視器
以上所述就是本文的全部內(nèi)容了,希望大家能夠喜歡。
- 實例講解使用原生JavaScript處理AJAX請求的方法
- 原生js jquery ajax請求以及jsonp的調(diào)用方法
- 詳解JavaScript原生封裝ajax請求和Jquery中的ajax請求
- 原生javascript的ajax請求及后臺PHP響應(yīng)操作示例
- Javascript原生ajax請求代碼實例
- 輕松搞定jQuery+JSONP跨域請求的解決方案
- JavaScript用JSONP跨域請求數(shù)據(jù)實例詳解
- Ajax jsonp跨域請求實現(xiàn)方法
- JSONP跨域請求實例詳解
- JSONP跨域請求
- jsonp跨域請求實現(xiàn)示例
- 原生js實現(xiàn)ajax請求和JSONP跨域請求操作示例
相關(guān)文章
JS中利用swiper實現(xiàn)3d翻轉(zhuǎn)幻燈片實例代碼
大家都知道Swiper(Swiper master)是目前應(yīng)用較廣泛的移動端網(wǎng)頁觸摸內(nèi)容滑動js插件。下面這篇文章主要給大家介紹了在JS中利用swiper實現(xiàn)3d翻轉(zhuǎn)幻燈片的相關(guān)資料,文中給出了完整的示例代碼供大家參考學(xué)習(xí),需要的朋友可以參考借鑒,下面來一起看看吧。2017-08-08JavaScript動畫實例之粒子文本的實現(xiàn)方法詳解
這篇文章主要介紹了JavaScript動畫實例之粒子文本的實現(xiàn)方法詳解,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07BootStrap Datetimepicker 漢化的實現(xiàn)代碼
這篇文章主要介紹了 BootStrap Datetimepicker 漢化的實現(xiàn)代碼,需要的朋友可以參考下2017-02-02