封裝Ajax框架！(前言篇)
Ajax技術就是利用javascript和xml實現異步交互的功能。
首先先來介紹一下Ajax相關知識點，若是這些你都會的話，請直接跳轉到封裝ajax框架！（代碼篇）
1、Ajax對象的建立
一、建立Ajax對象的方式
a、第一種方式是針對IE瀏覽器javascript
b、第二種方式針對w3c：在IE的高版本（IE8+），已經支持了XMLHttpRequest類php
二、解決兼容性
a、建立公共文件 public.jscss
b、在須要使用ajax對象的頁面中，包含以上js文件html
2、ajax對象的相關屬性和方法
方法：java
一、初始化ajax對象 open(method,url) node
method：請求方式 get、postmysql
url：請求地址jquery
二、設置請求頭信息 setRequestHeader(header,value)web
header：請求頭的名稱ajax
value：請求頭的信息
三、開始發送請求 send(content)
只有當ajax對象的send方法被調用時，纔會發送請求
content ：post請求時所傳遞的數據,get請求時這裏直接設置爲null
屬性：
一、當ajax對象狀態碼發生改變時所觸發的回調函數：onreadystatechange
它的值是一個函數首地址（匿名函數）
xhr.onreadystatechange = function(){}
二、ajax對象的狀態碼（一個數字，從0-4）： readyState
三、ajax對象接收到的響應狀態碼（經常使用）（200、30二、404）：status
四、ajax對象接收到的http響應狀態文本（不經常使用）：statusText
五、ajax對象接收到http響應主體字符串（text/html）：responseText
六、ajax對象接收到的http響應主體內容（text/xml）：responseXML
3、發送GET請求
一、 向服務器發送用戶名，並返回hello,zhangsan
php代碼以下：
return：返回，將結果返回給php程序自己
echo：輸出，利用http協議將數據響應給客戶端
上面代碼不足之處：
a、若是將請求地址改成一個不存在的頁面地址，那麼服務器仍然會返回一個錯誤信息，而咱們的程序應該在獲得一個正確的返回結果後纔去對數據進行處理。
二、解決IE緩存問題（將服務器端的PHP略作修改）
在IE下，仍然輸出hello,zhangsan、其餘瀏覽器中是正常輸出
緣由：在IE中，默認有緩存功能，將每次獲取的php文件的輸出結果緩存下來，下次ajax對象請求時，若是在緩存目錄下，找到對應緩存文件，就直接使用緩存文件。
解決方式：
a、在url後面加隨機數：Math,random( );
var URL = "demo.php?name=zhangsan&n="+Math.random();
b、在url後面加（毫秒）時間戳：new Date().getTime();
var URL = "demo.php?name=lisi&n="+new Date().getTime();
以上兩種方法確保每次請求的url是惟一的。
c、設置ajax對象的請求頭，if-modified-since，強制讓ajax對象發送請求。
0：表示文件最後修改時間會和服務器上這個資源文件最後修改時間進行比較，確定是不一樣的，因此服務器返回了最新數據
xhr.setRequestHeader("If-Modified-Since","0");
以上三種方式並無根本上解決緩存問題，前兩種方式更是緩存下來N個文件。
d、設置http響應頭中的cache-control選項，告訴瀏覽器不要緩存，必須每次從新請求
實例：檢查用戶名是否可用
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>檢查用戶名是否存在</title> 6 <script src="jquery-1.12.4.min.js"></script> 7 <script src="public.js"></script> 8 <script> 9 $(function(){ 10 //建立ajax對象，此時狀態碼爲0 11 var xhr =creatxhr(); 12 $("#name").blur(function () { 13 var name = $(this).val(); 14 //方法1：隨機數 15 var URL = "demo.php?name="+name+"&n="+new Date().getTime(); 16 //初始化ajax對象 此時狀態碼爲1 17 xhr.open("get",URL); 18 //ajax對象狀態碼發生改變時所觸發的回調函數 19 xhr.onreadystatechange = function(){ 20 //狀態碼爲4說明接收完畢，作進一步的處理 21 if(xhr.readyState == 4 && xhr.status == 200){ 22 if(xhr.responseText == 1){ 23 $(".error").html("用戶名已存在").css({display:"inline-block",color:"red"}); 24 }else{ 25 $(".error").css({display:"none"}); 26 return false; 27 } 28 } 29 }; 30 //發送請求，此時狀態碼爲2 31 xhr.send(null); 32 }); 33 34 }) 35 </script> 36 </head> 37 <body> 38 <form> 39 <div class="form-group"> 40 <label for="name">用戶名:</label> 41 <span class="error"></span> 42 <input type="text" id="name" placeholder="請輸入用戶名"> 43 </div> 44 </form> 45 </body> 46 </html>
1 /** 2 * Created by 123 on 2017/7/30. 3 */ 4 //第一種建立ajax對象 5 function creatxhr(){ 6 var xhr; 7 var str = window.navigator.userAgent; 8 //判斷是否爲IE瀏覽器，若是是建立相應的ajax對象 9 if(str.indexOf("MSIE") >0){ 10 xhr = new ActiveXObject(); 11 }else{ 12 xhr = new XMLHttpRequest(); 13 } 14 return xhr; 15 } 16 //另一種建立ajax對象 17 function creatxhr1(){ 18 try{return new ActiveXObject();}catch(e){} 19 try{ 20 return new XMLHttpRequest(); 21 }catch(e){ 22 alert("請更換瀏覽器！"); 23 } 24 }
1 <?php 2 //禁止客戶端緩存數據 3 header("Cache-Control:no-cache,must-revalidate"); 4 $name = $_GET['name']; 5 //鏈接數據庫服務器、選擇數據庫 6 mysql_connect("localhost","root","111111"); 7 mysql_select_db("shop"); 8 mysql_query("set names gb2312"); 9 //sql語句 10 $sql = "select * from users where username = '$name'"; 11 $result =mysql_query($sql); 12 $num = mysql_num_rows($result); 13 $num大於表示表中已經存在一條記錄 14 mysql_close(); 15 //根據結果集總行數返回0或1.0表示用戶名不存在，1表示用戶名已存在 16 if($num > 0){ 17 echo 1; 18 }else{ 19 echo 0; 20 } 21 ?>
4、發送post請求
一、get和post的區別
a、get請求將參數放到請求地址url的後面
b、post請求時將參數放在http請求空白行的後面
c、get請求時參數大小有限制
d、post請求理論上對參數大小無限制
e、postt比get安全一些
二、其餘不一樣
post請求時，除了參數格式不一樣之處，還比get請求多了一個Content-Type的請求頭，它的值是application-form-urlencoded，表示本次提交的數據是字符數據，同時post還能夠同時提交二進制數據和字符數據，如：multipart/form-data
ajax發送請求其實就是模擬http請求
ajax對象的post請求也要加上content-type的請求頭
三、代碼
a、xhr.open("post"，"demo.php") post請求 demo.php後面沒有參數
b、xhr.setRequestHeader("Content-Type"，"application/x-www-form-urlencoded")
設置請求頭信息：
content-type：傳遞數據的數據類型
application/x-www-form-urlencoded：表示數據是字符數據
c、xhr.send(data)；data：會自動將參數放到請求空白行的後面
四、計算兩個數的四則運算
若是想作四則運算的話，上面的代碼稍微修改下：
若是須要從服務器返回多個結果，能夠將結果拼接一個字符串，使用一個指定的分隔符，如："|"，在客戶端程序中，再將字符串按照分隔符進行分割。
五、文件上傳
以post形式提交數據：method=post
指定提交的數據能夠是二進制數據或字符數據：enctype="multipart/form-data
相關代碼：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>文件上傳</title> 6 <script src="jquery-1.12.4.min.js"></script> 7 <script src="public.js"></script> 8 <script> 9 $(function(){ 10 function callback(filename){ 11 $("#filename").val(filename); 12 $("#photo").hide(); 13 $("#up").val("已上傳") 14 } 15 var xhr =creatxhr(); 16 $("#btn").click(function () { 17 var username = $("#username").val(); 18 var password = $("#pwd").val(); 19 var photo = $("#filename").val(); 20 var data = "username="+username+"&pwd="+password+"&photo="+photo; 21 xhr.open("post","demo.php"); 22 xhr.setRequestHeader("content-type","application/x-www-form-urlencoded"); 23 //ajax對象狀態碼發生改變時所觸發的回調函數 24 xhr.onreadystatechange = function(){ 25 if(xhr.readyState == 4 && xhr.status == 200){ 26 $("#photo").show(); 27 $("#up").val("上傳文件"); 28 $("#username").val(); 29 $("#pwd").val(); 30 $("#filename").val(); 31 if(xhr.responseText == "1"){ 32 console.log("註冊成功"); 33 }else{ 34 console.log("註冊失敗"); 35 } 36 } 37 }; 38 //發送請求，此時狀態碼爲2 39 xhr.send(data); 40 }); 41 42 }) 43 </script> 44 </head> 45 <body> 46 <form method="post" action="upload.php" target="ifm" enctype="multipart/form-data"> 47 <div class="form-group"> 48 <label for="username">用戶名：</label> 49 <input type="text" id="username" placeholder="請輸入用戶名"> 50 </div> 51 <div class="form-group"> 52 <label for="pwd">密碼：</label> 53 <input type="password" id="pwd" placeholder="請輸入密碼"> 54 </div> 55 <input type="hidden" id="filename"> 56 <div class="form-group"> 57 <label for="photo">照片：</label> 58 <input type="file" id="photo"> 59 <input type="submit" id="up" value="文件上傳" name="up"> 60 </div> 61 <button id="btn">註冊</button> 62 </form> 63 <iframe name="ifm" style="display: none;"></iframe> 64 </body> 65 </html>
1 <?php 2 //禁止客戶端緩存數據 3 header("Cache-Control:no-cache,must-revalidate"); 4 if(isset($_POST['submit'])){ 5 //獲取文件擴展名(jpg、png等) 6 $extname = strrchr($_FILES['photo']['name'],'.') 7 //生成新的文件名 8 $filename = time().$extname; 9 //文件上傳 10 copy($_FILES['tmp_name'],'upload/'.$filename); 11 //若是上傳成功的話，$filename返回的是120675321.jpg 12 將js語句輸到iframe中，在iframe中執行parent.callback 13 //調用父窗口中的callback函數 14 echo "<script>parent.callback($filename);</script>"; 15 } 16 ?>
1 <?php 2 //禁止客戶端緩存數據 3 header("Cache-Control:no-cache,must-revalidate"); 4 $username = $_POST['username']; 5 $password = $_POST['pwd']; 6 $photo = $_POST['photo']; 7 //鏈接數據庫服務器、選擇數據庫 8 mysql_connect("localhost","root","111111"); 9 mysql_select_db("shop"); 10 mysql_query("set names gb2312"); 11 //sql語句 12 $sql = "insert into users (username,password,photo) values("$username","$password","$photo"); 13 $result =mysql_query($sql); 14 mysql_close(); 15 echo "1"; 16 ?>
無刷新是Ajax技術最大的特色，但不是Ajax技術出現的目的。
針對登陸說明
若是使用傳統的web應用程序，用戶在登陸時，整個頁面從新刷新並請求新的頁面地址，新的頁面在驗證以後，再從新跳轉回來，可是對用戶而言，除了登陸頁面以外，其餘版本沒有發生變化。
使用ajax程序，能夠異步發送請求，改變的僅僅是登陸頁面，其餘版塊沒有從新請求和刷新，因此節省網絡傳輸的流量，能夠快速獲取服務器端數據。
5、利用xml實現數據傳輸
一、爲何是xml
主要是解決從服務器返回大量複雜的數據。
用戶名是否可用 返回1/0
返回兩個數的和 400
登陸是否成功 true/false
數據是否插入成功 true/false
須要服務器端返回少許的、單一的數據
若是須要從服務器返回大量、複雜的數據，如何實現？
xml：服務器端返回xml數據
json：服務器端返回json數據
二、格式：
a、php解析xml
$dom = new DOMDocument();
$dom->loadXML($str);
$nd=$dom->getElementsByTagName("tagname");
$value = $nd->item(0)->nodeValue;
$xml = simplexml_load_string($str);
$first = $xml->first;
$second = $xml->second;
b、javascript解析xml
要求服務器返回的是text/xml
var xml = xmlHttp.responseXML;
node = xml.getElementsByTagName("tagname");
node[0].chlidNodes[0].nodeValue;
三、實現兩個數的四則運算：
獲得結果後，須要使用字符串鏈接成一個xml格式的字符串，如：須要一個根元素，下面子元素，最後是具體的值，鏈接時也可使用<<<str建立xml字符串。
輸出這個字符串，默認響應內容類型：text/html，也就是說客戶端仍然把代碼當作html類進行解析，ajax對象的responeXML是不能獲得一個xmldom對象，必須設置響應頭類型爲text/xml；
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>四則運算</title> 6 <script src="jquery-1.12.4.min.js"></script> 7 <script src="public.js"></script> 8 <script> 9 $(function(){ 10 $("#btn").click(function(){ 11 var firstValue = $("#first").val(); 12 var secondsValue = $("#seconds").val(); 13 var data = "first="+firstValue+"&seconds="+secondsValue;//生成參數字符串 14 //建立ajax對象，此時狀態碼爲0 15 var xhr =creatxhr(); 16 //初始化ajax對象 此時狀態碼爲1 17 xhr.open("post","demo.php"); 18 xhr.setRequestHeader("content-type","application/x-www-form-urlencoded"); 19 //ajax對象狀態碼發生改變時所觸發的回調函數 20 xhr.onreadystatechange = function(){ 21 //狀態碼爲4說明接收完畢，作進一步的處理 22 if(xhr.readyState == 4 && xhr.status == 200){ 23 //xml->xmldom對象 24 var xml = xhr.responseXML;//獲得ajax返回的xmldom對象 25 //xml.getElementsByTagName('jia')[0] 表示獲取jia這個元素 26 //xml.getElementsByTagName('jia')[0].childNodes 表示獲取jia元素下的全部子節點 27 //xml.getElementsByTagName('jia')[0].childNodes[0] 表示獲取jia元素下的惟一文本節點。 28 //xml.getElementsByTagName('jia')[0].childNodes[0].nodeValue 表示獲取jia元素下的惟一文本節點的值。 29 var str =xml.getElementsByTagName('jia')[0].childNodes[0].nodeValue; 30 var str1 =xml.getElementsByTagName('jian')[0].childNodes[0].nodeValue; 31 var str2 =xml.getElementsByTagName('cheng')[0].childNodes[0].nodeValue; 32 var str3 =xml.getElementsByTagName('chu')[0].childNodes[0].nodeValue; 33 } 34 }; 35 //發送請求，此時狀態碼爲2 36 xhr.send(data); 37 }) 38 }) 39 </script> 40 </head> 41 <body> 42 <form> 43 第一個數：<input type="text" id="first"><br> 44 第二個數：<input type="text" id="seconds"><br> 45 <button id="btn">結果</button> 46 <span id="result" class="result"></span> 47 </form> 48 </body> 49 </html>
1 <?php 2 //禁止客戶端緩存數據 3 header("Cache-Control:no-cache,must-revalidate"); 4 $first = $_POST['$first']; 5 $seconds = $_POST['$seconds']; 6 $result1 = $first+$seconds; 7 $result2 = $first-$seconds; 8 $result3 = $first*$seconds; 9 $result4 = $first/$seconds; 10 //要想返回xml，首先鏈接一個xml格式的字符串 11 $str="<root>"; 12 $str.="<jia>.$result1.</jia>"; 13 $str.="<jian>.$result2.</jian>"; 14 $str.="<cheng>.$result3.</cheng>"; 15 $str.="<chu>.$result4.</chu>"; 16 $str.="</root>"; 17 header("Content-type:text/xml"); 18 echo $str; 19 ?>
四、在頁面加載以後，將goods表中全部數據顯示在表格中。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>把數據顯示在表中</title> 6 <script src="jquery-1.12.4.min.js"></script> 7 <script src="public.js"></script> 8 <script> 9 $(function(){ 10 //建立ajax對象，此時狀態碼爲0 11 var xhr =creatxhr(); 12 xhr.open("post","table.php"); 13 xhr.setRequestHeader("content-type","application/x-www-form-urlencoded"); 14 xhr.onreadystatechange = function(){ 15 if(xhr.readyState == 4 && xhr.status == 200){ 16 //xml->xmldom對象 17 var xml = xhr.responseXML;//獲得ajax返回的xmldom對象 18 var goods = xml.getElementsByTagName('goods'); 19 var $tr ="<tr></tr>"; 20 for(var i=0;i<goods.length;i++){ 21 var strName =goods[i].childNodes[0].childNodes[0].nodeValue; 22 var strPrice =goods[i].childNodes[1].childNodes[0].nodeValue; 23 var $td0 = "<td>"+(i+1)+"</td>"; 24 var $td1 = "<td>"+strName+"</td>"; 25 var $td2 = "<td>"+strPrice+"</td>"; 26 $tr.append($td0).append($td1).append($td2); 27 $("#table tbody").append($tr); 28 } 29 } 30 xhr.send(null); 31 } 32 }) 33 </script> 34 </head> 35 <body> 36 <table id="table"> 37 <tr> 38 <td>編號</td> 39 <td>姓名</td> 40 <td>價格</td> 41 </tr> 42 </table> 43 </body> 44 </html>
查詢goods表中全部數據，鏈接xml格式的字符串，表中有多少條數據，xml字符串就有幾對goods標籤
其中，name字段出現中文，須要進行轉碼，將gb2312->utf-8
最後輸出xml字符串
1 <?php 2 //禁止客戶端緩存數據 3 header("Cache-Control:no-cache,must-revalidate"); 4 $name = $_GET['name']; 5 //鏈接數據庫服務器、選擇數據庫 6 mysql_connect("localhost","root","111111"); 7 mysql_select_db("shop"); 8 mysql_query("set names utf-8"); 9 //sql語句 10 $sql = "select name,price from goods order by id desc; 11 $result =mysql_query($sql); 12 //總行數 13 $num = mysql_num_rows($result); 14 mysql_close(); 15 $str = "<root>"; 16 for($i=0;$i<$num;$i++){ 17 $row = mysql_fetch_assoc($result); 18 $str.="<goods>"; 19 $str.="<name>".$row['name']."</name>"; 20 $str.="<price>".$row['price']."</price>"; 21 $str.="</goods>"; 22 } 23 str.="</root>"; 24 header("Content-Type:text/xml"); 25 echo $str; 26 ?>
6、利用json傳輸數據
一、爲何使用json傳輸數據
xml數據生成過於複雜、xml數據解析過於複雜。
二、關於json介紹
對象是屬性的無序集合，在js中，可使用{}模擬這個集合
語法：var json = {屬性名：屬性值，屬性名：屬性值}（屬性名能夠不加引號，也能夠加單引號或雙引號）；
var json = [{ },{ },{ }];
三、用json表示具體的信息
a、表示一我的的信息
var person = {name:"zhangsan","age":18}; console.log("姓名："+person.name+person.age)
b、表示多我的的信息
四、在php中如何使用json
a、json編碼：json_encode();
b、json解碼：json_decode();
生成json字符串
json表示大量數據，在php中表示多個、大量的數據能夠數組、對象來表示
也就是說在php若是想生成json字符串，必須從數組、對象上生成。
解析json字符串：
json_decode函數能夠將一個json格式的字符串進行解析，其中，這個函數的第二個參數表示解析方式。
true：解析到數組中
false：解析到對象中
默認爲false
關於json保存中文的問題
目前，json只支持utf-8，若是想保存中文，必須進行轉碼。
五、JavaScript解析json
若是服務器端返回的是字符串，js中須要把字符串轉換成json對象。
方法：eval（"("+str+")"）;
var str = xmlHttp.responseText;好比服務器返回的是"{name：'zhangsan'，age：30}"；
//將字符串轉換成json對象
var json = eval("("+str+")");
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>使用json把數據顯示在表中</title> 6 <style> 7 table{ 8 border-collapse: collapse; 9 width:300px; 10 height:200px; 11 margin:0 auto; 12 text-align: center; 13 } 14 tr,td{ 15 border:1px solid #ccc; 16 } 17 </style> 18 <script src="jquery-1.12.4.min.js"></script> 19 <script src="public.js"></script> 20 <script> 21 $(function(){ 22 //建立ajax對象，此時狀態碼爲0 23 var xhr =creatxhr(); 24 xhr.open("post","table.php"); 25 xhr.setRequestHeader("content-type","application/x-www-form-urlencoded"); 26 xhr.onreadystatechange = function(){ 27 if(xhr.readyState == 4 && xhr.status == 200){ 28 var value = xhr.responseText;//返回字符串 29 var $data = eval('('+value+')');//把返回的字符串轉換爲json對象 30 var $tr ="<tr></tr>"; 31 for(var i=0;i<$data.length;i++){ 32 var $td0 = "<td>"+(i+1)+"</td>"; 33 var $td1 = "<td>"+$data[i].name+"</td>"; 34 var $td2 = "<td>"+$data[i].price+"</td>"; 35 $tr.append($td0).append($td1).append($td2); 36 $("tbody").append($tr); 37 } 38 } 39 xhr.send(null); 40 } 41 }) 42 </script> 43 </head> 44 <body> 45 <table> 46 <tr> 47 <td>編號</td> 48 <td>姓名</td> 49 <td>價格</td> 50 </tr> 51 <tr> 52 <td>1</td> 53 <td>蘋果</td> 54 <td>5</td> 55 </tr> 56 <tr> 57 <td>2</td> 58 <td>梨子</td> 59 <td>3</td> 60 </tr> 61 <tr> 62 <td>3</td> 63 <td>草莓</td> 64 <td>15</td> 65 </tr> 66 </table> 67 </body> 68 </html>
1 <?php 2 //鏈接數據庫服務器、選擇數據庫 3 mysql_connect("localhost","root","111111"); 4 mysql_select_db("shop"); 5 mysql_query("set names utf-8"); 6 //sql語句 7 $sql = "select name,price from goods order by id desc; 8 $result =mysql_query($sql); 9 //總行數 10 $num = mysql_num_rows($result); 11 $data = array(); 12 for($i=0;$i<$num;$i++){ 13 $row = mysql_fetch_assoc($result); 14 $row['name'] = iconv('gb2312','utf-8',$row['name']); 15 $data[] = $row; 16 } 17 //關閉數據庫 18 mysql_close(); 19 //輸出json數據 20 echo json_encode($data); 21 ?>
php代碼說明以下：
$row：一維數組 生成一個json格式的字符串
$data：二維數組 生成一個json數組格式的字符串
js代碼說明以下：
一種返回的是："{name：'zhangsan'，'password'：'123456'}"； eval("("+str+")")；
一種返回的是："[{name：'zhangsan'，'password'：'123456'}，{name：'lisi'，password：'111111'}]"； eval(str)；
相關文章
- 1. 封裝 ajax 框架
- 2. 封裝Ajax框架！（代碼篇）
- 3. 框架封裝
- 4. 4_Selenium框架封裝
- 5. EF5框架封裝
- 6. js框架封裝，模擬jQuery封裝
- 7. ajax封裝
- 8. AJAX封裝（IE）
- 9. 封裝ajax
- 10. js封裝ajax
- 更多相關文章...
- • C# 封裝 - C#教程
- • XSL 語言 - XSLT 教程
- • Composer 安裝與使用
- • Docker容器實戰(一) - 封神Server端技術
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. Appium入門
- 2. Spring WebFlux 源碼分析(2)-Netty 服務器啓動服務流程 --TBD
- 3. wxpython入門第六步（高級組件）
- 4. CentOS7.5安裝SVN和可視化管理工具iF.SVNAdmin
- 5. jedis 3.0.1中JedisPoolConfig對象缺少setMaxIdle、setMaxWaitMillis等方法，問題記錄
- 6. 一步一圖一代碼，一定要讓你真正徹底明白紅黑樹
- 7. 2018-04-12—（重點）源碼角度分析Handler運行原理
- 8. Spring AOP源碼詳細解析
- 9. Spring Cloud（1）
- 10. python簡單爬去油價信息發送到公衆號
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 封裝 ajax 框架
- 2. 封裝Ajax框架！（代碼篇）
- 3. 框架封裝
- 4. 4_Selenium框架封裝
- 5. EF5框架封裝
- 6. js框架封裝，模擬jQuery封裝
- 7. ajax封裝
- 8. AJAX封裝（IE）
- 9. 封裝ajax
- 10. js封裝ajax