ajax 介紹，ajax的請求經過js中的 xmlHttpRequest對象完成

時間 2019-11-12

標籤 ajax 介紹請求經過 xmlhttprequest 對象完成欄目 Ajax 简体版

原文原文鏈接

ajax （Asynchronous JavaScript And XMl）異步JavaScript和xml，傳輸的數據是xml,如今是json數據，html

使用JavaScript與前端

同步交互：發出一個請求，等待服務器響應結束，才能發出第二個請求python

異步交互：發出一個請求，無需等待服務器響應解除，就能夠發出第二個請求。jquery

ajax的特色：異步，和局部刷新ajax

json對象，值的都是字符串，在js的對象，數據庫

如：在python語言和PHP語言傳輸數據，是須要一個解析器的，json字符串存的就是字符串，不須要解析器，django

優勢：局部刷新性能高，異步請求，json

缺點：不適合全部場景，有時用到同步交互，bootstrap

　　請求次數過多，增大服務器壓力，後端

　　ajax是使用JavaScript技術實現的，還須要處理瀏覽器的兼容問題，

ajax的核心是在JavaScript中添加一個 xmlHttpRequest對象，全部的請求都是xmlHTTPRequest對象來完成的，

jquery 封裝了JavaScript了，能夠更快捷的實現ajax請求

ajax代碼要寫在前端頁面中，

下面以實例講解

在url 文件中，建立index api

from django.conf.urls import url
from django.contrib import admin

from app01 import views
urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^index/', views.index),  -------index api ,
]

在settings文件中配置靜態文件的路徑

STATIC_URL = '/static/'

STATIC_ROOT = os.path.join(BASE_DIR,'static')

在views文件文件，建立視圖函數index，

from django.shortcuts import render,HttpResponse

# Create your views here.

def index(request):
    import time
    time.sleep(5)#等待5秒，才能看到請求的結果，這是同步



    return HttpResponse('ajax  !!!!')

在template模板中建立index頁面，應用bootstrap 和jquery，

過程：

1.在index頁面輸入內容後，有get和post兩種方法向後端發送數據，在ajax裏，有須要的幾個參數，針對不一樣的狀況

　　　　url是必填的，是要誰發送請求，

　　　　type 是發送request的方法，默認是GET方法，能夠不寫，但若是是POST方法，就要標明瞭

　　　　data：是客戶端發給服務端的數據，是一個json的object對象，實際上在發送的時候進行了，編碼以某種格式（urlencode:？a=1&b=2）發給服務器，urlencode是一種編碼格式，?a=1&b=2 就是urlencode 編碼格式，

data:JSON.stringify({ 
　　　　　　a:1,　　
　　　　　　b:2,
　　　　　　)}
JSON.stringify
直接寫data是一個json對象，若是要求data是一個json字符串，就用jSON.stringify 把對象轉成json字符串，
以前沒有加，JSON.stringify 是默認已經作了，轉成了json字符串，

contentType:"application/json"

　　　　contenType：用來指明當前請求數據的編碼格式，contentType:"application/json",一旦設定，data必須是json字符串，不能使json對象，

　　　　processData ：聲明當前的數據是否進行轉碼處理，默認是True，就是轉碼，若是不作編碼處理，當傳圖片，xml，二進制數據的時候就不須要作轉碼處理，設置爲False，

　　　　success：是回調函數，處理拿到後端或者服務器返回的數據，用參數接收，接收到的是json數據類型，因此要把接收的數據進行解析，

　　　　error：是當請求或者返回發生錯誤的時候，用，

　　　　complete：是無論正確與否，都要執行的函數

　　　　statusCode：是返回狀態碼，一個狀態碼對應一個函數，如：是404 的錯誤，就能夠執行一個函數，

2.當發送到url 參數對應的地址ajaxHandle後，就開始執行視圖函數ajaxHandle，視圖函數給出響應和判斷，最終返回到頁面，進行顯示

發送的地址是ajaxHandle視圖函數，由它執行處理請求，

{% load staticfiles %}  ----------引用靜態文件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="{% static 'bootstrap/jquery-3.2.1.js' %}"></script>

</head>
<body>

用戶名：<input type="text">

<button>Ajax提交</button>

</body>

</html>

ajax 的get請求，是input框觸發事件，包括髮生錯誤的時候，觸發error函數執行

