Django基礎之Ajax簡介
阿新 • • 發佈：2018-11-23
而已 imu request 數據 .sh 瀏覽器插件 方法 short 加載 
Ajax(Asynchronous JavaScript And XML)翻譯成中文就是“異步的JavaScript和XML”。即使用JavaScript語言與服務器進行異步交互，傳輸的數據為XML（當然，傳輸的數據不只是XML）。
Ajax不是新的編程語言，而是一種使用現有標準的新方法。
Ajax最大的優點是在不重新加載整個頁面的情況下，可以與服務器交換數據並更新部分網頁內容。（這一特點給用戶的感受是在不知不覺中完成請求和響應過程）
Ajax不需要任何瀏覽器插件，但需要用戶允許JavaScript在瀏覽器上執行。
- 同步交互：客戶端發出一個請求後，需要等待服務器響應結束後，才能發出第二個請求；
- 異步交互：客戶端發出一個請求後，無需等待服務器響應結束，就可以發出第二個請求。
1. 示例：
頁面輸入兩個整數，通過Ajax傳輸到後端計算出結果並返回。
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" 6 content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0html代碼"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script> 9 <title>Document</title> 10 </head> 11 <body> 12 <h2>Ajax計算</h2> 13 <input type="text" id="text1">+ 14<input type="text" id="text2">= 15 <input type="text" id="result"> 16 <button type="submit" id="button1">計算</button> 17 <script> 18 $("#button1").click(function () { 19 var t1 = $("#text1").val(); 20 var t2 = $("#text2").val(); 21 $.ajax({ 22 url:‘/calc/‘, 23 type: ‘post‘, 24 data: { 25 ‘t1‘: t1, 26 ‘t2‘: t2 27 }, 28 success: function(res){ 29 $("#result").value(res) 30 } 31 }) 32 }) 33 </script> 34 </body> 35 </html>
1 from django.shortcuts import render, HttpResponse 2 3 def index(request): 4 return render(request, "index.html") 5 6 def calc(request): 7 t1 = int(request.POST.get("t1")) 8 t2 = int(request.POST.get("t2")) 9 10 res = t1 + t2 11 return HttpResponse(res)views.py
1 from django.conf.urls import url 2 from django.contrib import admin 3 from app01 import views 4 5 urlpatterns = [ 6 url(r‘^admin/‘, admin.site.urls), 7 8 url(r"^/index/", views.index), 9 url(r‘^/calc/‘, views.calc) 10 ]urls.py
2. Ajax常用應用情景
搜索引擎根據用戶輸入的關鍵字，自動提示檢索關鍵字。
還有一個很重要的應用場景就是註冊的時候的用戶名查重。
其實這裏就是使用了Ajax技術。當文件框發生了輸入變化時，使用Ajax技術向服務器發送一個請求，然後服務器會把查詢到的結果響應給瀏覽器，最後再把後端返回的結果展示出來。
- 整個過程中頁面沒有刷新，只是刷新頁面中的局部位置而已
- 當請求發出後，瀏覽器還可以進行其它操作，無需等待服務器的響應
當輸入用戶名後，把光標移動到其他表單項上時，瀏覽器會使用Ajax技術向服務器發出請求，服務器會查詢名為lemontree7777777的用戶是否存在，最終服務器返回true表示名為lemontree7777777的用戶已經存在了，瀏覽器在得到結果後顯示“用戶名已被註冊！”
- 整個過程中頁面沒有刷新，只是局部刷新了；
- 在請求發出後，瀏覽器不用等待服務器響應結果就可以進行其他操作。
3. Ajax的優缺點
3.1 優點
- Ajax使用JavaScript技術向服務器發送異步請求；
- Ajax請求無須刷新整個頁面；
- 因為服務器響應內容不再是整個頁面，而是頁面中的部分內容，所以Ajax性能高；
3.2 缺點
濫用技術，造成服務器壓力過大
Django基礎之Ajax簡介