什麼是Ajax？全面了解

一:Ajax

  • 引入Ajax:

我們知道，前端頁面想要和後端進行數據交互，可以通過以下方式

  • 將參數添加到url中，後端通過get方式從url中獲取數據 GET請求
  • 前端頁面通過form表單，將數據以get或者post的方式發送給後端 POST請求/GET請求
  • 前端通過a標籤(和使用url方式參數的方式) GET請求

此外，我們還可以使用ajax技術來實現前後端數據的交互。

  • Ajax GET請求/POST請求
1.什麼是Ajax？
1.AJAX（Asynchronous Javascript And XML）翻譯成中文就是「非同步的Javascript和XML」。即使用javascript語言與伺服器進行非同步交互，傳輸的數據為XML(當然，傳輸的數據不只是XML)。
2.Ajax不是新的程式語言，而是一種使用現有標準的新方法。

什么是Ajax？工作原理？如何用Ajax完成GET请求-PHP问题-PHP中文网

2.Ajax最大的優點
1.Ajax最大的優點是在不重新載入整個頁面的情況下，可以與伺服器交換數據並更新部分網頁內容。
(這一特點給用戶的感受是在不知不覺中完成請求和響應過程)
2.Ajax不需要任何瀏覽器插件，但需要用戶允許javaScript在瀏覽器上執行。
  • 同步交互: 客戶端發出一個請求後，需要等待伺服器響應結束後，才能發出第二個請求。
  • 非同步交互: 客戶端發出一個請求後，無需要等待伺服器響應結束，就可以發出第二個請求。
Ajax用於"局部刷新頁面"和"非同步提交"的特點

非同步提交: 提交完認為不需要原地等待，立馬就做其他事
局部刷新: 不在局限於整個頁面的刷新，而是在於局部的某一個頁面的小塊刷新

因此和使用Form表單和後端進行數據交互的方式比較，具有以下優點:
  • Ajax使用JavaScript技術向伺服器發送非同步請求
  • Ajax請求無須刷新整個頁面
  • 因為伺服器響應內容不再是整個頁面，而是頁面中的部分內容，所以Ajax性能高！
3.Ajax工作原理
1.Ajax相當於在用戶和伺服器之間加了一個中間層(Ajax引擎),使用戶操作與伺服器響應非同步化。
2.並不是所有用戶請求都是提交給伺服器，像一些數據驗證和數據處理等都交給Ajax引擎自己來做，只有確定需要從伺服器讀取數據時再由Ajax引擎代為向伺服器提交請求。
3.客戶端發送請求，請求交給Ajax，Ajax把請求提交給伺服器，伺服器進行業務處理，伺服器響應數據交給Ajax對象，Ajax對象接收數據，由JavaScript把數據寫到頁面上。

img

要完整實現一個Ajax非同步調用和局部刷新，同窗需要以下幾個步驟:

1.創建XMLHttpRequest對象，既創建一個非同步調用對象
2.創建一個新的HTTP請求，並指定該HTTP請求的方法，URL及驗證資訊
3.設置響應HTTP請求狀態變化的函數
4.發送HTTP請求
5.獲取非同步調用返回數據
6.使用JavaSciript和DOM實現局部刷新

注意:
Ajax傳輸數據為XML(當然，傳輸數據不只是XML，現在更多使用json數據，基本上web頁面都是Ajax)
4.Ajax使用jQuery封裝
1.使用原生js寫Ajax請求(沒有人使用)
	1.原生的複雜並且在實際項目中也一般不用
	2.區分瀏覽器，需要做瀏覽器兼容
2.現在主流用法(jQuery已經封裝好了)
	1.jQuery內部封裝了DOM和BOM原生js
	2.jQuery更加簡便(宗旨: "Write less, do more")

jQuery介紹使用鏈接://www.cnblogs.com/goOJBK/p/15890701.html

5.Ajax基本語法
$.ajax({
	// 發送地址 1.不寫默認朝當前所在url提交數據 
	// 2.全寫 指名道姓 //www.baidu.com 
	// 3.只寫後綴/login/
	url: '',  
	type: 'get/post',  	// 請求方式 默認get  
	data: {'username':'jason', 'password':123}  //   要發送的數據
	success:function(args){
		// 回調函數(非同步回調機制)
	}
})


解析(重要):
    1.當你在利用ajax進行前後端交互的時候
    2.當後端給你返回結果的時候會自動觸發 args接受後端的返回結果

二:Ajax使用案例