{#    ajax的get請求#}
    $(".user").blur(function () {

        var user=$(this).val();

        ajax語法，在函數內，
        $.ajax({
            　　　　　　　　　　　　參數url 要發送到哪裏
            url:'/ajaxHandle/',
            　　　　　　　　　　　　ajax 的發送請求,不寫，是默認get請求
            type:'GET',
 　　　　　　　　　　　　　　　　　　　date 是ajax給服務端或者後端發送的數據，要用json的數據格式
            date:{"user":user},
            　　　　　　　　　　　　　回調函數，ajax發送完數據後，，就要處理後端或者服務器接收到的數據，就要用到回調函數，這就是異步，
          　　　　　　　　　　　　　　　　success 裏的date參數 就是接收到的json字符串（只有json能夠在網絡間傳輸，）,因此接收到後須要解析成js對象
           date 數據就是視圖函數傳的返回值， 
　　　　　　　success:function (date) {
                date=JSON.parse(date);
                拿到數據開始判斷，不正確，就給用戶提示下


            }，
            若是請求數據是錯誤的，或者是沒有請求到，就不必處理這些數據，觸發error函數執行
　　　　　　　　
　　　　　　error：function（jpxmlHttpresponse，textStatue,err）{
　　　　　　　　　　#請求都是xmlHTTPRequest對象來完成的,
　　　　　　　　　　#textstatue ,就是請求完成的狀態，
　　　　　　　　　　#err，底層經過throw拋出的異常對象，值與錯誤類型有關，
　　　　　　}，
　　　　　　complete是就像python的finally，try是正常執行的代碼，except 是錯誤的時候執行的代碼，finall就是無論正確錯誤都要執行的代碼，
　　　　　　
　　　　　　complete:function(jpxmlHttpresponse,textstatue){
　　　　　　
　　　　　　},

　　　　　　statusCode 是狀態碼，是哪一個狀態碼，就執行哪一個函數
　　　　　　statusCode:{
　　　　　　　"403":function(jpxmlHttpresponse,textstatus,err{
　　　　　　　　　　console.log(argument)
　　　　　　　　　　}
　　　　　　},
　　　　　　　"404":function(){
　　　　　　　　
　　　　　　　　}

        })



    })

ajax的post請求，是button觸發事件，與form表單請求同樣，都會被forbidden掉，

{#  ajax的post請求,會被forbidden .#}

    $("button").click(function () {
        $.ajax({
            url:"/ajaxHandle/",
            type:"POST",
            data:{"user":"egon"},
            success:function () {
                alert(333)
            }
        })
    })

ajax發送的請求要有視圖函數來處理ajaxHandle。

def index(request):
    # import time
    # time.sleep(5)#等待5秒，才能看到請求的結果，這是同步



    return render(request,'index.html')


def ajaxHandle(request):

    #ajaxHandle 是index  發送請求要調用的函數，因此就要判斷是那種方式的請求
    if request.method =="POST":
        obj = HttpResponse("ok")
        obj.status_code=404

        return obj

    print('ajax.....')
    #GET是發送的方法，get（）是去字典裏的值
    user = request.GET.get("user")#從頁面中request裏取出前端傳來的數據

    #user 與數據庫的數據進行判斷，
    # user.objects.filter(username=user)
    ret = {"flag":False}
    if user =="yuan":
        ret["flag"]=True



    return HttpResponse(json.dumps(ret))#HttpResponse必須返回的是一個實例

ajax的另外一種發送方式：

$.ajax("/ajaxHandle/"){ }，url是必填的

ajax的另外一種流程：

1.發送請求，

2.server接收請求，

3.server處理數據

4.server端返回響應，

5.ajax接收數據

若是5個步驟都順利進行（返回200 OK）觸發success函數執行，

def index(request):
    # import time
    # time.sleep(5)#等待5秒，才能看到請求的結果，這是同步



return render(request,'index.html')


def ajaxHandle(request):

    #ajaxHandle 是index  發送請求要調用的函數，因此就要判斷是那種方式的請求
if request.method =="POST":
        obj = HttpResponse("ok")
        obj.status_code=404

return obj

    print('ajax.....')
    #GET是發送的方法，get（）是去字典裏的值
user = request.GET.get("user")#從頁面中request裏取出前端傳來的數據

#user 與數據庫的數據進行判斷，
# user.objects.filter(username=user)
ret = {"flag":False}
    if user =="yuan":
        ret["flag"]=True



return HttpResponse(json.dumps(ret))#HttpResponse必須返回的是一個實例