一、什么是Ajax？
ajax全稱為Asynchronous JavaScript and XML (異步的JavaScript和XML)，是一種創建交互式網頁應用的網頁開發技術方案，它的出現使得傳統的web應用程序，從一次請求得到完整的被渲染后的網頁文件 到 網頁局部刷新的一次改變。
tips:ajax的產生是由於用戶的操作而偷偷進行的 客戶端與服務器交互數據的行為
XML是一種標記語言，是數據交互以及傳輸一種格式，近幾年比較火的還有json;
二、Ajax的應用：
1.用戶上傳頭像的預覽功能；
2.注冊，驗證登錄操作，比如用戶名是否重復、登錄密碼是否錯誤等等；
3.主機管理系統中的編輯功能，例如刪除某一行主機信息，會偷偷執行刪除數據庫相關操作，並刪除該頁上的數據Dom；
4.熱點新聞的刷新、鼠標滾動刷新等；
5.等等；
三：原生Ajax:
Ajax的實現依賴於XmlHttpRequest（主流）以及ActiveXObject（IE6及以下版本）
1 a. void open(String method,String url,Boolen async) 2 用於創建請求 3 4 參數： 5 method： 請求方式（字符串類型），如：POST、GET、DELETE... 6 url： 要請求的地址（字符串類型） 7 async： 是否異步（布爾類型） 8 9 b. void send(String body) 10 用於發送請求 11 12 參數： 13 body： 要發送的數據（字符串類型） 14 15 c. void setRequestHeader(String header,String value) 16 用於設置請求頭 17 18 參數： 19 header： 請求頭的key（字符串類型） 20 vlaue： 請求頭的value（字符串類型） 21 22 d. String getAllResponseHeaders() 23 獲取所有響應頭 24 25 返回值： 26 響應頭數據（字符串類型） 27 28 e. String getResponseHeader(String header) 29 獲取響應頭中指定header的值 30 31 參數： 32 header： 響應頭的key（字符串類型） 33 返回值： 34 響應頭中指定的header對應的值 35 36 f. void abort() 37 38 終止請求
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>index</title> 6 </head> 7 <body> 8 <input onclick="ajaxtest();" type="button" value="ajax測試"> 9 <form method="post" action="/index/" target="ifm"> 10 <iframe src="" name="ifm"></iframe> 11 <input type="url" name="url"> 12 <input type="submit" value="提交"> 13 </form> 14 {% load staticfiles %} 15 <script src="{% static "jquery-1.12.4.js" %}"></script> 16 <script src="{% static "jquery.cookie.js" %}"></script> 17 <script> 18 //獲取XHR對象 19 function getXHR(){ 20 var xhr; 21 //兼容操作 22 if(window.XMLHttpRequest){ 23 xhr = new XMLHttpRequest(); 24 } 25 else{ 26 xhr = new ActiveXObject("Microsoft.XMLHTTP"); 27 } 28 return xhr; 29 } 30 //ajax post操作 31 function ajaxtest(){ 32 var xhr = getXHR(); 33 xhr.onreadystatechange = function() { 34 if (xhr.readyState == 4) { 35 //將獲取到的數據反序列化為 36 var obj = JSON.parse(xhr.responseText); 37 console.log(obj); 38 } 39 } 40 xhr.open("POST", "/index/", true) 41 // 如果使用原生的ajax進行post操作，就需要設置以下請求頭 42 xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset-UTF-8'); 43 xhr.send(JSON.stringify("action:ajax; ")); 44 } 45 </script> 46 </body> 47 </html>
四：JQuery封裝的ajax：
JQuery封裝后的ajax的可讀性變得更好，以key-value的方式封裝ajax的傳輸自指定的參數以及數據；
1 jQuery.get(...) 2 所有參數： 3 url: 待載入頁面的URL地址 4 data: 待發送 Key/value 參數。 5 success: 載入成功時回調函數。 6 dataType: 返回內容格式，xml, json, script, text, html 7 8 9 jQuery.post(...) 10 所有參數： 11 url: 待載入頁面的URL地址 12 data: 待發送 Key/value 參數 13 success: 載入成功時回調函數 14 dataType: 返回內容格式，xml, json, script, text, html 15 16 17 jQuery.getJSON(...) 18 所有參數： 19 url: 待載入頁面的URL地址 20 data: 待發送 Key/value 參數。 21 success: 載入成功時回調函數。 22 23 24 jQuery.getScript(...) 25 所有參數： 26 url: 待載入頁面的URL地址 27 data: 待發送 Key/value 參數。 28 success: 載入成功時回調函數。 29 jQuery.ajax(...) 30 31 部分參數： 32 33 url：請求地址 34 type：請求方式，GET、POST（1.9.0之后用method） 35 headers：請求頭 36 data：要發送的數據 37 contentType：即將發送信息至服務器的內容編碼類型(默認: "application/x-www-form-urlencoded; charset=UTF-8") 38 async：是否異步 39 timeout：設置請求超時時間（毫秒） 40 41 beforeSend：發送請求前執行的函數(全局) 42 complete：完成之后執行的回調函數(全局) 43 success：成功之后執行的回調函數(全局) 44 error：失敗之后執行的回調函數(全局) 45 46 47 accepts：通過請求頭發送給服務器，告訴服務器當前客戶端課接受的數據類型 48 dataType：將服務器端返回的數據轉換成指定類型 49 "xml": 將服務器端返回的內容轉換成xml格式 50 "text": 將服務器端返回的內容轉換成普通文本格式 51 "html": 將服務器端返回的內容轉換成普通文本格式，在插入DOM中時，如果包含JavaScript標簽，則會嘗試去執行。 52 "script": 嘗試將返回值當作JavaScript去執行，然后再將服務器端返回的內容轉換成普通文本格式 53 "json": 將服務器端返回的內容轉換成相應的JavaScript對象 54 "jsonp": JSONP 格式 55 使用 JSONP 形式調用函數時，如 "myurl?callback=?" jQuery 將自動替換 ? 為正確的函數名，以執行回調函數 56 57 如果不指定，jQuery 將自動根據HTTP包MIME信息返回相應類型(an XML MIME type will yield XML, in 1.4 JSON will yield a JavaScript object, in 1.4 script will execute the script, and anything else will be returned as a string 58 59 converters： 轉換器，將服務器端的內容根據指定的dataType轉換類型，並傳值給success回調函數 60 $.ajax({ 61 accepts: { 62 mycustomtype: 'application/x-some-custom-type' 63 }, 64 65 // Expect a `mycustomtype` back from server 66 dataType: 'mycustomtype' 67 68 // Instructions for how to deserialize a `mycustomtype` 69 converters: { 70 'text mycustomtype': function(result) { 71 // Do Stuff 72 return newresult; 73 } 74 }, 75 });
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 9 <p> 10 <input type="button" onclick="XmlSendRequest();" value='Ajax請求' /> 11 </p> 12 13 14 <script type="text/javascript" src="jquery-1.12.4.js"></script> 15 <script> 16 function JqSendRequest(){ 17 $.ajax({ 18 url: "/test/", 19 type: 'GET', 20 dataType: 'text', 21 success: function(data, statusText, xmlHttpRequest){ 22 console.log(data); 23 } 24 }) 25 } 26 </script> 27 </body> 28 </html>
五、“偽”Ajax操作：
iframe標記具有嵌套HTML對象的特性，簡單地說，就是iframe能夠在標簽內部加載HTML頁面的特性，好像是偷偷進行了ajax操作；
1 <form method="post" action="/index/" target="ifm"> 2 <iframe src="" name="ifm"></iframe> 3 <input type="url" name="url"> 4 <input type="submit" value="提交"> 5 </form>
def index(request, *args, **kwargs): if request.method == "GET": return render(request, "index.html") elif request.method == "POST": ret = {"state": request.POST.get("url", None)}; print(ret) return HttpResponse(json.dumps(ret))
其實，諸多網站上的頭像預覽功能就是利用了這一特性；
具體過程：
1. form內部的文件上傳，如果采用的是ajax方式提交，需依賴於 new FormData(form-obj) 這一對象（為了方便將該對象命為A）；
2.發送A.get("file-select") 到服務器；
3.服務器獲取數據，並通過file-obj.chunks存儲文件內容，並返回dumps后的json數據（包含服務器暫存文件的url）
4.iframeDocument = iframe.contentWindow.document;
5.后續對iframe標簽提取url；