Jsonp原理 百度搜尋框

2021-09-13 11:44:11 字數 510 閱讀 8777

由於瀏覽器同源策略的限制,不同源的客戶端指令碼在沒明確授權的情況下,不能讀寫對方的資源。

但是在實際專案中經常需要跨域進行訪問,jsonp就是一種很好的解決跨域問題的方法。

1.web頁面上用script標籤引入js檔案時則不受是否跨域的影響(不僅如此,我們還發現凡是擁有「src」這個屬性的標籤都擁有跨域的能力,比如script、img、iframe)

2.於是我們把資料放到伺服器上,並且資料為json格式(因為js可以很輕鬆地處理json資料)

3.因為我們無法監控通過script的src屬性是否把資料獲取完成,所以我們需要進行乙個處理。

4.實現定義好處理跨域獲取資料的函式,如function dojson(data){}

5.用src獲取資料的時候新增乙個引數cb=『dojson』(伺服器會根據引數cb的值返回對應的內容)此內容為以cb對應的值dojson為函式真實要傳遞的資料為函式的引數的一串字元如dojson(『資料』)。

仿百度搜尋框

1.設定和搜尋框兩個div fieldset,input,button,img ul,ol img box textsearch buttonsearch buttonsearch hover pop pop ul li pop ul li hover 3.js實現搜尋自動補充 獲取物件 var b...

百度搜尋框demo

如下 content type content text html charset utf 8 title q ul ul li ul li hover style 2.步驟二 定義demo函式 分析介面 資料 function demo data 迴圈的li寫入ul ul.innerhtml ht...

React 實現 百度搜尋框 簡易

import react from react import 引入元件 import searchbox from components searchbox render searchbox.js import react from react 引入css檔案 import searchbox.cs...