Ajax 什麼是Ajax? Ajax的基本語法

冀未然發表於2024-03-25

Ajax

什麼是Ajax?

AJAX（Asynchronous Javascript And XML）翻譯成中文就是“非同步Javascript和XML”。即使用Javascript語言與伺服器進行非同步互動，傳輸的資料為XML（當然，傳輸的資料不只是XML,現在更多使用json資料）。

  • 同步互動: 客戶端發出一個請求後，需要等待伺服器響應結束後，才能發出第二個請求。
  • 非同步互動: 客戶端發出一個請求後，無需等待伺服器響應結束，就可以發出第二個請求。

那麼Ajax具有什麼優點？

  • 非同步互動: 客戶端發出一個請求後，無需等待伺服器響應結束，就可以發出第二個請求。
  • 瀏覽器區域性重新整理: 在不重新載入整個頁面的情況下，與伺服器交換資料並更新部分網頁內容。
    這也是Ajax最大的特點，在不重新載入整個頁面的情況下，與伺服器交換資料並更新部分網頁內容，這一特點給使用者的感受是在不知不覺中完成請求和響應過程。

舉例瀏覽器區域性重新整理，以GitHub註冊頁面舉例:

輸入郵箱地址，GitHub註冊介面動態獲取使用者實時書寫資訊，整個頁面並沒有重新整理，實時的跟後端確認並實時展示到前端，這就是區域性重新整理。

以往我們在前後端互動是傳送請求的方式有哪些？

  • 瀏覽器位址列輸入url回車 ---GET請求
  • a標籤href屬性 ---GET請求
  • form表單 ---GET請求/POST請求
  • Ajax ---GET請求/POST請求
    其中from表單提交資料方式頁面統一提交即同步互動，而Ajax使用JavaScript技術向伺服器傳送非同步請求，不再需要重新整理整個頁面，只重新整理頁面中的部分內容，所有Ajax效能更高。

目前使用Ajax居多為jQuery封裝之後的版本，所以在前端頁面使用Ajax時需要確保匯入了jQuery.

Ajax基本語法:

<script>
    //先給按鈕繫結一個點選事件
    $('#btn').click(function (){
        //超後端傳送Ajax請求
        $.ajax({
            //1.指定向那個後端傳送ajax請求
            url:'',//不寫就是向當前地址提交請求
            //2.請求方式需要指定
            type:'post', //不指定預設get,小寫即可。
            //3.資料,自定義物件
            data:{'username':'junjie','password':123},
            //4.非同步回撥機制,回撥函式：當後端返回結果是會自動觸發，arg接收後端的返回結果
            success:function (args) {
              
            }
        })
    })
</script>

先舉一個基本例子來演示Ajax：

頁面上有三個input框：
	在前面兩個框中輸入數字，點選按鈕，向後'g端傳送ajax請求。
  後端計算出結果，再返回給前端動態展示到第三個input框中(整個過程頁面不可以有重新整理，也不能在前端計算)

前端頁面:

<body>
<input type="text" id="d1">+
<input type="text" id="d2">=
<input type="text" id="d3">
<p>
    <button id="btn">點</button> <!--需要繫結點選事件-->
</p>
</body>

<script>
    //先給按鈕繫結一個點選事件
    $('#btn').click(function (){
        //超後端傳送Ajax請求
        $.ajax({
            //1.指定向那個後端傳送ajax請求
            url:'',//不寫就是向當前地址提交請求
            //2.請求方式需要指定
            type:'post', //不指定預設get,小寫即可。
            //3.資料,自定義物件
            data:{'username':'junjie','password':123},
            //4.非同步回撥機制,回撥函式：當後端返回結果是會自動觸發，arg接收後端的返回結果
            success:function (args) {
              
            }
        })
    })
</script>

views.py: 後端

def ab_ajax(request):
    if request.method == 'POST':
        """
        用ajax向後端提交post請求時，也是在request.POST中能夠拿到普通鍵值對
        輸出: <QueryDict: {'username': ['junjie'], 'password': ['123']}>
        """
        print(request.POST)

    return render(request, 'index.html')


def ab_ajax(request):
    if request.method == 'POST':
        """
        用ajax向後端提交post請求時，也是在request.POST中能夠拿到普通鍵值對
        <QueryDict: {'username': ['junjie'], 'password': ['123']}>
        """
        print(request.POST)
        i1 = request.POST.get('i1')
        i2 = request.POST.get('i2')
        # 由於拿到的資料型別是字串形式。需要先轉為整型才能在做邏輯運算。
        i3 = int(i1) + int(i2)
        return HttpResponse(i3)
    return render(request, 'index.html')


script>
    //先給按鈕繫結一個點選事件
    $('#btn').click(function () {
        //超後端傳送Ajax請求
        $.ajax({
            //1.指定向那個後端傳送ajax請求
            url: '',//不寫就是向當前地址提交請求
            //2.請求方式需要指定
            type: 'post', //不指定預設get,小寫即可。
            //3.資料,自定義物件
            //獲取input框中使用者輸入的值使用$('id').val(),jQuery書寫方式
            data: {'i1': $('#d1').val(), 'i2': $('#d2').val()},
            //4.非同步回撥機制,回撥函式：當後端返回結果是會自動觸發，arg接收後端的返回結果
            success: function (args) {
                {#alert(args)#} //透過DOM操作動態渲染到第三個input輸入框中
                console.log(typeof (args))  //string
                $('#d3').val(args) //接收JsonResponse資料物件，並自動反序列化。
            }
        })
    })
</script>

後端views.py

def ab_ajax(request):
    if request.method == 'POST':
        """
        用ajax向後端提交post請求時，也是在request.POST中能夠拿到普通鍵值對
        <QueryDict: {'username': ['junjie'], 'password': ['123']}>
        """
        d = {'username':'junjie','age':666}
        return JsonResponse(d)
    return render(request, 'index.html')


針對後端如果使用HttpResponse返回的資料，回撥函式不會自動反序列化

如果後端使用的是JsonResponse返回的資料，回撥函式會自動反序列化

補充：

# 引數  程式碼釋出專案還會涉及
dataType:'JSON'

當後端是以HttpResponse返回的json格式的資料
預設是不會自動反序列化的
	1.自己手動JSON.parse()
	2.配置dataType引數

相關文章