python第一百一十八天---ajax--圖片驗證碼 + Session
阿新 • • 發佈：2017-09-01
console lte 狀態 狀態碼 創建 ins .py 上層 成功 
原生AJAX
Ajax主要就是使用 【XmlHttpRequest】對象來完成請求的操作，該對象在主流瀏覽器中均存在(除早起的IE)，Ajax首次出現IE5.5中存在（ActiveX控件）。
1、XmlHttpRequest對象介紹
XmlHttpRequest對象的主要方法：
1 XmlHttpRequest對象的主要方法： 2 a. void open(String method,String url,Boolen async) 3 用於創建請求 4 5 參數： 6 method： 請求方式（字符串類型），如：POST、GET、DELETE...7 url： 要請求的地址（字符串類型） 8 async： 是否異步（布爾類型） 9 10 b. void send(String body) 11 用於發送請求 12 13 參數： 14 body： 要發送的數據（字符串類型） 15 16 c. void setRequestHeader(String header,String value) 17 用於設置請求頭 18 19 參數： 20 header： 請求頭的key（字符串類型） 21 vlaue： 請求頭的value（字符串類型）22 23 d. String getAllResponseHeaders() 24 獲取所有響應頭 25 26 返回值： 27 響應頭數據（字符串類型） 28 29 e. String getResponseHeader(String header) 30 獲取響應頭中指定header的值 31 32 參數： 33 header： 響應頭的key（字符串類型） 34 35 返回值： 36 響應頭中指定的header對應的值 37 38 f. void abort() 39 40 終止請求
XmlHttpRequest對象的主要屬性：
1 a. Number readyState 2 狀態值（整數） 3 4 詳細： 5 0-未初始化，尚未調用open()方法； 6 1-啟動，調用了open()方法，未調用send()方法； 7 2-發送，已經調用了send()方法，未接收到響應； 8 3-接收，已經接收到部分響應數據； 9 4-完成，已經接收到全部響應數據； 10 11 b. Function onreadystatechange 12 當readyState的值改變時自動觸發執行其對應的函數（回調函數） 13 14 c. String responseText 15 服務器返回的數據（字符串類型） 16 17 d. XmlDocument responseXML 18 服務器返回的數據（Xml對象） 19 20 e. Number states 21 狀態碼（整數），如：200、404... 22 23 f. String statesText 24 狀態文本（字符串），如：OK、NotFound...View Code
2、跨瀏覽器支持
XmlHttpRequest
IE7+, Firefox, Chrome, Opera, etc.
ActiveXObject("Microsoft.XMLHTTP")
IE6, IE5
基於原生AJAX - Demo
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 9 <h1>XMLHttpRequest - Ajax請求</h1> 10 <input type="button" onclick="XmlGetRequest();" value="Get發送請求" /> 11 <input type="button" onclick="XmlPostRequest();" value="Post發送請求" /> 12 13 <script src="/statics/jquery-1.12.4.js"></script> 14 <script type="text/javascript"> 15 16 function GetXHR(){ 17 var xhr = null; 18 if(XMLHttpRequest){ 19 xhr = new XMLHttpRequest(); 20 }else{ 21 xhr = new ActiveXObject("Microsoft.XMLHTTP"); 22 } 23 return xhr; 24 25 } 26 27 function XhrPostRequest(){ 28 var xhr = GetXHR(); 29 // 定義回調函數 30 xhr.onreadystatechange = function(){ 31 if(xhr.readyState == 4){ 32 // 已經接收到全部響應數據，執行以下操作 33 var data = xhr.responseText; 34 console.log(data); 35 } 36 }; 37 // 指定連接方式和地址----文件方式 38 xhr.open(‘POST‘, "/test/", true); 39 // 設置請求頭 40 xhr.setRequestHeader(‘Content-Type‘, ‘application/x-www-form-urlencoded; charset-UTF-8‘); 41 // 發送請求 42 xhr.send(‘n1=1;n2=2;‘); 43 } 44 45 function XhrGetRequest(){ 46 var xhr = GetXHR(); 47 // 定義回調函數 48 xhr.onreadystatechange = function(){ 49 if(xhr.readyState == 4){ 50 // 已經接收到全部響應數據，執行以下操作 51 var data = xhr.responseText; 52 console.log(data); 53 } 54 }; 55 // 指定連接方式和地址----文件方式 56 xhr.open(‘get‘, "/test/", true); 57 // 發送請求 58 xhr.send(); 59 } 60 61 </script> 62 63 </body> 64 </html>View Code
jQuery Ajax
jQuery其實就是一個JavaScript的類庫，其將復雜的功能做了上層封裝，使得開發者可以在其基礎上寫更少的代碼實現更多的功能。
jQuery 不是生產者，而是大自然搬運工。
jQuery Ajax本質 XMLHttpRequest 或 ActiveXObject
註：2.+版本不再支持IE9以下的瀏覽器
1 jQuery Ajax 方法列表 2 jQuery.get(...) 3 所有參數： 4 url: 待載入頁面的URL地址 5 data: 待發送 Key/value 參數。 6 success: 載入成功時回調函數。 7 dataType: 返回內容格式，xml, json, script, text, html 8 9 10 jQuery.post(...) 11 所有參數： 12 url: 待載入頁面的URL地址 13 data: 待發送 Key/value 參數 14 success: 載入成功時回調函數 15 dataType: 返回內容格式，xml, json, script, text, html 16 17 18 jQuery.getJSON(...) 19 所有參數： 20 url: 待載入頁面的URL地址 21 data: 待發送 Key/value 參數。 22 success: 載入成功時回調函數。 23 24 25 jQuery.getScript(...) 26 所有參數： 27 url: 待載入頁面的URL地址 28 data: 待發送 Key/value 參數。 29 success: 載入成功時回調函數。 30 31 32 jQuery.ajax(...) 33 34 部分參數： 35 36 url：請求地址 37 type：請求方式，GET、POST（1.9.0之後用method） 38 headers：請求頭 39 data：要發送的數據 40 contentType：即將發送信息至服務器的內容編碼類型(默認: "application/x-www-form-urlencoded; charset=UTF-8") 41 async：是否異步 42 timeout：設置請求超時時間（毫秒） 43 44 beforeSend：發送請求前執行的函數(全局) 45 complete：完成之後執行的回調函數(全局) 46 success：成功之後執行的回調函數(全局) 47 error：失敗之後執行的回調函數(全局) 48 49 50 accepts：通過請求頭發送給服務器，告訴服務器當前客戶端課接受的數據類型 51 dataType：將服務器端返回的數據轉換成指定類型 52 "xml": 將服務器端返回的內容轉換成xml格式 53 "text": 將服務器端返回的內容轉換成普通文本格式 54 "html": 將服務器端返回的內容轉換成普通文本格式，在插入DOM中時，如果包含JavaScript標簽，則會嘗試去執行。 55 "script": 嘗試將返回值當作JavaScript去執行，然後再將服務器端返回的內容轉換成普通文本格式 56 "json": 將服務器端返回的內容轉換成相應的JavaScript對象 57 "jsonp": JSONP 格式 58 使用 JSONP 形式調用函數時，如 "myurl?callback=?" jQuery 將自動替換 ? 為正確的函數名，以執行回調函數 59 60 如果不指定，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 61 62 converters： 轉換器，將服務器端的內容根據指定的dataType轉換類型，並傳值給success回調函數 63 $.ajax({ 64 accepts: { 65 mycustomtype: ‘application/x-some-custom-type‘ 66 }, 67 68 // Expect a `mycustomtype` back from server 69 dataType: ‘mycustomtype‘ 70 71 // Instructions for how to deserialize a `mycustomtype` 72 converters: { 73 ‘text mycustomtype‘: function(result) { 74 // Do Stuff 75 return newresult; 76 } 77 }, 78 });View Code
基於jQueryAjax - Demo
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 17 function JqSendRequest(){ 18 $.ajax({ 19 url: "http://c2.com:8000/test/", 20 type: ‘GET‘, 21 dataType: ‘text‘, 22 success: function(data, statusText, xmlHttpRequest){ 23 console.log(data); 24 } 25 }) 26 } 27 28 29 </script> 30 </body> 31 </html>View Code
圖片驗證碼 + Session
check_code.py
1 #!/usr/bin/env python 2 # -*- coding:utf-8 -*- 3 4 import random 5 from PIL import Image, ImageDraw, ImageFont, ImageFilter 6 7 _letter_cases = "abcdefghjkmnpqrstuvwxy" # 小寫字母，去除可能幹擾的i，l，o，z 8 _upper_cases = _letter_cases.upper() # 大寫字母 9 _numbers = ‘‘.join(map(str, range(3, 10))) # 數字 10 init_chars = ‘‘.join((_letter_cases, _upper_cases, _numbers)) 11 12 13 def create_validate_code(size=(120, 30), 14 chars=init_chars, 15 img_type="GIF", 16 mode="RGB", 17 bg_color=(255, 255, 255), 18 fg_color=(0, 0, 255), 19 font_size=18, 20 font_type="Monaco.ttf", 21 length=4, 22 draw_lines=True, 23 n_line=(1, 2), 24 draw_points=True, 25 point_chance=2): 26 """ 27 @todo: 生成驗證碼圖片 28 @param size: 圖片的大小，格式（寬，高），默認為(120, 30) 29 @param chars: 允許的字符集合，格式字符串 30 @param img_type: 圖片保存的格式，默認為GIF，可選的為GIF，JPEG，TIFF，PNG 31 @param mode: 圖片模式，默認為RGB 32 @param bg_color: 背景顏色，默認為白色 33 @param fg_color: 前景色，驗證碼字符顏色，默認為藍色#0000FF 34 @param font_size: 驗證碼字體大小 35 @param font_type: 驗證碼字體，默認為 ae_AlArabiya.ttf 36 @param length: 驗證碼字符個數 37 @param draw_lines: 是否劃幹擾線 38 @param n_lines: 幹擾線的條數範圍，格式元組，默認為(1, 2)，只有draw_lines為True時有效 39 @param draw_points: 是否畫幹擾點 40 @param point_chance: 幹擾點出現的概率，大小範圍[0, 100] 41 @return: [0]: PIL Image實例 42 @return: [1]: 驗證碼圖片中的字符串 43 """ 44 45 width, height = size # 寬高 46 # 創建圖形 47 img = Image.new(mode, size, bg_color) 48 draw = ImageDraw.Draw(img) # 創建畫筆 49 50 def get_chars(): 51 """生成給定長度的字符串，返回列表格式""" 52 return random.sample(chars, length) 53 54 def create_lines(): 55 """繪制幹擾線""" 56 line_num = random.randint(*n_line) # 幹擾線條數 57 58 for i in range(line_num): 59 # 起始點 60 begin = (random.randint(0, size[0]), random.randint(0, size[1])) 61 # 結束點 62 end = (random.randint(0, size[0]), random.randint(0, size[1])) 63 draw.line([begin, end], fill=(0, 0, 0)) 64 65 def create_points(): 66 """繪制幹擾點""" 67 chance = min(100, max(0, int(point_chance))) # 大小限制在[0, 100] 68 69 for w in range(width): 70 for h in range(height): 71 tmp = random.randint(0, 100) 72 if tmp > 100 - chance: 73 draw.point((w, h), fill=(0, 0, 0)) 74 75 def create_strs(): 76 """繪制驗證碼字符""" 77 c_chars = get_chars() 78 strs = ‘ %s ‘ % ‘ ‘.join(c_chars) # 每個字符前後以空格隔開 79 80 font = ImageFont.truetype(font_type, font_size) 81 font_width, font_height = font.getsize(strs) 82 83 draw.text(((width - font_width) / 3, (height - font_height) / 3), 84 strs, font=font, fill=fg_color) 85 86 return ‘‘.join(c_chars) 87 88 if draw_lines: 89 create_lines() 90 if draw_points: 91 create_points() 92 strs = create_strs() 93 94 # 圖形扭曲參數 95 params = [1 - float(random.randint(1, 2)) / 100, 96 0, 97 0, 98 0, 99 1 - float(random.randint(1, 10)) / 100, 100 float(random.randint(1, 2)) / 500, 101 0.001, 102 float(random.randint(1, 2)) / 500 103 ] 104 img = img.transform(size, Image.PERSPECTIVE, params) # 創建扭曲 105 106 img = img.filter(ImageFilter.EDGE_ENHANCE_MORE) # 濾鏡，邊界加強（閾值更大） 107 108 return img, strsView Code
python第一百一十八天---ajax--圖片驗證碼 + Session