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") 檢查浏覽器的請求頭：
|