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簡介