您好,登錄后才能下訂單哦!
AJAX(異步的 JavaScript 和 XML
)是用于創建快速動態網頁的一種技術,它在不重新加載整個頁面的情況下,與服務器交換數據并更新部分網頁,ajax 使用XMLHttpRequest
對象在后臺與服務器交換數據,XMLHttpRequest 是 AJAX 的基礎,它允許客戶端 JavaScript 通過 HTTP
請求連接到遠程服務器。
但是,由于受到瀏覽器的限制,這種方法不可以進行跨域訪問,如果使用這種方法進行跨域訪問則會出現安全問題。不過,我們可以發現,在web頁面跨域調用 js文件時,不會受到瀏覽器的限制,所以我們可以利用將遠程服務器端的數據裝入js格式的文件,然后再用來供客戶端進行調用。
JSON(JavaScript 對象表示法
)是一種輕量級的文本數據交換格式,它具有自我描述性,易于理解。JSON 可通過 JavaScript
進行解析,JSON 數據可使用 AJAX
進行傳輸。
JSON實例:
{ "employees": [ { "firstName":"Bill" , "lastName":"Gates" }, { "firstName":"George" , "lastName":"Bush" }, { "firstName":"Thomas" , "lastName":"Carter" } ] }
JSON 語法是 JavaScript 對象表示法語法的子集:
數據在名稱/值
對中, 數據由逗號
分隔 ,花括號
保存對象, 方括號
保存數組
。
JSON的特性
基于JSON
的這些特性,可以通過使服務器動態生成JSON
文件,然后將客戶端需要的數據裝入這個文件,再將該文件調回客戶端供客戶端使用。為了便于客戶端使用數據,逐漸形成了一種非正式傳輸協議JSONP
,該協議的一個要點就是允許用戶傳遞一個callback
參數給服務端,然后服務端返回數據時會將這個callback
參數作為函數名來裝入JSON
數據,這樣客戶端就可以隨意定制自己的函數來自動處理返回數據了。
如何使用JSONP
一種簡單的方式就是使用jQuery來實現:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title>test</title> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $.ajax({ type: "get", async: false, url: "http://encounter.christmas023.space/json.php?name=mavis&age=18", dataType: "jsonp", jsonp: "callback",//傳遞給請求處理程序或頁面的,用以獲得jsonp回調函數名的參數名(一般默認為:callback) jsonpCallback:"message",//自定義的jsonp回調函數名稱,默認為jQuery自動生成的隨機函數名,也可以寫"?",jQuery會自動為你處理數據 success: function(json){ alert('你的名字:' + json.name + ' 年齡: ' + json.age); }, error: function(){ alert('fail'); } }); }); </script> </head> <body> </body> </html>
type
:請求類型,GET 或 POST,默認為 GET;async
:true(異步)或 false(同步),默認情況下為true,同步請求將鎖住瀏覽器,用戶其它操作必須等待請求完成才可以執行;url
:發送請求的地址(跨域請求時應為絕對地址);dataType
:指定服務器返回的數據類型;jsonpCallback
:自定義JSONP回調函數名稱;success
:請求成功后回調函數;error
:請求失敗時調用此方法。運行結果:
服務器返回的數據類型:
返回一個指定函數名為message
的回調函數,函數里面包裹的數據為JSON
格式。
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持億速云。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。