1.案例需求
頁面上有三個input框:
    1.在前兩個框中輸入數字 點擊按鈕 朝後端發送ajax請求
    2.後端計算出結果 再返回給前端動態展示的到第三個input框中
    (整個過程頁面不準有刷新,也不能在前端計算)
2.index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--jQuery引入 CDN-->
    <script src="//cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<input type="text" id="d1"> +
<input type="text" id="d2"> =
<input type="text" id="d3">
<p>
    <button id="btn">點我</button>
</p>
<script>  // 記得導入jQuery  注釋掉settings第四行
    // 先給按鈕綁定一個點擊事件
    $('#btn').click(function () {
        // 朝後端發送ajax請求
        $.ajax({
            // 1.指定朝那個後端發送ajax請求
            url:'', // 不寫就是朝當前地址提交
            // 2.請求方式
            type:'post', // 不指定默認就是get  都是小寫
            // 3.數據
            data:{'i1':$('#d1').val(), 'i2':$('#d2').val()},  // 拿到#d1 與 #d2 內容
            // 4.回調函數=(非同步回調機制)
            // 當後端給你返回結果的時候會自動觸發 args接受後端的返回結果
            success:function (args) {  // 目前無論後端返回什麼，包括頁面，都是args接收
                {#alert(args)  #}
                // 通過DOM操作動態渲染到第三個input裡面
                $('#d3').val(args)
            }
        })
    })
</script>
</body>
</html>
3.views.py
from django.shortcuts import render, HttpResponse

def ab_ajax(request):
    # 前端請求
    if request.method == "POST":
        # print(request.POST)  # <QueryDict: {'i1': ['111'], 'i2': ['222']}>
        # 拿到接收數據 進行加法運算 在返回回去
        i1 = request.POST.get('i1')
        i2 = request.POST.get('i2')
        # 先轉成整型再加
        i3 = int(i1) + int(i2)
        print(i3)
        # 返回給前端
        return HttpResponse(i3)
    return render(request, 'index.html')

image

三:驗證json後端返回前端字典

  • views.py
from django.shortcuts import render, HttpResponse

import json

def ab_ajax(request):
    # 前端請求
    if request.method == "POST":
        # 返回給字典
        d = {'code':100, 'msg':i3}
        return HttpResponse(json.dumps(d))  # 返回字典需要序列化
    return render(request, 'index.html')

image

四:驗證JsonResponse後端返回值

  • index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--jQuery引入 CDN-->
    <script src="//cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<input type="text" id="d1"> +
<input type="text" id="d2"> =
<input type="text" id="d3">
<p>
    <button id="btn">點我</button>
</p>
<script>  // 記得導入jQuery  注釋掉settings第四行
    // 先給按鈕綁定一個點擊事件
    $('#btn').click(function () {
        // 朝後端發送ajax請求
        $.ajax({
            // 1.指定朝那個後端發送ajax請求
            url:'', // 不寫就是朝當前地址提交
            // 2.請求方式
            type:'post', // 不指定默認就是get  都是小寫
            // 3.數據
            data:{'i1':$('#d1').val(), 'i2':$('#d2').val()},  // 拿到#d1 與 #d2 內容
            // 4.回調函數=(非同步回調機制)
            // 當後端給你返回結果的時候會自動觸發 args接受後端的返回結果
            success:function (args) {  // 目前無論後端返回什麼，包括頁面，都是args接收
                console.log(typeof args)   // 列印當前返回值類型
            }
        })
    })
</script>
</body>
</html>
  • views.py
from django.shortcuts import render, HttpResponse
from django.http import JsonResponse

def ab_ajax(request):
    # 前端請求
    if request.method == "POST":
        # 返回給字典
        d = {'code':100, 'msg':666}
        return JsonResponse(d)
    return render(request, 'index.html')

image

五:總結兩種序列化方式

針對後端如果是用HttpResponse返回的數據 回調函數不會自動幫你反序列化
如果後端直接用的是JsonResponse返回數據 回調函數會自動幫你反序列化

HttpResponse不會自動反序列化解決方式
	1.自己在前端利用JSON。parse()
    2.在ajax裡面配置一個參數
1.知識儲備
# 擴展 參數  程式碼發布項目還會涉及
dataType:'JSON'

當後端是以HttpResponse返回的json格式的數據
默認是不會自動反序列化的
	1.自己手動JSON.parse()
	2.配置dataType參數
Tags:

VirMach 便宜 VPS