詳細(xì)解密jsonp跨域請求
1.什么是跨域請求:
服務(wù)器A上的一個(gè)頁面,要請求服務(wù)器B上的一個(gè)處理程序,這就叫做跨域請求
本次的測試頁面為:
處理程序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無法實(shí)現(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="點(diǎn)擊" /> </body> </html>
查看監(jiān)視器,發(fā)現(xiàn)沒有返回任何請求報(bào)文體
3.使用script標(biāo)簽,可以實(shí)現(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)視器,可以看到,有返回請求報(bào)文體
在用json格式看下
4.使用js方式,在瀏覽器端,讀取響應(yīng)是數(shù)據(jù)
測試代碼如下,注意換了一個(gè)處理程序
<!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>
通過后臺(tái)代碼,可知
然后在監(jiān)視器上看看
發(fā)現(xiàn)在瀏覽器端,彈出了kim還有18
5.使用Jq來實(shí)現(xiàn)跨域請求(內(nèi)部原理就是為我們創(chuàng)建了一個(gè)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>
點(diǎn)擊按鈕后,可以看到效果,再看下監(jiān)視器
以上所述就是本文的全部內(nèi)容了,希望大家能夠喜歡。
- 實(shí)例講解使用原生JavaScript處理AJAX請求的方法
- 原生js jquery ajax請求以及jsonp的調(diào)用方法
- 詳解JavaScript原生封裝ajax請求和Jquery中的ajax請求
- 原生javascript的ajax請求及后臺(tái)PHP響應(yīng)操作示例
- Javascript原生ajax請求代碼實(shí)例
- 輕松搞定jQuery+JSONP跨域請求的解決方案
- JavaScript用JSONP跨域請求數(shù)據(jù)實(shí)例詳解
- Ajax jsonp跨域請求實(shí)現(xiàn)方法
- JSONP跨域請求實(shí)例詳解
- JSONP跨域請求
- jsonp跨域請求實(shí)現(xiàn)示例
- 原生js實(shí)現(xiàn)ajax請求和JSONP跨域請求操作示例
相關(guān)文章
JS中利用swiper實(shí)現(xiàn)3d翻轉(zhuǎn)幻燈片實(shí)例代碼
大家都知道Swiper(Swiper master)是目前應(yīng)用較廣泛的移動(dòng)端網(wǎng)頁觸摸內(nèi)容滑動(dòng)js插件。下面這篇文章主要給大家介紹了在JS中利用swiper實(shí)現(xiàn)3d翻轉(zhuǎn)幻燈片的相關(guān)資料,文中給出了完整的示例代碼供大家參考學(xué)習(xí),需要的朋友可以參考借鑒,下面來一起看看吧。2017-08-08JavaScript動(dòng)畫實(shí)例之粒子文本的實(shí)現(xiàn)方法詳解
這篇文章主要介紹了JavaScript動(dòng)畫實(shí)例之粒子文本的實(shí)現(xiàn)方法詳解,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07tkinter使用js的canvas實(shí)現(xiàn)漸變色
這篇文章主要為大家介紹了tkinter使用canvas實(shí)現(xiàn)漸變色,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助2021-12-12JavaScript 生成隨機(jī)數(shù)并自動(dòng)大小排序
JavaScript按規(guī)定生成隨機(jī)數(shù),并按指定順序自動(dòng)排序,本例中將生成1——100以內(nèi)的隨機(jī)數(shù),并按照由小到大的順序排列起來。2009-12-12BootStrap Datetimepicker 漢化的實(shí)現(xiàn)代碼
這篇文章主要介紹了 BootStrap Datetimepicker 漢化的實(shí)現(xiàn)代碼,需要的朋友可以參考下2017-02-02javascript中&&運(yùn)算符與||運(yùn)算符的使用方法實(shí)例
&&和||總是傻傻分不清,在這里詳細(xì)記錄一下吧,也給你們分享一下,所以這篇文章主要給大家介紹了關(guān)于javascript中&&運(yùn)算符與||運(yùn)算符的使用方法,需要的朋友可以參考下2021-11-11