習大綱

1.什么是AJAX

1.1概念

AJAX是Asynchronous javascript and xml 的縮寫，表示異步javascript 和 xml ,是一種交互式網頁應用開發技術。

AJAX是一些老技術的新應用， 應用到了html css javascript dom , 以XMLHttpRequest為技術核心實現網頁異步數據傳輸。

1.2特點

最大特點就是：網頁不用刷新進行數據傳輸

1.3應用場景

用戶注冊

AJAX分頁效果

圖片加載瀑布流效果

2.AJAX工作流程

傳統的數據提交方式

AJAX數據提交方式

通過上述對比，客戶端用戶部分減少了2個流程，交給了ajax去處理，那么就減少了用戶的等待時間，用戶體驗大大的提升

3.AJAX的優點

? 減少服務器帶寬，按需獲得數據

注意：在一些有列表展示功能的地方優勢特別突出

? 無刷新更新頁面，減少用戶的實際和心理等待時間

注：用戶注冊，用戶登錄。多數據信息的展示

? 更好的用戶體驗，傳統數據提交會刷新頁面，易丟失用戶填寫數據

? 主瀏覽器都支持

二、AJAX使用

1.創建ajax對象

XHR=new XMLHttpRequest();

2.建立鏈接

1.1語法

創建請求頭使用OPEN,主要實現（請求類型，請求地址）

對象.open(請求類型GET/POST,請求地址,[同步true/異步false]);

默認：同步 True

1.2代碼

//創建AJAX對象
   var XHRObj=new XMLHttpRequest();
   //創建請求頭
   XHRObj.open('GET','demo.php');

3.發送請求

1.1語法

主要實現請求服務器操作

對象.send(POST請求則填寫POST的數據/GET請求可以不用寫);

1.2代碼

【HTML代碼】
<script type="text/javascript">
   //創建AJAX對象
   var XHRObj=new XMLHttpRequest();
   //創建請求頭
   XHRObj.open('GET','demo.php');
   //發送請求  對象.send(POST請求則填寫POST的數據/GET請求可以不用寫);
   XHRObj.send();
   
</script>
【PHP代碼】
<?php
echo 'test';

腳下留心：

一定要在服務器目錄下面運行AJAX-發送請求.html,不能直接用瀏覽器瀏覽該文件

4.響應請求（接受服務器返回的信息）

1.1語法

對象.responseText (獲取服務器響應的字符串數據)

對象.responseXML(獲取服務器響應的xml數據)

1.2代碼

<script type="text/javascript">
   //創建AJAX對象
   var XHRObj=new XMLHttpRequest();
   //創建請求頭
   XHRObj.open('GET','demo.php');
   //發送請求  對象.send(POST請求則填寫POST的數據/GET請求可以不用寫);
   
   XHRObj.send();
   //alert返回的數據
   alert(XHRObj.responseText);
   
</script>

案例運行結果

腳下留心：無法響應數據

原因：在AJAX沒有完成請求這個時候是沒有返回值的，所以獲取數據是沒有結果的。

解決方法：通過判斷reaystate==4 是否AJAX請求完成

1.3判斷服務器是否響應成功

Onreadystatechange 作用：ajax在請求的過程中發生任何狀態的變化都會調用該方法

Readystate 作用：返回ajax的請求狀態

狀態說明：

最終代碼：以及結果

思考：為什么沒有打印0~4

<script type="text/javascript">
   //創建AJAX對象
   var XHRObj=new XMLHttpRequest();
   //創建請求頭
   XHRObj.open('GET','demo.php');
   //發送請求  對象.send(POST請求則填寫POST的數據/GET請求可以不用寫);
   console.log(XHRObj.readyState);
   //發送請求
   XHRObj.send();
   //當請求狀態發送變化時ajax會自動調用該方法onreadystatechange
   XHRObj.onreadystatechange=function(){
       console.log(XHRObj.readyState);
       if(XHRObj.readyState==4){
            console.log(XHRObj.responseText);
       }
       
   }
   console.log(XHRObj.readyState+'sdf');  
</script>

說明：

程序是從上往下進行的， 里面的代碼是等發送異步請求完了才去執行的。

狀態0是無法獲取的，因為實例化AJAX的對象，然而監聽需要對象對象里面的屬性來完成，所以0裝就是實例化對象的時候。

思考：避免接口寫錯

例如：

在實際使用中，我們為了只有在請求的接口正確的時候獲取相應的數據，一般我們要判斷返回的HTTP狀態是否正確，

使用：

對象.status==200

<script type="text/javascript">
   //創建AJAX對象
   var XHRObj=new XMLHttpRequest();
   //創建請求頭
   XHRObj.open('GET','demo1.php');
   //發送請求  對象.send(POST請求則填寫POST的數據/GET請求可以不用寫);
