Python自动化运维之25、Ajax
生活随笔
收集整理的這篇文章主要介紹了
Python自动化运维之25、Ajax
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
一、概述
對于WEB應用程序：用戶瀏覽器發送請求，服務器接收并處理請求，然后返回結果，往往返回就是字符串（HTML），瀏覽器將字符串（HTML）渲染并顯示瀏覽器上。
通過在后臺與服務器進行少量數據交換，AJAX 可以使網頁實現異步更新。這意味著可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。傳統的網頁（不使用 AJAX）如果需要更新內容，必須重載整個網頁頁面。
1、傳統的Web應用
一個簡單操作需要重新加載全局數據
2、AJAX
AJAX，Asynchronous JavaScript and XML (異步的JavaScript和XML)，一種創建交互式網頁應用的網頁開發技術方案。
- 異步的JavaScript：
使用 【JavaScript語言】 以及 相關【瀏覽器提供類庫】 的功能向服務端發送請求，當服務端處理完請求之后，【自動執行某個JavaScript的回調函數】。
PS：以上請求和響應的整個過程是【偷偷】進行的，頁面上無任何感知。 - XML
XML是一種標記語言，是Ajax在和后臺交互時傳輸數據的格式之一，此外還有jsonp格式
利用AJAX可以做：
1、注冊時，輸入用戶名自動檢測用戶是否已經存在。
2、登陸時，提示用戶名密碼錯誤
3、刪除數據行時，將行ID發送到后臺，后臺在數據庫中刪除，數據庫刪除成功后，在頁面DOM中將數據行也刪除。（博客園）
二、“偽”AJAX
由于HTML標簽的iframe標簽具有局部加載內容的特性，所以可以使用其來偽造Ajax請求。
<!DOCTYPE html> <html><head lang="en"><meta charset="UTF-8"><title></title></head><body><div><p>請輸入要加載的地址：<span id="currentTime"></span></p><p><input id="url" type="text" /><input type="button" value="刷新" οnclick="LoadPage();"></p></div><div><h3>加載頁面位置：</h3><iframe id="iframePosition" style="width: 100%;height: 500px;"></iframe></div><script type="text/javascript">window.οnlοad= function(){var myDate = new Date();document.getElementById('currentTime').innerText = myDate.getTime();};function LoadPage(){var targetUrl = document.getElementById('url').value;document.getElementById("iframePosition").src = targetUrl;}</script></body> </html>三、原生AJAX
Ajax主要就是使用 【XmlHttpRequest】對象來完成請求的操作，該對象在主流瀏覽器中均存在(除早起的IE)，Ajax首次出現IE5.5中存在（ActiveX控件）。
1、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...2、跨瀏覽器支持
- XmlHttpRequest(IE7+, Firefox, Chrome, Opera, etc.)
- ActiveXObject("Microsoft.XMLHTTP")?IE6, IE5
四、JQuery Ajax
jQuery其實就是一個JavaScript的類庫，其將復雜的功能做了上層封裝，使得開發者可以在其基礎上寫更少的代碼實現更多的功能。
- jQuery 不是生產者，而是大自然搬運工。
- jQuery Ajax本質 XMLHttpRequest 或 ActiveXObject?
注：2.+版本不再支持IE9以下的瀏覽器
jQuery.get(...)所有參數：url: 待載入頁面的URL地址data: 待發送 Key/value 參數。 success: 載入成功時回調函數。dataType: 返回內容格式，xml, json, script, text, htmljQuery.post(...)所有參數：url: 待載入頁面的URL地址data: 待發送 Key/value 參數 success: 載入成功時回調函數dataType: 返回內容格式，xml, json, script, text, htmljQuery.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 stringconverters： 轉換器，將服務器端的內容根據指定的dataType轉換類型，并傳值給success回調函數$.ajax({accepts: {mycustomtype: 'application/x-some-custom-type'},// Expect a `mycustomtype` back from serverdataType: 'mycustomtype'// Instructions for how to deserialize a `mycustomtype` converters: {'text mycustomtype': function(result) {// Do Stuffreturn newresult;}},}); <!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8"><title></title> </head> <body><p><input type="button" οnclick="XmlSendRequest();" value='Ajax請求' /></p><script type="text/javascript" src="jquery-1.12.4.js"></script><script>function JqSendRequest(){$.ajax({url: "http://c2.com:8000/test/",type: 'GET',dataType: 'text',success: function(data, statusText, xmlHttpRequest){console.log(data);}})}</script> </body> </html> 基于jQueryAjax - Demo五、跨域AJAX
由于瀏覽器存在同源策略機制，同源策略阻止從一個源加載的文檔或腳本獲取或設置另一個源加載的文檔的屬性。
特別的：由于同源策略是瀏覽器的限制，所以請求的發送和響應是可以進行，只不過瀏覽器不接受罷了。
瀏覽器同源策略并不是對所有的請求均制約：
- 制約：?XmlHttpRequest
- 不叼：?img、iframe、script等具有src屬性的標簽
跨域，跨域名訪問，如：http://www.c1.com 域名向 http://www.c2.com域名發送請求。
1、JSONP實現跨域請求
JSONP（JSONP - JSON with Padding是JSON的一種“使用模式”)，利用script標簽的src屬性（瀏覽器允許script標簽跨域）
<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8"><title></title> </head> <body><p><input type="button" οnclick="Jsonp1();" value='提交'/></p><p><input type="button" οnclick="Jsonp2();" 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);}function Jsonp2(){$.ajax({url: "http://c2.com:8000/test/",type: 'GET',dataType: 'JSONP',success: function(data, statusText, xmlHttpRequest){console.log(data);}})}</script> </body> </html> 基于JSONP實現跨域Ajax - Demo2、CORS
隨著技術的發展，現在的瀏覽器可以支持主動設置從而允許跨域請求，即：跨域資源共享（CORS，Cross-Origin Resource Sharing），其本質是設置響應頭，使得瀏覽器允許跨域請求。
* 簡單請求 OR 非簡單請求
條件：1、請求方式：HEAD、GET、POST2、請求頭信息：AcceptAccept-LanguageContent-LanguageLast-Event-IDContent-Type 對應的值是以下三個中的任意一個application/x-www-form-urlencodedmultipart/form-datatext/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" οnclick="XmlSendRequest();" /></p><p><input type="submit" οnclick="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> 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"}') torandob、支持跨域，復雜請求
由于復雜請求時，首先會發送“預檢”請求，如果“預檢”成功，則發送真實數據。
- “預檢”請求時，允許請求方式則需服務器設置響應頭：Access-Control-Request-Method
- “預檢”請求時，允許請求頭則需服務器設置響應頭：Access-Control-Request-Headers
- “預檢”緩存時間，服務器設置響應頭：Access-Control-Max-Age
c、跨域獲取響應頭
默認獲取到的所有響應頭只有基本信息，如果想要獲取自定義的響應頭，則需要再服務器端設置Access-Control-Expose-Headers。
<!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);// 獲取響應頭 console.log(xhr.getAllResponseHeaders());}};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);// 獲取響應頭 console.log(xmlHttpRequest.getAllResponseHeaders());}})}</script> </body> </html> HTML class MainHandler(tornado.web.RequestHandler):def put(self):self.set_header('Access-Control-Allow-Origin', "http://www.xxx.com")self.set_header('xxoo', "seven")self.set_header('bili', "daobidao")self.set_header('Access-Control-Expose-Headers', "xxoo,bili")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) torandod、跨域傳輸cookie
在跨域請求中，默認情況下，HTTP Authentication信息，Cookie頭以及用戶的SSL證書無論在預檢請求中或是在實際請求都是不會被發送。
如果想要發送：
- 瀏覽器端：XMLHttpRequest的withCredentials為true
- 服務器端：Access-Control-Allow-Credentials為true
- 注意：服務器端響應的?Access-Control-Allow-Origin 不能是通配符 *
六、實例
本地域名請求實例：基本可以解決（學到django回來看）
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>ajax請求</title> </head> <body><div><p>用戶名:<input type="text" id="username"/></p></div><div><p>密碼:<input type="password" id="pwd"/></p></div><input type="button" value="提交" οnclick="SubmitForm();"/><script src="/static/jquery-1.12.4.js"></script><script>function SubmitForm() {$.ajax({url:'/web/',type:'POST',data:{'user':$('#username').val(),'pwd':$('#pwd').val()},dataType:'json',success:function (data) {// data = 字符串 '{'status':xxx,'message':xxx}'// var data_dict = JSON.parse(data) 將字符串格式的字典轉換為字典// 如果上面一步沒寫，則需要寫dataType:'json',if(data.status){location.href = 'http://www.baidu.com';}else{alert(data.message);}}})}</script> </body> </html> ajax_demo.html from django.conf.urls import url,include from django.contrib import admin from ajax import viewsurlpatterns = [url(r'^admin/', admin.site.urls),url(r'^web/', views.ajax_demo), ] urls from django.shortcuts import render,HttpResponse,redirectimport jsondef ajax_demo(request):if request.method == 'POST':ret = {'status':False,'message':''}user = request.POST.get('user',None)pwd = request.POST.get('pwd',None)if user == 'tom' and pwd == '123':ret['status'] = Truereturn HttpResponse(json.dumps(ret))else:ret['message'] = '用戶名或密碼錯誤'return HttpResponse(json.dumps(ret))return render(request,'ajax_demo.html') views兩個跨域實例：
1獲取電視臺的節目
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>AJAX跨域</title> </head> <body><input type="button" value="獲取節目" οnclick="SubmitData()"/><div class="container"></div><script src="../jquery-1.12.4.js"></script><script>function SubmitData() {$.ajax({url:'http://www.jxntv.cn/data/jmd-jxtv2.html?callback=list',data:{},type:'GET',dataType:'jsonp',jsonp:'callback', // callback是固定寫法jsonpCallback: 'list', // list是要么是自定義要么是服務器端一致success:function (arg) {// 當請求執行完成之后,自動調用// arg,服務器返回的數據console.log(arg);var jsonpArray = arg.data;$.each(jsonpArray,function (k, v) {// k,下標索引// v,數組值console.log(v);var week = v.week;var temp = "<h1>" + week + "</h1>";$('.container').append(temp);var listArray = v.list;$.each(listArray,function (kk,vv) {var link = vv.link;var name = vv.name;var tempNew = "<a target='_blank' href='" + link + "'>" + name + "</a><br/>";$('.container').append(tempNew);})})},error:function () {// 當請求錯誤之后,自動調用}})}</script> </body> </html>2獲取城市的天氣
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>AJAX跨域</title> </head> <body><input type="button" value="獲取天氣" οnclick="SubmitData()"/><div class="container"></div><script src="../jquery-1.12.4.js"></script><script>function SubmitData() {$.ajax({url:'http://wthrcdn.etouch.cn/weather_mini?city=%E6%B7%B1%E5%9C%B3',data:{},type:'GET',success:function (arg) {// 當請求執行完成之后,自動調用// arg,服務器返回的數據console.log(typeof arg);var new_arg = JSON.parse(arg);console.log(new_arg);$.each(new_arg,function (k,v) {console.log(v.forecast);var listarry = v.forecast;$.each(listarry,function (k, v) {console.log(v);var da = v.date;console.log(da);var ty = v.type;var lo = v.low;var hi = v.high;var fengli = v.fengli;var tag = "<p>" + da + ty + lo + hi + fengli + "</p>";$(".container").append(tag);})});},error:function () {// 當請求錯誤之后,自動調用}})}</script> </body> </html>
?
轉載于:https://www.cnblogs.com/xiaozhiqi/p/5843998.html
總結
以上是生活随笔為你收集整理的Python自动化运维之25、Ajax的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： SpringMVC-HelloWorld
- 下一篇： Android UI控件----Expa