---------------------------------------------------------------遇到困難的時候,勇敢一點,找同學朋友幫忙,找導師求助.

Ajax

Ajax簡介

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

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

AJAX除了非同步的特點外，還有一個就是：瀏覽器頁面區域性重新整理；（這一特點給使用者的感受是在不知不覺中完成請求和響應過程）

場景：

優點：

• AJAX使用Javascript技術向伺服器傳送非同步請求
• AJAX無須重新整理整個頁面

基於jquery的Ajax實現

<button class="send_Ajax">send_Ajax</button>
<script>

       $(".send_Ajax").click(function(){

           $.ajax({
               url:"/handle_Ajax/",
               type:"POST",
               data:{username:"Yuan",password:123},
               success:function(data){
                   console.log(data)
               },
         　　　　　　
               error: function (jqXHR, textStatus, err) {
                        console.log(arguments);
                    },

               complete: function (jqXHR, textStatus) {
                        console.log(textStatus);
                },

               statusCode: {
                    '403': function (jqXHR, textStatus, err) {
                          console.log(arguments);
                     },

                    '400': function (jqXHR, textStatus, err) {
                        console.log(arguments);
                    }
                }

           })

       })

</script>

Ajax－伺服器－Ajax流程圖

略

案例

1 使用者名稱是否已被註冊

在登錄檔單中，當用戶填寫了使用者名稱後，把游標移開後，會自動向伺服器傳送非同步請求。伺服器返回true或false，返回true表示這個使用者名稱已經被註冊過，返回false表示沒有註冊過。客戶端得到伺服器返回的結果後，確定是否在使用者名稱文字框後顯示“使用者名稱已被註冊”的錯誤資訊！

2 基於Ajax進行登入驗證 

使用者在表單輸入使用者名稱與密碼，通過Ajax提交給伺服器，伺服器驗證後返回響應資訊，客戶端通過響應資訊確定是否登入成功，成功，則跳轉到首頁，否則，在頁面上顯示相應的錯誤資訊。

檔案上傳

請求頭ContentType

ContentType指的是請求體的編碼型別，常見的型別共有3種：

1 application/x-www-form-urlencoded

這應該是最常見的 POST 提交資料的方式了。瀏覽器的原生 <form> 表單，如果不設定 enctype 屬性，那麼最終就會以 application/x-www-form-urlencoded 方式提交資料。請求類似於下面這樣（無關的請求頭在本文中都省略掉了）：

POST http://www.example.com HTTP/1.1
Content-Type: application/x-www-form-urlencoded;charset=utf-8

user=yuan&age=22

2 multipart/form-data

這又是一個常見的 POST 資料提交的方式。我們使用表單上傳檔案時，必須讓 <form> 表單的 enctype 等於 multipart/form-data。直接來看一個請求示例：

POST http://www.example.com HTTP/1.1
Content-Type:multipart/form-data; boundary=----WebKitFormBoundaryrGKCBY7qhFd3TrwA

------WebKitFormBoundaryrGKCBY7qhFd3TrwA
Content-Disposition: form-data; name="user"

yuan
------WebKitFormBoundaryrGKCBY7qhFd3TrwA
Content-Disposition: form-data; name="file"; filename="chrome.png"
Content-Type: image/png

PNG ... content of chrome.png ...
------WebKitFormBoundaryrGKCBY7qhFd3TrwA--

這個例子稍微複雜點。首先生成了一個 boundary 用於分割不同的欄位，為了避免與正文內容重複，boundary 很長很複雜。然後 Content-Type 裡指明瞭資料是以 multipart/form-data 來編碼，本次請求的 boundary 是什麼內容。訊息主體裡按照欄位個數又分為多個結構類似的部分，每部分都是以 --boundary 開始，緊接著是內容描述資訊，然後是回車，最後是欄位具體內容（文字或二進位制）。如果傳輸的是檔案，還要包含檔名和檔案型別資訊。訊息主體最後以 --boundary-- 標示結束。關於 multipart/form-data 的詳細定義，請前往 rfc1867 檢視。

這種方式一般用來上傳檔案，各大服務端語言對它也有著良好的支援。

上面提到的這兩種 POST 資料的方式，都是瀏覽器原生支援的，而且現階段標準中原生 <form> 表單也只支援這兩種方式（通過 <form> 元素的 enctype 屬性指定，預設為 application/x-www-form-urlencoded。其實 enctype 還支援 text/plain，不過用得非常少）。

隨著越來越多的 Web 站點，尤其是 WebApp，全部使用 Ajax 進行資料互動之後，我們完全可以定義新的資料提交方式，給開發帶來更多便利。

3 application/json

application/json 這個 Content-Type 作為響應頭大家肯定不陌生。實際上，現在越來越多的人把它作為請求頭，用來告訴服務端訊息主體是序列化後的 JSON 字串。由於 JSON 規範的流行，除了低版本 IE 之外的各大瀏覽器都原生支援 JSON.stringify，服務端語言也都有處理 JSON 的函式，使用 JSON 不會遇上什麼麻煩。

JSON 格式支援比鍵值對複雜得多的結構化資料，這一點也很有用。記得我幾年前做一個專案時，需要提交的資料層次非常深，我就是把資料 JSON 序列化之後來提交的。不過當時我是把 JSON 字串作為 val，仍然放在鍵值對裡，以 x-www-form-urlencoded 方式提交。

基於form表單的檔案上傳 

模板部分

<form action="" method="post" enctype="multipart/form-data">
      使用者名稱 <input type="text" name="user">
      頭像 <input type="file" name="avatar">
    <input type="submit">
</form>

檢視部分

def index(request):
    print(request.body)   # 原始的請求體資料
    print(request.GET)    # GET請求資料
    print(request.POST)   # POST請求資料
    print(request.FILES)  # 上傳的檔案資料


    return render(request,"index.html")

基於Ajax的檔案上傳

模板

<form>
      使用者名稱 <input type="text" id="user">
      頭像 <input type="file" id="avatar">
     <input type="button" id="ajax-submit" value="ajax-submit">
</form>

<script>

    $("#ajax-submit").click(function(){
        var formdata=new FormData();
        formdata.append("user",$("#user").val());
        formdata.append("avatar_img",$("#avatar")[0].files[0]);
        $.ajax({

            url:"",
            type:"post",
            data:formdata,
            processData: false ,    // 不處理資料
            contentType: false,    // 不設定內容型別

            success:function(data){
                console.log(data)
            }
        })

    })

</script>

檢視

def index(request):

    if request.is_ajax():

        print(request.body)   # 原始的請求體資料
        print(request.GET)    # GET請求資料
        print(request.POST)   # POST請求資料
        print(request.FILES)  # 上傳的檔案資料

        return HttpResponse("ok")


    return render(request,"index.html")

檢查瀏覽器的請求頭：