Js原生Ajax和Jquery的Ajax

標籤：狀態   img   ica   request   瀏覽器核心   callback   orm   卡死   自動   

一、Ajax概述1．什麼是同步，什麼是非同步

同步現象：用戶端發送請求到伺服器端，當伺服器返迴響應之前，用戶端都處於等待卡死狀態

非同步現象：用戶端發送請求到伺服器端，無論伺服器是否返迴響應，用戶端都可以隨意做其他事情，不會被卡死

2．Ajax的運行原理

　　頁面發起請求，會將請求發送給瀏覽器核心中的Ajax引擎，Ajax引擎會提交請求到伺服器端，在這段時間裡，用戶端可以任意進行任意操作，直到伺服器端將資料返回給Ajax引擎後，會觸發你設定的事件，從而執行自訂的js邏輯程式碼完成某種頁面1 功能。

二、js原生的Ajax技術（瞭解）

js原生的Ajax其實就是圍繞瀏覽器內內建的Ajax引擎對象進行學習的，要使用js原生的Ajax完成非同步作業，有如下幾個步驟：

　　1）建立Ajax引擎對象

　　2）為Ajax引擎對象綁定監聽（監聽伺服器已將資料響應給引擎）

　　3）綁定提交地址

　　4）發送請求

　　5）接受響應資料

　　

注意：如果是post提交 在發送請求之前設定一個頭

　　xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

三、Jquery的Ajax技術（重點）

　　jquery是一個優秀的js架構，自然對js原生的ajax進行了封裝，封裝後的ajax的操作方法更簡潔，功能更強大，與ajax操作相關的jquery方法有如下幾種，但開發中經常使用的有三種

1）$.get(url, [data], [callback], [type])

2）$.post(url, [data], [callback], [type])

其中：

　　url：代表請求的伺服器端地址

　　data：代表請求伺服器端的資料（可以是key=value形式也可以是json格式）

　　callback：表示伺服器端成功響應所觸發的函數（只有正常成功返回才執行）

　　type：表示伺服器端返回的資料類型（jquery會根據指定的類型自動類型轉換）

　　　　　常用的傳回型別：text、json、html等

3）$.ajax( { option1:value1,option2:value2... } ); ---- 以後在掌握

常用的option有如下：

　　async：是否非同步，預設是true代表非同步

　　data：發送到伺服器的參數，建議使用json格式

　　dataType：伺服器端返回的資料類型，常用text和json

　　success：成功響應執行的函數，對應的類型是function類型

　　type：請求方式，POST/GET

　　url：請求伺服器端地址

Js原生Ajax和Jquery的Ajax