//    console.log(XHRObj.readyState);
   //發送請求
   XHRObj.send();
   //當請求狀態發送變化時ajax會自動調用該方法onreadystatechange
   XHRObj.onreadystatechange=function(){
//        console.log(XHRObj.readyState);
       if(XHRObj.readyState==4 && XHRObj.status==200){
            console.log(XHRObj.responseText);
       }
//        else{
//            //以郵件或者短信的形式發送通網站管理員
//            alert('服務器錯誤，很忙......');
//        }
       
   }
   
//    console.log(XHRObj.readyState+'sdf');
</script>

5.案例聯系-檢查用戶名是否存在

1.1案例需求

判斷用戶名admin是否存在，當存在的時候返回【不可用】，當不存在的時候返回【可用】

1.2完成思路

明確需求：

第一步：給按鈕增加點擊事件

第二步：獲取用戶輸入的值username

第三步：使用AJAX將內容發送給服務器端PHP文件

第四步：編寫PHP文件checkuser.php 判斷用戶是否存在，返回結果

第五步：將PHP返回的結果彈出來

1.3HTML代碼

<!--

第一步：給按鈕增加點擊事件

第二步：獲取用戶輸入的值username

第三步：使用AJAX將內容發送給服務器端PHP文件

第四步：編寫PHP文件checkuser.php 接受參數，并且判斷用戶是否存在，返回結果

第五步：將PHP返回的結果彈出來

-->

<script type="text/javascript">
   //按鈕綁定事件，給input增加ID屬性
  var checkObj=document.getElementById('check');
  checkObj.onclick=function(){
      var username=document.getElementById('username').value;
      //創建ajax對象
      var XHRObj=new XMLHttpRequest();
      //創建請求頭，設置請求發送的地址和類型，并且將參數傳遞給服務端
      XHRObj.open('get','check.php?username='+username);
      //獲取服務器端返回的數據  
      XHRObj.onreadystatechange=function(){
          if(XHRObj.readyState==4 && XHRObj.status==200){
              alert(XHRObj.responseText);
          }
      }
      //發送請求
      XHRObj.send();
     
  }
   
</script>

1.4PHP代碼

<?php
//定義一個用戶數組
$user=array('admin','xiaoming','xiaohong','xiaoqiang');
//獲取傳遞的參數
$username=$_GET['username'];
//判斷用戶是否存在在數組中
if(in_array($username,$user)){
   echo '不可用';
}else{
   echo '可用';
}

進化版本

1)進化要求

當用戶名可用的時候后面增加√說可用，當用戶名不可用的時候出現一個×提示當前用戶名太火，請換一個

HTML代碼

<style>
   .error{
       color: red;
       font-size: 14px;
   }
   .green{
       color: green;
       font-size: 14px;
   }
   
</style>
<body>
<!--   <span class="error">×此用戶名太首歡迎，請換一個</span>-->
<!--   <span class="green">√恭喜你，該用戶可用</span>-->
   <table border="1">
       <th colspan="2">用戶注冊</th>
       <tr>
           <td><input id="username" name="username" type="text"/><div id='error'></div></td>
           <td><input id="check" type="button" value="檢測用戶"/></td>
       </tr>
       
   </table>
</body>
<!--
第一步：給按鈕增加點擊事件
第二步：獲取用戶輸入的值username
第三步：使用AJAX將內容發送給服務器端PHP文件
第四步：編寫PHP文件checkuser.php 接受參數，并且判斷用戶是否存在，返回結果
第五步：將PHP返回的結果彈出來
-->
<script type="text/javascript">
   //按鈕綁定事件，給input增加ID屬性
  var checkObj=document.getElementById('check');
  checkObj.onclick=function(){
      var username=document.getElementById('username').value;
      //創建ajax對象
      var XHRObj=new XMLHttpRequest();
      //創建請求頭，設置請求發送的地址和類型，并且將參數傳遞給服務端
      XHRObj.open('get','check.php?username='+username);
      //獲取服務器端返回的數據  
      XHRObj.onreadystatechange=function(){
          if(XHRObj.readyState==4 && XHRObj.status==200){
//               alert(XHRObj.responseText);
              if(XHRObj.responseText=='可用'){
                   document.getElementById('error').innerHTML='<span class="green">√恭喜你，該用戶沒有被注冊</span>';
              }else{
                  document.getElementById('error').innerHTML=' <span class="error">×此用戶名太首歡迎，請換一個</span>';
                 
              }
          }
      }
      //發送請求
      XHRObj.send();
     
  }
   
</script>

三、發送GET/POST請求

1.POST和GET的區別

數據方面：GET受瀏覽器的影響

POST 原則上是不受限制的，可以通過PHP配置POST_MAX_SIZE進行更改

安全方面：POST比GET要安全

文件上傳：GET不能進行文件上傳

