封裝自己的Ajax框架

知識 08-01

Ajax技術就是利用javascript和xml實現非同步交互的功能。首先先來介紹一下Ajax相關知識點一、Ajax對象的創建1、創建Ajax對象的方式

a、第一種方式是針對IE瀏覽器

b、第二種方式針對w3c：在IE的高版本（IE8+），已經支持了XMLHttpRequest類

2、解決兼容性

a、創建公共文件 public.js

封裝自己的Ajax框架

b、在需要使用ajax對象的頁面中，包含以上js文件

封裝自己的Ajax框架

二、ajax對象的相關屬性和方法

方法：

1、初始化ajax對象 open(method,url)

method：請求方式 get、post

url：請求地址

2、設置請求頭信息 setRequestHeader(header,value)

header：請求頭的名稱

value：請求頭的信息

3、開始發送請求 send(content)

只有當ajax對象的send方法被調用時，才會發送請求

content ：post請求時所傳遞的數據,get請求時這裡直接設置為null

屬性：

1、當ajax對象狀態碼發生改變時所觸發的回調函數：onreadystatechange

它的值是一個函數首地址（匿名函數）

xhr.onreadystatechange = function{}

2、ajax對象的狀態碼（一個數字，從0-4）： readyState

封裝自己的Ajax框架

3、ajax對象接收到的響應狀態碼（常用）（200、302、404）：status

4、ajax對象接收到的http響應狀態文本（不常用）：statusText

5、ajax對象接收到http響應主體字元串（text/html）：responseText

6、ajax對象接收到的http響應主體內容（text/xml）：responseXML

三、發送GET請求1、向伺服器發送用戶名，並返回hello,zhangsan

封裝自己的Ajax框架

php代碼如下：

return：返回，將結果返回給php程序本身
echo：輸出，利用http協議將數據響應給客戶端

上面代碼不足之處：

a、如果將請求地址改為一個不存在的頁面地址，那麼伺服器仍然會返回一個錯誤信息，而我們的程序應該在得到一個正確的返回結果後才去對數據進行處理。

封裝自己的Ajax框架

2、解決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 }

public.js代碼

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 ?>