Java程式設計素養----Ajax和JSON
阿新 • • 發佈:2018-12-12
Ajax和JSON
Ajax功能①非同步訪問伺服器②頁面區域性重新整理
介紹:頁面發起請求,會將請求傳送給瀏覽器核心中的Ajax引擎,Ajax引擎會提交請求到伺服器端,在這段時間裡,客戶端可以任意進行任意操作,直到伺服器端將資料返回給Ajax引擎後,會觸發你設定的事件,從而執行自定義的js邏輯程式碼完成某種頁面功能。
同步和非同步:
例1:小明在樓下喊樓上的小紅去吃午飯,一直喊到,小紅聽到後下樓,然後小紅和小明一起去吃午飯;
例2:小明在樓下喊樓上的小紅去吃午飯,喊了一聲後,不管小紅是否聽見,小明自己去吃午飯。
同步現象:客戶端傳送請求到伺服器端,當伺服器返回響應之前,客戶端都處於等待 卡死狀態;(例1) 非同步現象:客戶端傳送請求到伺服器端,無論伺服器是否返回響應,客戶端都可以隨 意做其他事情,不會被卡死;(例2)
js中的Ajax技術
js原生的Ajax其實就是圍繞瀏覽器內內建的Ajax引擎物件進行學習的,要使用js原生的Ajax完成非同步操作,有如下幾個步驟:
1)建立Ajax引擎物件
2)為Ajax引擎物件繫結監聽(監聽伺服器已將資料響應給引擎)
3)繫結提交地址
4)傳送請求
5)接受響應資料
(詳情見javascript API文件)
JSON—資料交換的格式
①json是一種與語言無關的資料交換的格式,作用: 使用ajax進行前後臺數據交換 移動端與服務端的資料交換 ②json採用key,value格式,且key的資料型別為String,value資料型別為object; ③json格式之間格式內可以巢狀; ④json是js的原生內容,js可以直接用 . 取出物件內容。
JSON的格式(兩種) 1)物件格式:{“key1”:obj,“key2”:obj,“key3”:obj…} 2)陣列/集合格式:[obj,obj,obj…] 例1:User物件用JSON資料格式表示
user = {"username":"zhangsan", "password":"123456", "age":18 }
例2:List陣列用JSON資料格式表示
products = [{"pid":001, "name":"iphoneX"},{"pid":002, "name":"iphoneXr"}]
例3:物件和集合巢狀使用
person = { "name":"zhangsan", "group":[ {"id":"1組","num":10} {"id":"2組","num":12} {"id":"3組","num":12} ] }
例4:js獲取JSON裡面的值,例3資料
name = person.name zhangsan
groupId = person.group[1].id 2組
JQuery的ajax技術
jquery是一個優秀的js框架,自然對js原生的ajax進行了封裝,封裝後的ajax的操作方法更簡潔,功能更強大,與ajax操作相關的jquery方法有如下幾種,但開發中經常使用的有三種:
1)$.get(url, [data], [callback], [type])
2)$.post(url, [data], [callback], [type])
url:待載入頁面的URL地址 data:待發送 Key/value 引數。 callback:載入成功時回撥函式。 type:返回內容格式,xml, html, script, json, text, _default。
3)$.ajax( { option1:value1,option2:value2... } );
常用的option有如下:
async:是否非同步,預設是true代表非同步
data:傳送到伺服器的引數,建議使用json格式
dataType:伺服器端返回的資料型別,常用text和json
success:成功響應執行的函式,對應的型別是function型別
type:請求方式,POST/GET
url:請求伺服器端地址
(詳情見jQuery API)