2.Ajax之GET請求（加參數）

1.1實現方式

說明：在請求地址后面增加參數,例如：demo.php?a=111&b=222&c=333

1.2代碼

【HTML代碼】
<script type="text/javascript">
   //創建AJAX對象
   var XHRObj=new XMLHttpRequest();
   //創建請求頭，請求方式，請求鏈接
   XHRObj.open('get','test.php?a=111&b=222&c=333');
   //發送請求
   XHRObj.send();
</script>
【PHP代碼】
<?php
var_dump($_GET);

3.AJAX之POST請求

1.1實現方式

Open(‘POST’,請求地址);

設置發送的數據格式，采用URL編碼格式

對象.setRequestHeader(‘content-type’,’application/x-www-form-urlencoded’);

對象.send(發送的數據);

1.2代碼

<script type="text/javascript">
   //創建AJAX對象
   var XHRObj=new XMLHttpRequest();
   XHRObj.onreadystatechange=function() {
   if (XHRObj.readyState==4) {
     alert(XHRObj.responseText);
   }
 }
   //創建請求頭，請求方式，請求鏈接
   XHRObj.open('post','test.php');
   //發送post的數據
   var postData='name=123123&age=rrr';
   
   //設置數據編碼格式,使用URL編碼格式
   XHRObj.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
   
   //發送請求
   XHRObj.send(postData);
</script>

【PHP代碼】

<?php

var_dump($_POST);

效果

4.練習：表單無刷新數據錄入

四、AJAX同步異步請求

1.概念

同步：等待服務器響應完成在執行下一段JS代碼 （阻塞模式）

異步：不等服務器響應完成直接執行下一段JS代碼（非阻塞模式）

2.驗證同步

設置open(方式，請求地址,false/同步);

HTML【代碼】

<script type="text/javascript">
   //創建AJAX對象
   var XHRObj=new XMLHttpRequest();
   //創建請求頭
   XHRObj.open('GET','demo.php',false);
   //時時監控
   XHRObj.onreadystatechange=function(){
       if(XHRObj.readyState==4){
           console.log('111');
       }
   }
   //發送請求  對象.send(POST請求則填寫POST的數據/GET請求可以不用寫);
   XHRObj.send();
   console.log('js執行完成');
   
</script>

【PHP代碼】

為了增加延遲效果使用sleep

<?php
sleep(8);
echo 'test';

3.驗證異步

【HTML代碼】
<script type="text/javascript">
   //創建AJAX對象
   var XHRObj=new XMLHttpRequest();
   //創建請求頭
   XHRObj.open('GET','demo.php');
   //時時監控
   XHRObj.onreadystatechange=function(){
       if(XHRObj.readyState==4){
           console.log('111');
       }
   }
   //發送請求  對象.send(POST請求則填寫POST的數據/GET請求可以不用寫);
   XHRObj.send();
   console.log('js執行完成');
   
</script>

【PHP代碼】

<?php
sleep(8);
echo 'test';

五、解決緩存問題

1.緩存分析

我們再瀏覽一些網站的時候瀏覽器為了方便用戶再次訪問的時候增加用戶訪問體驗會將一些靜態資源文件緩存到本地

緩存的位置在：

選中IE瀏覽器右鍵

打開

靜態緩存目錄就出現再這里面了

說明：IE存在緩存

2.解決方案

1.1隨機數

代碼設置：?t=Math.random()

缺點：

1.不能保證URL絕對唯一

2.產生大量緩存文件

1.2時間

代碼設置：?t=new Date().getTime(); //取得毫秒時間戳

優點：保證URL絕對唯一

缺點：依然產生大量緩存文件

1.3設置請求頭

代碼設置：對象.setRequestHeader("If-Modified-Since","0");

原理分析：

If-Modified-Since是標準的HTTP請求頭標簽，在發送HTTP請求時，把瀏覽器端緩存頁面的最后修改時間一起發到服務器去，服務器會把這個時間與服務器上實際文件的最后修改時間進行比較。

如果時間一致，那么返回HTTP狀態碼304（不返回文件內容），客戶端接到之后，就直接把本地緩存文件顯示到瀏覽器中。

如果時間不一致，就返回HTTP狀態碼200和新的文件內容，客戶端接到之后，會丟棄舊文件，把新文件緩存起來，并顯示到瀏覽器中。

1.4設置相應頭

代碼設置：header("Cache-Control: no-cache, must-revalidate");

原理分析：

利用php的header函數向響應頭中寫數據，寫的是告訴客戶端：不要對本次的結果進行緩存。

這種做法，可以從根本上解決緩存問題，不產生任何緩存文件。

六、返回數據格式

1.數據格式分類

普通字符串文本格式：responseText

XML數據格式:responseXML

JSON 字符串數據格式：responseText (在實際工作中用到最多，最廣泛的格式)

