1. 什么是Ajax？

Ajax是“Asynchronous Javascript And XML(異步Javascript和XML)”的縮寫， 是指一種創建交互式網頁應用的網站開發技術。

Ajax不是一種新的編程語言， 而是一種用于創建更好、更快以及交互性更強的web應用程序的技術。

它是一套綜合了多項技術的瀏覽器端網頁開發技術。這些技術包括Javascript、 XHTML和CSS、DOM、XML和XMLHttpRequ。

Ajax可以在不重新加載整個頁面的情況下， 與服務器交換數據。這種異步交互的方式， 使用戶單擊后， 不必刷新頁面也能獲取新數據。 使用Ajax， 用戶可以創建接近本地桌面應用的直接、高可用、更豐富、更動態的Web用戶界面。

?

1.1? Ajax原理

通過XTML和CSS來實現頁面， 表達信息。

通過瀏覽器的XmlHttpRequest(Ajax引擎)對象， 來向服務器發送異步請求， 并接收服務器的響應數據， 然后用javascript來操作DOM， 實現動態局部刷新。

?

1.2 Ajax的優點和不足之處。

優點：

　　使用Ajax的最大優點， 就是能在不更新整個頁面的前提下維護數據。

　　這使得web應用程序更為迅捷地響應用戶動作， 并避免了在網絡上發送那些沒有改變的HTML代碼信息。

　　1. 減輕服務器負擔， 按需要獲得數據。

　　2. 無刷新更新頁面， 減少用戶的實際和心理的等待時間。

　　3. 更好的用戶體驗。

　　4. 減輕寬帶的負擔。

　　5. 主流瀏覽器支持。

不足：

　　1. Ajax的程序必須測試針對各個瀏覽器的兼容性。

　　2. Ajax更新頁面內容的時候并沒有刷新整個頁面， 因此， 網頁的后退功能是失效的。

　　3. 對搜索引擎支持不好。

?

1.3? Ajax實現過程

　　第一步： Javascript監聽瀏覽器網頁事件（例如：點擊， 提交， 更改等）。

　　第二步： 由Javascrip創建Ajax引擎對象。

　　第三步： 通過Ajax引擎對象發出請求。

　　第四步： Ajax引擎等待并且接收服務器的響應內容

　　第五步： Javascript再從“Ajax引擎對象”中獲取響應內容， 并且通過DOM改變網頁界面顯示效果。

?

2. jQuery的load()方法

jQuery load()方法是簡單但強大的AJax方法。

load() 方法從服務器加載數據， 并把返回的數據放入被選元素中。

語法：

$("selector").load(URL, data, callback);

第一種情況：

$("#btn").click(function(){//只傳一個URL， 表示在id為new-projectsd的元素加載index.html$("#new-projects").load("./index.html")})

第二種情況：

$("btn").click(function () {// 只傳一個URL， 導入的index.html文件含有多個傳遞參數， 類似于： index/html?name=yang&age=12$("#new-projects").load("./index.html", {"name": "yang", "age":12});});

第三種情況：

$("btn").click(function () {// 如果加載成功，則會執行回調函數$("#new-projects").load("./index.html", {"name": "yang", "age":12}, function () {alert("load執行成功!");}); });

?

3. jQuery的getJSON方法

jQuery的Ajax中使用getJSON()方法， 異步加載JSON格式數據。?

獲取服務器中的數據， 并對數據進行解析， 顯示到頁面中。

語法：

$,getJSON(url, [data], [callback]);

參數(url):? 為請求加載json格式文件的服務器地址。

參數(data):? 可選， 為請求時發送的數據。

參數(callback): 為數據請求成功后執行的函數。

$.getJSON("./data/getJSON.json", function (data) {var str=""; //初始化保存內容變量$.each(data, function (index, ele) {$("ul").append("<li>"+ele.name+"</li>>")})})

?

4. jQuery的$.get()方法

語法：?

　$.get(URL, callback);

　參數(URL): 必選， 規定請求的路徑。

　參數(callback): 數據請求成功后執行的函數。

　作用：通過HTTP GET請求從服務器上請求數據。

$.get("./data/getJSON.json", function (data, status) {console.log(status);})

?

5. jQuery的post()方法

語法：

$.post(URL, data, callback);

參數(URL)： 必選， 規定請求的路徑。

參數(data)： 可選， 連同請求發送的數據。

參數(callback)：可選， 數據請求成功后執行的函數。

作用： 以POST方式向服務器發送數據， 服務器接收到數據之后， 進行處理， 并將處理結果返回頁面。

$.post("/index", {name: "zhang"}, function (data, status) {console.log(status);})

?

轉載于:https://www.cnblogs.com/ellisonzhang/p/10702550.html

總結

以上是生活随笔為你收集整理的jQuery的Ajax初识的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。