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）