2.返回Text數據處理

1.1HTML代碼

<script type="text/javascript">
   //創建AJAX對象
   var XHRObj=new XMLHttpRequest();
   //創建請求頭
   XHRObj.open('GET','text.php');
   //時時監控
   XHRObj.onreadystatechange=function(){
       if(XHRObj.readyState==4 && XHRObj.status==200){
           document.getElementById('content').innerHTML=XHRObj.responseText;
       }
   }
   //發送請求  對象.send(POST請求則填寫POST的數據/GET請求可以不用寫);
   XHRObj.send();
   
</script>
<body>
   <div id="content"></div>
</body>

1.2PHP代碼

<?php

echo '<h1>返回的文本</h1>';

最終效果

3.返回XML數據處理

1.1HTML代碼

<script type="text/javascript">
   //創建AJAX對象
   var XHRObj=new XMLHttpRequest();
   //創建請求頭
   XHRObj.open('GET','xml.php');
   //時時監控
   XHRObj.onreadystatechange=function(){
       if(XHRObj.readyState==4 && XHRObj.status==200){
          var xmlObj=XHRObj.responseXML;
           //以前獲取html文檔我們使用  document.getElementByTagName()
           books=xmlObj.getElementsByTagName('book');
           for(i=0;i<books.length;i++){
//獲取第二級的值我們使用childen 方法
               for(j=0;j<books[i].children.length;j++){
                   
                   console.log(books[i].children[j].innerHTML);
               }
           }
       }
   }
   //發送請求  對象.send(POST請求則填寫POST的數據/GET請求可以不用寫);
   XHRObj.send();
   
   
</script>

1.2PHP代碼

首先確保PHP寫的xml文件能再瀏覽器端訪問

<?php
header('Content-Type:text/xml; charset=utf-8');
echo '<?xml version="1.0" encoding="utf-8"?>
<books>
   <book>
       <name>西游記</name>
       <price>50.12</price>
   </book>
   
   <book>
       <name>三國演義</name>
       <price>876.12</price>
   </book>
   
</books>
';

4.返回JSON數據處理

1.1什么是JSON數據

JSON(javascript Object Notation js 對象標記) 是一種輕量級的數據交換格式。

1.2JSON數據優勢

數據格式比較簡單，易于讀寫， 格式都是壓縮的，占用帶寬小

易于解析這種語言，客戶端JavaScript可以簡單的通過eval()進行JSON數據的讀取

因為JSON格式能夠直接為服務器端代碼使用, 大大簡化了服務器端和客戶端的代碼開發量, 但是完成的任務不變, 且易于維護

1.3服務器端JSON生成和解析

PHP端生成JSON數據使用：json_encode(數組數據格式);

PHP端解析JSON數據使用：json_decode(待解碼數據，true/false);

說明：false 解碼出來的數據是一個對象，true,解碼出來的是一個數組

1.4客戶端解析JSON數據

由于我們返回值的處理使用的是responseText 格式

? JSON.parse()

語法格式：JSON.parse(字符串);

作用：從一個字符串中解析出json數據對象

前提：字符串必須是json格式的字符串

? Eval

七、綜合案例-用戶注冊

1.需求

用戶會員注冊功能，用戶填寫好根據規則進行驗證，如果驗證成功提示用戶注冊成功。

驗證規則：

1.用戶名不能為空

2.用戶名必須是由數字和字母組成，而且是在6~8位之間

2.HTML代碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
   <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
   <title>AJAX-用戶注冊</title>
</head>
<style>
   dd{float: left;}    
</style>
<body>
  <div>
      <dl>
          <dd>用戶名</dd>
          <dd><input type="text" name="username" id="username"></dd>
          <dd><input type="button" id="regbtn"  value="注冊"></dd>
      </dl>
  </div>
   
</body>
<script type="text/javascript">
   
   //給注冊按鈕增加click事件
   
   var regbtn=document.getElementById('regbtn');
   
   regbtn.onclick=function(){
       
       //獲取用戶輸入的值
       var username=document.getElementById('username').value;
       
        //創建AJAX對象
       var XHRObj=new XMLHttpRequest();
       //打開對象
       XHRObj.open('get','reg.php?username='+username);
       //實時監控AJAX運行狀態
       XHRObj.onreadystatechange=function(){
           //判斷服務器是否響應成功
           if(XHRObj.readyState==4 && XHRObj.status==200){
               //將json數據轉換成對象
               jsonObj=JSON.parse(XHRObj.responseText);
               //判斷用戶是否操作成功進行頁面跳轉
               if(jsonObj.state==1){
                   location.href='success.html';
                   
               }else{
                   alert(jsonObj.msg);
               }
           }
       }
       //發送請求
       XHRObj.send();
       
   }
   
 
   
   
</script>
</html>

3.PHP代碼