1.定義
AJAX（Asynchronous Javascript And XML）翻譯成中文就是「異步Javascript和XML」，是一種建立交互式網頁應用的網頁開發技術。
css
即便用Javascript語言與服務器進行異步交互，傳輸的數據爲XML（固然，傳輸的數據不僅是XML）。html
- 同步交互：客戶端發出一個請求後，須要等待服務器響應結束後，才能發出第二個請求；
- 異步交互：客戶端發出一個請求後，無需等待服務器響應結束，就能夠發出第二個請求。
AJAX除了異步的特色外，還有一個就是：瀏覽器頁面局部刷新；（這一特色給用戶的感覺是在不知不覺中完成請求和響應過程）前端
2.AJAX的工做原理
Ajax的工做原理至關於在用戶和服務器之間加了—箇中間層(AJAX引擎),使用戶操做與服務器響應異步化。並非全部的用戶請求都提交給服務器,像—些數據驗證和數據處理等都交給Ajax引擎本身來作, 只有肯定須要從服務器讀取新數據時再由Ajax引擎代爲向服務器提交請求。
Ajax其核心有JavaScript、XMLHTTPRequest、DOM對象組成，經過XmlHttpRequest對象來向服務器發異步請求，從服務器得到數據，而後用JavaScript來操做DOM而更新頁面。這其中最關鍵的一步就是從服務器得到請求數據。jquery
3.Ajax的應用場景
當咱們在百度中輸入一個「老」字後，會立刻出現一個下拉列表！列表中顯示的是包含「傳」字的4個關鍵字。web
其實這裏就使用了AJAX技術！當文件框發生了輸入變化時，瀏覽器會使用AJAX技術向服務器發送一個請求，查詢包含「傳」字的前10個關鍵字，而後服務器會把查詢到的結果響應給瀏覽器，最後瀏覽器把這4個關鍵字顯示在下拉列表中。ajax
- 整個過程當中頁面沒有刷新，只是刷新頁面中的局部位置而已！
- 當請求發出後，瀏覽器還能夠進行其餘操做，無需等待服務器的響應！
當輸入用戶名後，把光標移動到其餘表單項上時，瀏覽器會使用AJAX技術向服務器發出請求，服務器會查詢名爲zhangSan的用戶是否存在，最終服務器返回true表示名爲lemontree7777777的用戶已經存在了，瀏覽器在獲得結果後顯示「用戶名已被註冊！」。django
- 整個過程當中頁面沒有刷新，只是局部刷新了；
- 在請求發出後，瀏覽器不用等待服務器響應結果就能夠進行其餘操做；
4.與傳統的web應用比較
傳統的Web應用交互由用戶觸發一個HTTP請求到服務器,服務器對其進行處理後再返回一個新的HTHL頁到客戶端, 每當服務器處理客戶端提交的請求時,客戶都只能空閒等待,而且哪怕只是一次很小的交互、只需從服務器端獲得很簡單的一個數據,都要返回一個完整的HTML頁,而用戶每次都要浪費時間和帶寬去從新讀取整個頁面。這個作法浪費了許多帶寬，因爲每次應用的交互都須要向服務器發送請求，應用的響應時間就依賴於服務器的響應時間。這致使了用戶界面的響應比本地應用慢得多。
與此不一樣，AJAX應用能夠僅向服務器發送並取回必需的數據，它使用SOAP或其它一些基於XML的Web Service接口，並在客戶端採用JavaScript處理來自服務器的響應。由於在服務器和瀏覽器之間交換的數據大量減小，結果咱們就能看到響應更快的應用。同時不少的處理工做能夠在發出請求的客戶端機器上完成，因此Web服務器的處理時間也減小了。json
5.Ajax的優缺點
- AJAX的優勢
1.無刷新更新數據小程序
AJAX最大優勢就是能在不刷新整個頁面的前提下與服務器通訊維護數據。這使得Web應用程序更爲迅捷地響應用戶交互，並避免了在網絡上發送那些沒有改變的信息，減小用戶等待時間，帶來很是好的用戶體驗。後端
2.異步與服務器通訊。
AJAX使用異步方式與服務器通訊，不須要打斷用戶的操做，具備更加迅速的響應能力。優化了Browser和Server之間的溝通，減小沒必要要的數據傳輸、時間及下降網絡上數據流量。
3.前端和後端負載平衡。
AJAX能夠把之前一些服務器負擔的工做轉嫁到客戶端，利用客戶端閒置的能力來處理，減輕服務器和帶寬的負擔，節約空間和寬帶租用成本。而且減輕服務器的負擔，AJAX的原則是「按需取數據」，能夠最大程度的減小冗餘請求和響應對服務器形成的負擔，提高站點性能。
4.基於標準被普遍支持。
AJAX基於標準化的並被普遍支持的技術，不須要下載瀏覽器插件或者小程序，但須要客戶容許JavaScript在瀏覽器上執行。隨着Ajax的成熟，一些簡化Ajax使用方法的程序庫也相繼問世。一樣，也出現了另外一種輔助程序設計的技術，爲那些不支持JavaScript的用戶提供替代功能。
5.界面與應用分離。
Ajax使WEB中的界面與應用分離（也能夠說是數據與呈現分離），有利於分工合做、減小非技術人員對頁面的修改形成的WEB應用程序錯誤、提升效率、也更加適用於如今的發佈系統。
- AJAX的缺點
1.AJAX幹掉了Back和History功能，即對瀏覽器機制的破壞。
在動態更新頁面的狀況下，用戶沒法回到前一個頁面狀態，由於瀏覽器僅能記憶歷史記錄中的靜態頁面。一個被完整讀入的頁面與一個已經被動態修改過的頁面之間的差異很是微妙；用戶一般會但願單擊後退按鈕可以取消他們的前一次操做，可是在Ajax應用程序中，這將沒法實現。
後退按鈕是一個標準的web站點的重要功能，可是它無法和js進行很好的合做。這是Ajax所帶來的一個比較嚴重的問題，由於用戶每每是但願可以經過後退來取消前一次操做的。那麼對於這個問題有沒有辦法？答案是確定的，用過Gmail的知道，Gmail下面採用的Ajax技術解決了這個問題，在Gmail下面是能夠後退的，可是，它也並不能改變Ajax的機制，它只是採用的一個比較笨可是有效的辦法，即用戶單擊後退按鈕訪問歷史記錄時，經過建立或使用一個隱藏的IFRAME來重現頁面上的變動。（例如，當用戶在Google Maps中單擊後退時，它在一個隱藏的IFRAME中進行搜索，而後將搜索結果反映到Ajax元素上，以便將應用程序狀態恢復到當時的狀態。）
可是，雖說這個問題是能夠解決的，可是它所帶來的開發成本是很是高的，並與Ajax框架所要求的快速開發是相背離的。這是Ajax所帶來的一個很是嚴重的問題。
一個相關的觀點認爲，使用動態頁面更新使得用戶難於將某個特定的狀態保存到收藏夾中。該問題的解決方案也已出現，大部分都使用URL片段標識符（一般被稱爲錨點，即URL中#後面的部分）來保持跟蹤，容許用戶回到指定的某個應用程序狀態。（許多瀏覽器容許JavaScript動態更新錨點，這使得Ajax應用程序可以在更新顯示內容的同時更新錨點。）這些解決方案也同時解決了許多關於不支持後退按鈕的爭論。
2.AJAX的安全問題。
AJAX技術給用戶帶來很好的用戶體驗的同時也對IT企業帶來了新的安全威脅，Ajax技術就如同對企業數據創建了一個直接通道。這使得開發者在不經意間會暴露比之前更多的數據和服務器邏輯。Ajax的邏輯能夠對客戶端的安全掃描技術隱藏起來，容許黑客從遠端服務器上創建新的攻擊。還有Ajax也難以免一些已知的安全弱點，諸如跨站點腳步攻擊、SQL注入攻擊和基於Credentials的安全漏洞等等。
3.對搜索引擎支持較弱。
對搜索引擎的支持比較弱。若是使用不當，AJAX會增大網絡數據的流量，從而下降整個系統的性能。
4.破壞程序的異常處理機制。
至少從目前看來，像Ajax.dll，Ajaxpro.dll這些Ajax框架是會破壞程序的異常機制的。關於這個問題，曾在開發過程當中遇到過，可是查了一下網上幾乎沒有相關的介紹。後來作了一次試驗，分別採用Ajax和傳統的form提交的模式來刪除一條數據……給咱們的調試帶來了很大的困難。
5.違背URL和資源定位的初衷。
例如，我給你一個URL地址，若是採用了Ajax技術，也許你在該URL地址下面看到的和我在這個URL地址下看到的內容是不一樣的。這個和資源定位的初衷是相背離的。
6.AJAX不能很好支持移動設備。
一些手持設備（如手機、PDA等）如今還不能很好的支持Ajax，好比說咱們在手機的瀏覽器上打開採用Ajax技術的網站時，它目前是不支持的。
7.客戶端過肥，太多客戶端代碼形成開發上的成本。
編寫複雜、容易出錯 ；冗餘代碼比較多（層層包含js文件是AJAX的通病，再加上以往的不少服務端代碼如今放到了客戶端）；破壞了Web的原有標準。
6.AJAX注意點及適用和不適用場景
1.注意點
Ajax開發時，網絡延遲——即用戶發出請求到服務器發出響應之間的間隔——須要慎重考慮。不給予用戶明確的迴應，沒有恰當的預讀數據，或者對XMLHttpRequest的不恰當處理，都會使用戶感到延遲，這是用戶不但願看到的，也是他們沒法理解的。一般的解決方案是，使用一個可視化的組件來告訴用戶系統正在進行後臺操做而且正在讀取數據和內容。
2.Ajax適用場景
<1>.表單驅動的交互
<2>.深層次的樹的導航
<3>.快速的用戶與用戶間的交流響應
<4>.相似投票、yes/no等無關痛癢的場景
<5>.對數據進行過濾和操縱相關數據的場景
<6>.普通的文本輸入提示和自動完成的場景
3.Ajax不適用場景
<1>.部分簡單的表單
<2>.搜索
<3>.基本的導航
<4>.替換大量的文本
<5>.對呈現的操縱
2、Ajax的語法
一、jQuery Ajax
jQuery其實就是一個JavaScript的類庫，其將複雜的功能作了上層封裝，使得開發者能夠在其基礎上寫更少的代碼實現更多的功能。
- jQuery 不是生產者，而是大天然搬運工。
- jQuery Ajax本質 XMLHttpRequest 或 ActiveXObject
語法
例：
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js "></script>
</head>
<body>
<h1>index</h1>
{% csrf_token %}
<button class="t">click</button>
<p class="con"></p>
<hr>
<input type="text" id="num1">+<input type="text" id="num2">=<input type="text" id="ret"><button class="cal">submit</button>
<script>
$(".t").click(function () {
// ajax請求
$.ajax({
url:"/ajax_handle1/",
type:"get",
success:function (data) {
console.log(data);
console.log(typeof data);
var data=JSON.parse(data);
console.log(data);
console.log(data["state"]);
console.log(typeof data);
//$(".con").html(data)
}
})
});
$(".cal").click(function () {
// ajax請求
$.ajax({
url:"/ajax_handle2/",
type:"post",
data:{"num1":$("#num1").val(),
"num2":$("#num2").val(),
"csrfmiddlewaretoken":$("[name='csrfmiddlewaretoken']").val()},
success:function (data) {
$("#ret").val(data)
}
})
})
</script>
</body>
</html>
views.py
from django.shortcuts import render,HttpResponse
# Create your views here.
def index(reqeust):
import time
# time.sleep(10)
return render(reqeust,"index.html")
def ajax_handle1(request):
# import time
# time.sleep(10)
response={"state":True}
import json
return HttpResponse(json.dumps(response))
def ajax_handle2(request):
num1=request.POST.get("num1")
num2=request.POST.get("num2")
ret=int(num1)+int(num2)
return HttpResponse(str(ret))
補充：
JSON.parse(): 用於將一個 JSON 字符串轉換爲 JavaScript 對象
eg:
console.log(JSON.parse('{"name":"Yuan"}'));
console.log(JSON.parse('{name:"Yuan"}')) ; // 錯誤
console.log(JSON.parse('[12,undefined]')) ; // 錯誤
JSON.stringify(): 用於將 JavaScript 值轉換爲 JSON 字符串。
eg: console.log(JSON.stringify({'name':"egon"})) ;