本文主要為大家分享一篇關於ajax和jsonp的使用方法,具有很好的參考價值,希望對大家有幫助。一起跟著小編過來看看吧。
一、ajax
#定義:一種發送http請求與後台進行非同步通訊的技術。
原理:實例化xmlhttp對象,使用此物件與後台通訊。
ajax的同源策略:
ajax請求的頁面或資源只能是同一個網域下面的資源,不能是其他網域的資源,這是在設計ajax時基於安全考慮。
ajax的方法:
1. $.ajax({}):
常用參數:
url:請求網路位址
-
type:請求方式,預設為'GET',常用'POST'
dataType:設定傳回的資料格式,一般使用json,也可以是html和jsonp;
data:設定傳送給伺服器的資料
.done():設定請求成功後的回呼函數
#.fail():設定請求失敗後的回呼函數
async:設定是否非同步,預設值是'true',表示非同步
程式碼運用:
##
$(function () { $("input").click(function () { $.ajax({ url: "./data.json", type: "get", dataType: "json", }); .done(function(data) {//请求成功的回调函数 $("input").val(dat.name); }) .fail(function() { alert('服务器超时,请重试!'); }); }); }) ...... <body> <p> <input type="button" value="xinzhi"> </p></body>說明:data表示後台傳回的資料;ajax使用需要依賴伺服器環境。 2. $.get():
- $.get() 方法使用GET請求從伺服器載入資料;也是一種無刷新的請求資料的ajax方法。
- 參數:
- url:存取的網址,需要遵循同源策略;
- #data:傳送到伺服器的資料。
- function(data,status){}:請求成功運行的函數
- dataType:請求回應的資料類型。
//参考代码:$(function () { $("input").click(function () { $.get( "./data.json", function (data,status) { console.log(data.name); }, "json" ); }); }) ...... <body> <p> <input type="button" value="xinzhi"> </p></body>
- $.get()方法的參數和$.ajax()不一樣,網址url為必須的參數,其他三個可選。
- data為傳回的數據,status表示請求的狀態,一般有""success","error","timeout"等幾種。
- 如果datatype類型為jsonp,也可以跨域請求資料。 $.post()
- $.get() 方法使用POST請求從伺服器載入資料;
#data:請求的參數,可選;
function(response,status,xhr):請求成功的回調函數。 ##
$(function () { $("input").click(function () { $(".box").load( "./data.json", function (response,status) { console.log(data.name); } ); }); }) ...... <body> <p> <input type="button" value="xinzhi"> <p class="box"></p> </p> </body>
- 傳回的資料會放置在p中;
- response為傳回的數據,status為請求的狀態;
- 無請求失敗的回呼函數。 ##方法使用AJAX 的HTTP GET 請求取得JSON 資料。 #url: 請求網址,必須的參數;
##data: 傳送給伺服器的資料;
function(data,status,xhr) :請求成功的回呼函數
$(function () { $("input").click(function () { $.getJSON( "./data.json", function(data,status) { console.log(data.name); }, ); }); }) ...... <body> <p> <input type="button" value="xinzhi"> </p></body>
無回傳失敗的回呼函數;
回呼函數時命名函數,不是匿名函數;
5.getScript()
方法使用AJAX 的HTTP GET 請求取得並執行js程式碼。請求網址,必須的參數;
function(data,status):請求成功的回呼函數
- ##
$(function () { $("input").click(function () { $.getScript( "./data.js", function(data,status) { console.log(data); }, ); }); }) ...... <body> <p> <input type="button" value="xinzhi"> </p></body>
該方法可以用來動態載入js程式碼。
二、jsonp
定義:一種可以實現跨域發送http請求的資料通訊格式,可以嵌在ajax中使用。
原理:利用script標籤可以跨網域連結資源的特性。
-
用法一:函數傳參
<script type="text/javascript"> function aa(data){ console.log(data.name); }</script><script type="text/javascript" src="....../data.js"></script>
說明:在外部定義一個data.js文件,這個文件的路徑可以與目前頁面不在同一個網域下面。 -
data.js的內容:
aa({ "data":{ "name":"xiaohong", "age":"18" } })
将数据以页面定义的函数的参数的形式传递进去,从而获取数据。
本质上可以将数据拆分,使得数据不用强制保存在同一个域名下。
用法二:利用ajax
$.ajax({ url:'...../data.js',//可以不是本地域名 type:'get', dataType:'jsonp', //jsonp格式访问 jsonpCallback:'aa' //获取数据的函数}) .done(function(data){ console.log(data.name); }) .fail(function() { alert('服务器超时,请重试!'); });
data.js的内容和上面一样。
使用ajax的方法本质上也是script标签可以跨域链接资源,不过jquery为其封装了相同的方法,看起来一样。
以上代码的执行过程为:ajax通过jsonp技术跨域访问data.js文件,通过找到aa()方法将其参数传递给.done方法的data参数执行.done方法。
目前这种方式仍然有其局限性,就是必须知道data.js文件的名字和定义的方法aa,如果在仅仅知道域名的情况下,需要另外的方法.
用法三
var $input = $("input"); $input.keyup(function () { $.ajax({ url:'https://sug.so.360.cn/suggest?',//请求360搜索的联想数据 type:'get', dataType:'jsonp', //jsonp格式访问 data: {word: $input.val()}, }) .done(function(data){ console.log(data); }) .fail(function() { alert('服务器超时,请重试!'); }); }) .... <body> <input type="text"> </body>
通过浏览器查看每次输入关键字服务器发送回的数据包,找到js文件中header的地址以及相关的提交数据,发现key为word关键字,因此可以向服务器发送data数据。
服务器返回的数据会自动传给回调的匿名函数的参数data.
以上是關於ajax和jsonp的使用方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

JavaScript在現實世界中的應用包括前端和後端開發。 1)通過構建TODO列表應用展示前端應用,涉及DOM操作和事件處理。 2)通過Node.js和Express構建RESTfulAPI展示後端應用。

JavaScript在Web開發中的主要用途包括客戶端交互、表單驗證和異步通信。 1)通過DOM操作實現動態內容更新和用戶交互;2)在用戶提交數據前進行客戶端驗證,提高用戶體驗;3)通過AJAX技術實現與服務器的無刷新通信。

理解JavaScript引擎內部工作原理對開發者重要,因為它能幫助編寫更高效的代碼並理解性能瓶頸和優化策略。 1)引擎的工作流程包括解析、編譯和執行三個階段;2)執行過程中,引擎會進行動態優化,如內聯緩存和隱藏類;3)最佳實踐包括避免全局變量、優化循環、使用const和let,以及避免過度使用閉包。

Python更適合初學者,學習曲線平緩,語法簡潔;JavaScript適合前端開發,學習曲線較陡,語法靈活。 1.Python語法直觀,適用於數據科學和後端開發。 2.JavaScript靈活,廣泛用於前端和服務器端編程。

Python和JavaScript在社區、庫和資源方面的對比各有優劣。 1)Python社區友好,適合初學者,但前端開發資源不如JavaScript豐富。 2)Python在數據科學和機器學習庫方面強大,JavaScript則在前端開發庫和框架上更勝一籌。 3)兩者的學習資源都豐富,但Python適合從官方文檔開始,JavaScript則以MDNWebDocs為佳。選擇應基於項目需求和個人興趣。

從C/C 轉向JavaScript需要適應動態類型、垃圾回收和異步編程等特點。 1)C/C 是靜態類型語言,需手動管理內存,而JavaScript是動態類型,垃圾回收自動處理。 2)C/C 需編譯成機器碼,JavaScript則為解釋型語言。 3)JavaScript引入閉包、原型鍊和Promise等概念,增強了靈活性和異步編程能力。

