一、Ajax（jQuery Ajax）
$.ajax({ url:"", method:"", data:{"":""}, // 值只能是 數字、字符串或列表(數組)，不能是字典 dataType:"JSON", // 在內部執行JSON.parse(),把數據轉化為JSON格式 traditional:true, // 提交的數據有多組的時候(values=[11, 22, 33]) success:function(arg){ // arg是后端返回的數據 xxx } }) // 傳字典解決方法--->轉化為字符串 JSON.stringify({xxx:xxx})
// 前端反序列化
JSON.parse(arg.data)
jQuery.get(...) 所有參數： url: 待載入頁面的URL地址 data: 待發送 Key/value 參數。 success: 載入成功時回調函數。 dataType: 返回內容格式，xml, json, script, text, html jQuery.post(...) 所有參數： url: 待載入頁面的URL地址 data: 待發送 Key/value 參數 success: 載入成功時回調函數 dataType: 返回內容格式，xml, json, script, text, html jQuery.getJSON(...) 所有參數： url: 待載入頁面的URL地址 data: 待發送 Key/value 參數。 success: 載入成功時回調函數。 jQuery.getScript(...) 所有參數： url: 待載入頁面的URL地址 data: 待發送 Key/value 參數。 success: 載入成功時回調函數。 jQuery.ajax(...) 部分參數： url：請求地址 type：請求方式，GET、POST（1.9.0之后用method） headers：請求頭 data：要發送的數據 contentType：即將發送信息至服務器的內容編碼類型(默認: "application/x-www-form-urlencoded; charset=UTF-8") async：是否異步 timeout：設置請求超時時間（毫秒） beforeSend：發送請求前執行的函數(全局) complete：完成之后執行的回調函數(全局) success：成功之后執行的回調函數(全局) error：失敗之后執行的回調函數(全局) accepts：通過請求頭發送給服務器，告訴服務器當前客戶端課接受的數據類型 dataType：將服務器端返回的數據轉換成指定類型 "xml": 將服務器端返回的內容轉換成xml格式 "text": 將服務器端返回的內容轉換成普通文本格式 "html": 將服務器端返回的內容轉換成普通文本格式，在插入DOM中時，如果包含JavaScript標簽，則會嘗試去執行。 "script": 嘗試將返回值當作JavaScript去執行，然后再將服務器端返回的內容轉換成普通文本格式 "json": 將服務器端返回的內容轉換成相應的JavaScript對象 "jsonp": JSONP 格式 使用 JSONP 形式調用函數時，如 "myurl?callback=?" jQuery 將自動替換 ? 為正確的函數名，以執行回調函數 如果不指定，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 converters： 轉換器，將服務器端的內容根據指定的dataType轉換類型，並傳值給success回調函數 $.ajax({ accepts: { mycustomtype: 'application/x-some-custom-type' }, // Expect a `mycustomtype` back from server dataType: 'mycustomtype' // Instructions for how to deserialize a `mycustomtype` converters: { 'text mycustomtype': function(result) { // Do Stuff return newresult; } }, });
二、原生AJAX
Ajax主要就是使用 【XmlHttpRequest】對象來完成請求的操作
XmlHttpRequest對象介紹
XmlHttpRequest對象的主要方法：
a. void open(String method,String url,Boolen async) 用於創建請求 參數： method： 請求方式（字符串類型），如：POST、GET、DELETE... url： 要請求的地址（字符串類型） async： 是否異步（布爾類型） b. void send(String body) 用於發送請求 參數： body： 要發送的數據（字符串類型） c. void setRequestHeader(String header,String value) 用於設置請求頭 參數： header： 請求頭的key（字符串類型） vlaue： 請求頭的value（字符串類型） d. String getAllResponseHeaders() 獲取所有響應頭 返回值： 響應頭數據（字符串類型） e. String getResponseHeader(String header) 獲取響應頭中指定header的值 參數： header： 響應頭的key（字符串類型） 返回值： 響應頭中指定的header對應的值 f. void abort() 終止請求
XmlHttpRequest對象的主要屬性：
a. Number readyState 狀態值（整數） 詳細： 0-未初始化，尚未調用open()方法； 1-啟動，調用了open()方法，未調用send()方法； 2-發送，已經調用了send()方法，未接收到響應； 3-接收，已經接收到部分響應數據； 4-完成，已經接收到全部響應數據； b. Function onreadystatechange 當readyState的值改變時自動觸發執行其對應的函數（回調函數） c. String responseText 服務器返回的數據（字符串類型） d. XmlDocument responseXML 服務器返回的數據（Xml對象） e. Number states 狀態碼（整數），如：200、404... f. String statesText 狀態文本（字符串），如：OK、NotFound...
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <h1>XMLHttpRequest - Ajax請求</h1> <input type="button" onclick="XmlGetRequest();" value="Get發送請求" /> <input type="button" onclick="XmlPostRequest();" value="Post發送請求" /> <script src="/statics/jquery-1.12.4.js"></script> <script type="text/javascript"> function GetXHR(){ var xhr = null; if(XMLHttpRequest){ xhr = new XMLHttpRequest(); }else{ xhr = new ActiveXObject("Microsoft.XMLHTTP"); } return xhr; } function XhrPostRequest(){ var xhr = GetXHR(); // 定義回調函數 xhr.onreadystatechange = function(){ if(xhr.readyState == 4){ // 已經接收到全部響應數據，執行以下操作 var data = xhr.responseText; console.log(data); } }; // 指定連接方式和地址----文件方式 xhr.open('POST', "/test/", true); // 設置請求頭 xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset-UTF-8'); // 發送請求 xhr.send('n1=1;n2=2;'); } function XhrGetRequest(){ var xhr = GetXHR(); // 定義回調函數 xhr.onreadystatechange = function(){ if(xhr.readyState == 4){ // 已經接收到全部響應數據，執行以下操作 var data = xhr.responseText; console.log(data); } }; // 指定連接方式和地址----文件方式 xhr.open('get', "/test/", true); // 發送請求 xhr.send(); } </script> </body> </html>
注意：自己用js寫的ajax，如果想把數據以post方式發送，以request.post方式取出來，需要加上特定的請求頭，django才會幫我們做解析
即：xxx.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset-UTF-8');
三、“偽”AJAX（iframe標簽）
由於HTML標簽的iframe標簽具有局部加載內容的特性，所以可以使用其來偽造Ajax請求。
iframe和form表單的配合，相當於form表單提供數據，iframe提供通道，提交數據時頁面不刷新，后台返回數據時在iframe上顯示。
<div> <h6>基於Iframe+Form表單</h6> <iframe id="iframe" name="ifra" onclick="reloadIframe(this)"></iframe> <form id="fm" action="/ajax1.html" method="POST" target="ifra"> //注意target和iframe的name的值要一樣 <input name="root" value="111111" /> <a onclick="AjaxSubmit5()">提交</a> </form> </div> <script> function reloadIframe(ths) { // ths=當前標簽 this=window //console.log(ths); //console.log(ths.contentWindow); //console.log(ths.contentWindow.document.body.innerHTML); //DOM方式獲取返回的數據 //console.log($(ths).contents().find('body').html()); //js方式獲取返回的數據 var content = this.contentWindow.document.body.innerHTML; var obj = JSON.parse(content); if(obj.status){ alert(obj.message); } } </script>
以上代碼有個小bug是頁面剛開始加載的時候，因為是從上到下加載的，所以當加載到' onclick="reloadIframe(this)" '時，會找不到而報個錯誤，不過不影響使用。
解決辦法
<div> <h6>基於Iframe+Form表單</h6> <iframe id="iframe" name="ifra"></iframe> <form id="fm" action="/ajax1.html" method="POST" target="ifra"> <input name="root" value="111111" /> <a onclick="AjaxSubmit5()">提交</a> </form> </div> <script> function AjaxSubmit5() { document.getElementById('iframe').onload = reloadIframe; document.getElementById('fm').submit(); } function reloadIframe() { var content = this.contentWindow.document.body.innerHTML; //this=當前標簽 var obj = JSON.parse(content); if(obj.status){ alert(obj.message); } } </script>
四、跨域AJAX
由於瀏覽器存在同源策略機制，同源策略阻止從一個源加載的文檔或腳本獲取或設置另一個源加載的文檔的屬性。
特別的：由於同源策略是瀏覽器的限制，所以請求的發送和響應是可以進行，只不過瀏覽器不接受罷了。
瀏覽器同源策略並不是對所有的請求均制約：
- 制約： XmlHttpRequest
- 不制約： img、iframe、script等具有src屬性的標簽
1、JSONP實現跨域請求
JSONP（JSONP - JSON with Padding是JSON的一種“使用模式”)，利用script標簽的src屬性（瀏覽器允許script標簽跨域）
（1）自己創建script標簽，利用src屬性發送請求后自己再刪除自己
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <p> <input type="button" onclick="Jsonp1();" value='提交'/> </p> <script type="text/javascript" src="jquery-1.12.4.js"></script> <script> function Jsonp1(){ var tag = document.createElement('script'); tag.src = "http://c2.com:8000/test/"; document.head.appendChild(tag); document.head.removeChild(tag); } </script> </body> </html>
（2）使用JSONP類型發送，原理和上面一樣，只是自動幫我們創建和刪除script標簽罷了
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <p> <input type="button" onclick="Jsonp2();" value='提交'/> </p> <script type="text/javascript" src="jquery-1.12.4.js"></script> <script> function Jsonp2(){ $.ajax({ url: "http://c2.com:8000/test/", type: 'GET', dataType: 'JSONP', success: function(data, statusText, xmlHttpRequest){ console.log(data); } }) } </script> </body> </html>
2、CORS
隨着技術的發展，現在的瀏覽器可以支持主動設置從而允許跨域請求，即：跨域資源共享（CORS，Cross-Origin Resource Sharing），其本質是設置響應頭，使得瀏覽器允許跨域請求。
簡單請求 OR 非簡單請求
條件：
1、請求方式：HEAD、GET、POST
2、請求頭信息：
Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type 對應的值是以下三個中的任意一個
application/x-www-form-urlencoded
multipart/form-data
text/plain
注意：同時滿足以上兩個條件時，則是簡單請求，否則為復雜請求
簡單請求和非簡單請求的區別？
簡單請求：一次請求
非簡單請求：兩次請求，在發送數據之前會先發一次請求用於做“預檢”，只有“預檢”通過后才再發送一次請求用於數據傳輸。
關於“預檢”
- 請求方式：OPTIONS
- “預檢”其實做檢查，檢查如果通過則允許傳輸數據，檢查不通過則不再發送真正想要發送的消息
- 如何“預檢”
=> 如果復雜請求是PUT等請求，則服務端需要設置允許某請求，否則“預檢”不通過
Access-Control-Request-Method
=> 如果復雜請求設置了請求頭，則服務端需要設置允許某請求頭，否則“預檢”不通過
Access-Control-Request-Headers
基於cors實現AJAX請求:
a、支持跨域，簡單請求
服務器設置響應頭：Access-Control-Allow-Origin = '域名' 或 '*'
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <p> <input type="submit" onclick="XmlSendRequest();" /> </p> <p> <input type="submit" onclick="JqSendRequest();" /> </p> <script type="text/javascript" src="jquery-1.12.4.js"></script> <script> function XmlSendRequest(){ var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function(){ if(xhr.readyState == 4) { var result = xhr.responseText; console.log(result); } }; xhr.open('GET', "http://c2.com:8000/test/", true); xhr.send(); } function JqSendRequest(){ $.ajax({ url: "http://c2.com:8000/test/", type: 'GET', dataType: 'text', success: function(data, statusText, xmlHttpRequest){ console.log(data); } }) } </script> </body> </html>
class MainHandler(tornado.web.RequestHandler): def get(self): self.set_header('Access-Control-Allow-Origin', "http://www.xxx.com") self.write('{"status": true, "data": "seven"}')
b、支持跨域，復雜請求
由於復雜請求時，首先會發送“預檢”請求，如果“預檢”成功，則發送真實數據。
- “預檢”請求時，允許請求方式則需服務器設置響應頭：Access-Control-Request-Method
- “預檢”請求時，允許請求頭則需服務器設置響應頭：Access-Control-Request-Headers
- “預檢”緩存時間，服務器設置響應頭：Access-Control-Max-Age
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <p> <input type="submit" onclick="XmlSendRequest();" /> </p> <p> <input type="submit" onclick="JqSendRequest();" /> </p> <script type="text/javascript" src="jquery-1.12.4.js"></script> <script> function XmlSendRequest(){ var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function(){ if(xhr.readyState == 4) { var result = xhr.responseText; console.log(result); } }; xhr.open('PUT', "http://c2.com:8000/test/", true); xhr.setRequestHeader('k1', 'v1'); xhr.send(); } function JqSendRequest(){ $.ajax({ url: "http://c2.com:8000/test/", type: 'PUT', dataType: 'text', headers: {'k1': 'v1'}, success: function(data, statusText, xmlHttpRequest){ console.log(data); } }) } </script> </body> </html>
class MainHandler(tornado.web.RequestHandler): def put(self): self.set_header('Access-Control-Allow-Origin', "http://www.xxx.com") self.write('{"status": true, "data": "seven"}') def options(self, *args, **kwargs): self.set_header('Access-Control-Allow-Origin', "http://www.xxx.com") self.set_header('Access-Control-Allow-Headers', "k1,k2") self.set_header('Access-Control-Allow-Methods', "PUT,DELETE") self.set_header('Access-Control-Max-Age', 10)
五、上傳文件
（1）基於FormData() ----> 低版本IE不兼容
jQuery方法
<h3>4.文件上傳</h3> <input type="file" id="img" /> <a class="btn" onclick="AjaxSubmit6();">上傳</a> <script> function AjaxSubmit6() { //document.getElementById('img')[0] var data = new FormData(); data.append('k1','v1'); data.append('k2','v2'); data.append('k3',document.getElementById('img').files[0]); $.ajax({ url: '/ajax1.html', type: 'POST', data:data, success:function (arg) { console.log(arg) },
// 告訴jQuery不要進行特殊處理 processData: false, // tell jQuery not to process the data contentType: false // tell jQuery not to set contentType }) } </script>
// 后端取數據 request.GET request.POST //<QueryDict: {'k1': ['v1'], 'k2': ['v2']}>------>request.POST.get('k1') import os import uuid nid = str(uuid.uuid4()) ret = {'status':True,'data':None,'message':None} obj = request.FILES.get('k3') file_path = os.path.join('static', nid+obj.name) f = open(file_path,'wb') for line in obj.chunks(): f.write(line) f.close() ret['data'] = file_path return HttpResponse(json.dumps(ret))
基於XMLHttpRequest的方法
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <input type="file" id="img" /> <input type="button" onclick="UploadFile();" /> <script> function UploadFile(){ var fileObj = document.getElementById("img").files[0]; var form = new FormData(); form.append("k1", "v1"); form.append("fff", fileObj); var xhr = new XMLHttpRequest(); xhr.open("post", '/index', true); xhr.send(form); } </script> </body> </html>
（2）Iframe + Form
<iframe style="display: none" id="iframe1" name="ifra1"></iframe> <form id="fm1" action="/ajax1.html" method="POST" enctype="multipart/form-data" target="ifra1"> <input type="text" name="k1" /> <input type="text" name="k2" /> <input type="file" name="k3" /> <a onclick="AjaxSubmit8()">提交</a> </form> <script> function AjaxSubmit8() { document.getElementById('iframe1').onload = reloadIframe1; //綁定方法 document.getElementById('fm1').submit(); } function reloadIframe1() { var content = this.contentWindow.document.body.innerHTML; var obj = JSON.parse(content); console.log(obj); } </script>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .btn{ display: inline-block; padding: 5px 10px; background-color: coral; color: white; } </style> </head> <body> <iframe style="display: none" id="iframe1" name="ifra1"></iframe> <form id="fm1" action="/upload_img.html" method="POST" enctype="multipart/form-data" target="ifra1"> <input type="file" name="k3" onchange="uploadFile();" /> </form> <h3>預覽</h3> <div id="preview"> </div> <script src="/static/js/jquery-3.1.1.js"></script> <script> function uploadFile() { document.getElementById('iframe1').onload = reloadIframe1; document.getElementById('fm1').submit(); } function reloadIframe1() { var content = this.contentWindow.document.body.innerHTML; var obj = JSON.parse(content); var tag = document.createElement('img'); tag.src = obj.data; $('#preview').empty().append(tag); } </script> </body> </html>