跨域與JSONP · Javascript核心基礎

[toc] ## previously 在ajax請求中如果協議和端口號和當前的一樣，那么是可以省略的 ``` var xhr = new XMLHttpRequest; xhr.open("get","data.txt",true); //注意不要加'/'，加了'/'是從根目錄開始找 xhr.onreadystatechange = function(){ if(xhr.readyState ===4 && xhr.status ==200){ console.log(xhr.responseText); } }; xhr.send(null); ``` ## 什么是JSONP JSONP和AJAX相同，都是客戶端向服務器端發送請求，給服務器端傳遞內容或則從服務器端獲取內容的方式。 ### JSONP 和 AJAX 的區別 AJAX屬于同源策略 JSONP屬于非同源策略（跨域請求），實現跨域請求的方式有很多種，只不過JSONP是最常用的。 ### 區分同源和非同源 1）協議 2）域名或則IP 3）端口號以上三部分完全相同屬于同源策略，我們使用AJAX技術獲取數據；只要有一個不一樣，就屬于非同源，我們一般使用JSONP獲取數據 ### webstorm測試支持 WB（webstorm）在預覽頁面的時候會默認的創建一個本地虛擬的服務，端口號是63342 ## 原理 JSONP利用了script標簽不管是否是同源還是非同源在script的世界中，沒有同源跨域這一說，只要你給我src屬性中的地址就是一個合法的地址，script都可以把對應的內容請求回來 JSON就是利用了SCRIPT的這個原理 1)我們首先把需要請求數據的那個跨域的API數據接口的地址賦值給SCRIPT的SRC 2)把當前頁面中的某一個函數名當做參數值傳遞給跨域請求數據的服務器（URL問號傳參，一般是:?callback=fn） 3)服務器接收到你的請求后，需要進行特殊的處理，把你傳遞進來的函數名和它需要給你的數據拼接成一個字符串例如：我們傳遞進去的函數名是fn，它準備好的數據是`fn({"name":"ahhh"})`->`我傳遞的函數名（需要給我們的數據）` 4)最后服務器把準備的數據以HTTP協議的形式返回給我們客戶端，客戶端發現其實就是讓我們的fn執行，而且還給fn傳遞了一堆的數據，那些數據就是我們想要的 **So，如果對方服務器不支持的話，JSONP也無用** ``` <scirpt src="js/index.js"></script> //同源 <script src="http://ping.js.qq.com/ping.js"></script> ``` ``` <script> function(data){ console.log(data); } </script> <script src="http://xxx?callback=fn"></script> ``` ![](https://box.kancloud.cn/1c31ab7086c37fcf6b542e032e440f13_517x124.png) ![](https://box.kancloud.cn/c3424aa8a589a386f9a0dd0912d4c060_799x182.png) 返回的是`fn({...})`，也就是讓函數執行了 ![](https://box.kancloud.cn/1e21711d335c57858d1a4803b6edb682_643x222.png) ### 服務端配合 ![](https://box.kancloud.cn/a0fc88c4a3f213d63fa639549a2511cb_738x333.png) ## jQueryのJSONP ``` $.ajax({ url:"data.txt" ,type:"get" ,dataType:"json" ,data:null ,async:true ,cache:false ,timeout:1000 //->超時，走error，一般設定為3000ms ,success:function(data){ console.log(data) } ,error:function(){ } }) ``` jQuery會幫我把數據抽離出來 ``` $.ajax({ url:"" // ,type:"get" ,dataType:"jsonp" ,success:function(data){ console.log(data); } }) ``` ![](https://box.kancloud.cn/bc668f981fa47ce51e7c9d57fcdd274c_770x149.png) 會自動生成隨即，防止cache ![](https://box.kancloud.cn/7916ff57823f980ef88d2d9c184ca6fe_620x117.png) 另外JSONP都是GET&&異步請求的也可以定義傳遞給服務器的函數名和形參名 ``` $.ajax({ ... jsonpCallback:"fn" //把函數名變為fn，原本是jquery+隨即字符串 ,jsonp:"cb" //把傳遞函數名的那個形參callback變為cb }) ``` ![](https://box.kancloud.cn/8b3e9e97671bcd3df58f27aca9732073_764x147.png) ## 百度搜索案例 suggestion su?wd= ![](https://box.kancloud.cn/d2193bf6da31161679cdcb1cbf71484c_358x67.png) ![](https://box.kancloud.cn/e2e1b46636f74c52c1e057ef656e392f_738x214.png) 鏈接地址格式 s?word= ![](https://box.kancloud.cn/aed71defa7a00c12208a9afaa0287e9f_750x230.png) >**注意：** ajax封裝的jsonp方法，success中的data直接就是我們想要的數據而不是拼接后的整個函數。 blur會先click而觸發，這樣的話就獲取不到click到的那個li的內容，so應該用事件委托 ![](https://box.kancloud.cn/3ead29dd9f58d61ad8d161f3b8bd966f_621x194.png) ``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>百度模糊搜索-珠峰培訓</title> <style type="text/css"> * { margin: 0; padding: 0; font-family: "\5FAE\8F6F\96C5\9ED1", Helvetica, sans-serif; font-size: 14px; color: #424242; } ul, li { list-style: none; } input { display: block; outline: none; } html, body { width: 100%; height: 100%; } .search { margin: 20px auto; width: 300px; } .search input { padding: 0 5px; width: 288px; height: 35px; border: 1px solid green; } .searchList { display: none; width: 298px; border: 1px solid green; border-top: none; } .searchList li { padding-left: 5px; height: 35px; line-height: 35px; cursor: pointer; } .searchList li:hover { background: #eee; } </style> </head> <body> <div class="search"> <input type="text" id="searchInput"/> <ul class="searchList"> </ul> </div> <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script> <script type="text/javascript"> $(function () { var $searchInput = $("#searchInput"), $search = $(".search"), $searchList = $search.children(".searchList"); //->光標進入文本框(或者是用戶在輸入的過程中),通過判斷是否存在內容來控制列表區域的顯示隱藏 $searchInput.on("focus keyup", function () { var val = $(this).val().replace(/^ +| +$/g, ""); if (val.length > 0) { showList(); return; } $searchList.stop().slideUp(200); }); //->事件委托:點擊的時候,如果事件源是文本框我們什么操作都不做處理,如果事件源是LI,我們讓LI中的內容進入到文本框中,并且讓列表區隱藏,如果事件源是其它的操作我們都要隱藏 $("body").on("click", function (e) { var tar = e.target, $tar = $(tar); if (tar.id === "searchInput") { return; } if (tar.tagName.toUpperCase() === "LI" && $tar.parent().hasClass("searchList")) { $searchList.stop().slideUp(200); $searchInput.val($tar.html()); return; } $searchList.stop().slideUp(200); }); //->根據輸入內容的不一樣,我們的列表區域顯示不一樣的內容 function showList() { var val = $searchInput.val().replace(/^ +| +$/g, ""); //->如果文本框中不存在內容的話,我們不需要在獲取列表信息了 if (val.length === 0) { return; } //->通過JSONP跨域請求把我們輸入內容所匹配回來的數據獲取到 $.ajax({ url: "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=" + val, type: "get", dataType: "jsonp", jsonp: "cb", success: function (data) { var str = ''; if (data && data["s"]) { data = data["s"]; $.each(data, function (index, item) { if (index <= 3) { str += '<li>' + item + '</li>'; } }); } if (!str) {//->如果獲取的數據一個都沒有的話,我們直接的隱藏列表即可 $searchList.css("display", "none"); return; } $searchList.html(str).stop().slideDown(200); } }); } }); </script> </body> </html> ``` ## 其他跨域解決方案 ### Access-Control-Allow-Origin ![](https://box.kancloud.cn/ddda44d03d0d07be6c1f6aea97c436f3_964x409.png) `*`代表所有 ![](https://box.kancloud.cn/98fea737db383ce9399259523d554f63_789x167.png) ### 通過自身的后端代理這說明了是瀏覽器器自身限制了跨域的請求 ![](https://box.kancloud.cn/ce5bc30a5f398093d0bf9915d465681b_604x270.png) ![](https://box.kancloud.cn/85b55a20a2b0120eb319e0c628435a33_491x335.png) ## 還有那些標簽可以跨域 - link - img - script ## 關于script標簽不關心script中src的后綴名是什么，只要請求回來的東西能被js引擎解析即可(會被解析成js代碼) ``` <script src="./test.txt"></script> ``` 相當于 ![](https://box.kancloud.cn/5e3a7971fc8f267dcc26d97759424f2e_382x205.png) 如果返回的數據不符合js解析語法會報錯 ![](https://box.kancloud.cn/b5a28c6070cf5b5f113ab00b5b3b58d9_584x199.png)