不同JavaScript引擎在解析和執行JavaScript代碼時,效果會有所不同,因為每個引擎的實現原理和優化策略各有差異。 1.詞法分析:將源碼轉換為詞法單元。 2.語法分析:生成抽象語法樹。 3.優化和編譯:通過JIT編譯器生成機器碼。 4.執行:運行機器碼。 V8引擎通過即時編譯和隱藏類優化,SpiderMonkey使用類型推斷系統,導致在相同代碼上的性能表現不同。

JavaScript在現實世界中的應用包括服務器端編程、移動應用開發和物聯網控制:1.通過Node.js實現服務器端編程,適用於高並發請求處理。 2.通過ReactNative進行移動應用開發,支持跨平台部署。 3.通過Johnny-Five庫用於物聯網設備控制,適用於硬件交互。


熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

AI Hentai Generator
免費產生 AI 無盡。

熱門文章

熱工具

SublimeText3漢化版
中文版,非常好用

Dreamweaver Mac版
視覺化網頁開發工具

Atom編輯器mac版下載
最受歡迎的的開源編輯器

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)

MinGW - Minimalist GNU for Windows
這個專案正在遷移到osdn.net/projects/mingw的過程中,你可以繼續在那裡關注我們。 MinGW:GNU編譯器集合(GCC)的本機Windows移植版本,可自由分發的導入函式庫和用於建置本機Windows應用程式的頭檔;包括對MSVC執行時間的擴展,以支援C99功能。 MinGW的所有軟體都可以在64位元Windows平台上運作。