「jQuery-6」 ajax

. ajax的介紹

ajax 是 Asynchronous JavaScript and XML的簡寫，ajax一個前后臺配合的技術(shù)，它可以讓 javascript 發(fā)送異步的 http 請求，與后臺通信進(jìn)行數(shù)據(jù)的獲取，ajax 最大的優(yōu)點是實現(xiàn)局部刷新，ajax可以發(fā)送http請求，當(dāng)獲取到后臺數(shù)據(jù)的時候更新頁面顯示數(shù)據(jù)實現(xiàn)局部刷新，在這里大家只需要記住，當(dāng)前端頁面想和后臺服務(wù)器進(jìn)行數(shù)據(jù)交互就可以使用ajax了。

這里提示一下大家, 在html頁面使用ajax需要在web服務(wù)器環(huán)境下運(yùn)行, 一般向自己的web服務(wù)器發(fā)送ajax請求。

2. ajax的使用

jquery將它封裝成了一個方法$.ajax()，我們可以直接用這個方法來執(zhí)行ajax請求。

示例代碼:

<script>
    $.ajax({
    // 1.url 請求地址
    url:'http://t.weather.sojson.com/api/weather/city/101010100',
    // 2.type 請求方式，默認(rèn)是'GET'，常用的還有'POST'
    type:'GET',
    // 3.dataType 設(shè)置返回的數(shù)據(jù)格式，常用的是'json'格式
    dataType:'JSON',
    // 4.data 設(shè)置發(fā)送給服務(wù)器的數(shù)據(jù), 沒有參數(shù)不需要設(shè)置

    // 5.success 設(shè)置請求成功后的回調(diào)函數(shù)
    success:function (response) {
        console.log(response);    
    },
    // 6.error 設(shè)置請求失敗后的回調(diào)函數(shù)
    error:function () {
        alert("請求失敗,請稍后再試!");
    },
    // 7.async 設(shè)置是否異步，默認(rèn)值是'true'，表示異步，一般不用寫
    async:true
});
</script>

ajax方法的參數(shù)說明:

url 請求地址
type 請求方式，默認(rèn)是'GET'，常用的還有'POST'
dataType 設(shè)置返回的數(shù)據(jù)格式，常用的是'json'格式
data 設(shè)置發(fā)送給服務(wù)器的數(shù)據(jù)，沒有參數(shù)不需要設(shè)置
success 設(shè)置請求成功后的回調(diào)函數(shù)
error 設(shè)置請求失敗后的回調(diào)函數(shù)
async 設(shè)置是否異步，默認(rèn)值是'true'，表示異步，一般不用寫
同步和異步說明

同步是一個ajax請求完成另外一個才可以請求，需要等待上一個ajax請求完成，好比線程同步。
異步是多個ajax同時請求，不需要等待其它ajax請求完成，好比線程異步。

ajax的簡寫方式:

$.ajax按照請求方式可以簡寫成$.get或者$.post方式

ajax簡寫方式的示例代碼:

 <script>
    $(function(){
        /*
         1. url 請求地址
         2. data 設(shè)置發(fā)送給服務(wù)器的數(shù)據(jù), 沒有參數(shù)不需要設(shè)置
         3. success 設(shè)置請求成功后的回調(diào)函數(shù)
         4. dataType 設(shè)置返回的數(shù)據(jù)格式，常用的是'json'格式, 默認(rèn)智能判斷數(shù)據(jù)格式
        */ 
        $.get("http://t.weather.sojson.com/api/weather/city/101010100", function(dat,status){
            console.log(dat);
            console.log(status);
            alert(dat);
        }).error(function(){
            alert("網(wǎng)絡(luò)異常");
        });

        /*
         1. url 請求地址
         2. data 設(shè)置發(fā)送給服務(wù)器的數(shù)據(jù), 沒有參數(shù)不需要設(shè)置
         3. success 設(shè)置請求成功后的回調(diào)函數(shù)
         4. dataType 設(shè)置返回的數(shù)據(jù)格式，常用的是'json'格式, 默認(rèn)智能判斷數(shù)據(jù)格式
        */ 
        $.post("test.php", {"func": "getNameAndTime"}, function(data){
            alert(data.name);
            console.log(data.time);
        }, "json").error(function(){
            alert("網(wǎng)絡(luò)異常");
        });
    });


</script>

$.get和$.post方法的參數(shù)說明:

$.get(url,data,success(data, status, xhr),dataType).error(func)$.post(url,data,success(data, status, xhr),dataType).error(func)

url 請求地址
data 設(shè)置發(fā)送給服務(wù)器的數(shù)據(jù)，沒有參數(shù)不需要設(shè)置
success 設(shè)置請求成功后的回調(diào)函數(shù)

data 請求的結(jié)果數(shù)據(jù)
status 請求的狀態(tài)信息, 比如: "success"
xhr 底層發(fā)送http請求XMLHttpRequest對象

dataType 設(shè)置返回的數(shù)據(jù)格式

"xml"
"html"
"text"
"json"

error 表示錯誤異常處理

func 錯誤異常回調(diào)函數(shù)

習(xí)大綱

基礎(chǔ)學(xué)習(xí)路徑

1.什么是AJAX

1.1概念

AJAX是Asynchronous javascript and xml 的縮寫，表示異步j(luò)avascript 和 xml ,是一種交互式網(wǎng)頁應(yīng)用開發(fā)技術(shù)。

AJAX是一些老技術(shù)的新應(yīng)用，應(yīng)用到了html css javascript dom , 以XMLHttpRequest為技術(shù)核心實現(xiàn)網(wǎng)頁異步數(shù)據(jù)傳輸。

1.2特點

最大特點就是：網(wǎng)頁不用刷新進(jìn)行數(shù)據(jù)傳輸

1.3應(yīng)用場景

用戶注冊

AJAX分頁效果

圖片加載瀑布流效果

2.AJAX工作流程

傳統(tǒng)的數(shù)據(jù)提交方式

AJAX數(shù)據(jù)提交方式

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

3.AJAX的優(yōu)點

? 減少服務(wù)器帶寬，按需獲得數(shù)據(jù)

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

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

注：用戶注冊，用戶登錄。多數(shù)據(jù)信息的展示

? 更好的用戶體驗，傳統(tǒng)數(shù)據(jù)提交會刷新頁面，易丟失用戶填寫數(shù)據(jù)

? 主瀏覽器都支持

二、AJAX使用

1.創(chuàng)建ajax對象

XHR=new XMLHttpRequest();

2.建立鏈接

1.1語法

創(chuàng)建請求頭使用OPEN,主要實現(xiàn)（請求類型，請求地址）

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

默認(rèn)：同步 True

1.2代碼

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

3.發(fā)送請求

1.1語法

主要實現(xiàn)請求服務(wù)器操作

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

1.2代碼

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

腳下留心：

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

4.響應(yīng)請求（接受服務(wù)器返回的信息）

1.1語法

對象.responseText (獲取服務(wù)器響應(yīng)的字符串?dāng)?shù)據(jù))

對象.responseXML(獲取服務(wù)器響應(yīng)的xml數(shù)據(jù))

1.2代碼

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

案例運(yùn)行結(jié)果

腳下留心：無法響應(yīng)數(shù)據(jù)

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

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

1.3判斷服務(wù)器是否響應(yīng)成功

Onreadystatechange 作用：ajax在請求的過程中發(fā)生任何狀態(tài)的變化都會調(diào)用該方法

Readystate 作用：返回ajax的請求狀態(tài)

狀態(tài)說明：

最終代碼：以及結(jié)果

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

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

說明：

程序是從上往下進(jìn)行的，里面的代碼是等發(fā)送異步請求完了才去執(zhí)行的。

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

思考：避免接口寫錯

例如：

在實際使用中，我們?yōu)榱酥挥性谡埱蟮慕涌谡_的時候獲取相應(yīng)的數(shù)據(jù)，一般我們要判斷返回的HTTP狀態(tài)是否正確，

使用：

對象.status==200

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

5.案例聯(lián)系-檢查用戶名是否存在

1.1案例需求

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

1.2完成思路

明確需求：

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

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

第三步：使用AJAX將內(nèi)容發(fā)送給服務(wù)器端PHP文件

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

第五步：將PHP返回的結(jié)果彈出來

1.3HTML代碼

<!--

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

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

第三步：使用AJAX將內(nèi)容發(fā)送給服務(wù)器端PHP文件

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

第五步：將PHP返回的結(jié)果彈出來

-->

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

1.4PHP代碼

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

進(jìn)化版本

1)進(jìn)化要求

當(dāng)用戶名可用的時候后面增加√說可用，當(dāng)用戶名不可用的時候出現(xiàn)一個×提示當(dāng)前用戶名太火，請換一個

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將內(nèi)容發(fā)送給服務(wù)器端PHP文件
第四步：編寫PHP文件checkuser.php 接受參數(shù)，并且判斷用戶是否存在，返回結(jié)果
第五步：將PHP返回的結(jié)果彈出來
-->
<script type="text/javascript">
   //按鈕綁定事件，給input增加ID屬性
  var checkObj=document.getElementById('check');
  checkObj.onclick=function(){
      var username=document.getElementById('username').value;
      //創(chuàng)建ajax對象
      var XHRObj=new XMLHttpRequest();
      //創(chuàng)建請求頭，設(shè)置請求發(fā)送的地址和類型，并且將參數(shù)傳遞給服務(wù)端
      XHRObj.open('get','check.php?username='+username);
      //獲取服務(wù)器端返回的數(shù)據(jù)  
      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>';
                 
              }
          }
      }
      //發(fā)送請求
      XHRObj.send();
     
  }
   
</script>

三、發(fā)送GET/POST請求

1.POST和GET的區(qū)別

數(shù)據(jù)方面：GET受瀏覽器的影響

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

安全方面：POST比GET要安全

文件上傳：GET不能進(jìn)行文件上傳

2.Ajax之GET請求（加參數(shù)）

1.1實現(xiàn)方式

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

1.2代碼

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

3.AJAX之POST請求

1.1實現(xiàn)方式

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

設(shè)置發(fā)送的數(shù)據(jù)格式，采用URL編碼格式

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

對象.send(發(fā)送的數(shù)據(jù));

1.2代碼

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

【PHP代碼】

<?php

var_dump($_POST);

效果

4.練習(xí)：表單無刷新數(shù)據(jù)錄入

四、AJAX同步異步請求

1.概念

同步：等待服務(wù)器響應(yīng)完成在執(zhí)行下一段JS代碼（阻塞模式）

異步：不等服務(wù)器響應(yīng)完成直接執(zhí)行下一段JS代碼（非阻塞模式）

2.驗證同步

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

HTML【代碼】

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

【PHP代碼】

為了增加延遲效果使用sleep

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

3.驗證異步

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

【PHP代碼】

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

五、解決緩存問題

1.緩存分析

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

緩存的位置在：

選中IE瀏覽器右鍵

打開

靜態(tài)緩存目錄就出現(xiàn)再這里面了

說明：IE存在緩存

2.解決方案

1.1隨機(jī)數(shù)

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

缺點：

1.不能保證URL絕對唯一

2.產(chǎn)生大量緩存文件

1.2時間

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

優(yōu)點：保證URL絕對唯一

缺點：依然產(chǎn)生大量緩存文件

1.3設(shè)置請求頭

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

原理分析：

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

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

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

1.4設(shè)置相應(yīng)頭

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

原理分析：

利用php的header函數(shù)向響應(yīng)頭中寫數(shù)據(jù)，寫的是告訴客戶端：不要對本次的結(jié)果進(jìn)行緩存。

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

六、返回數(shù)據(jù)格式

1.數(shù)據(jù)格式分類

普通字符串文本格式：responseText

XML數(shù)據(jù)格式:responseXML

JSON 字符串?dāng)?shù)據(jù)格式：responseText (在實際工作中用到最多，最廣泛的格式)

2.返回Text數(shù)據(jù)處理

1.1HTML代碼

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

1.2PHP代碼

<?php

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

最終效果

3.返回XML數(shù)據(jù)處理

1.1HTML代碼

<script type="text/javascript">
   //創(chuàng)建AJAX對象
   var XHRObj=new XMLHttpRequest();
   //創(chuàng)建請求頭
   XHRObj.open('GET','xml.php');
   //時時監(jiān)控
   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);
               }
           }
       }
   }
   //發(fā)送請求  對象.send(POST請求則填寫POST的數(shù)據(jù)/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數(shù)據(jù)處理

1.1什么是JSON數(shù)據(jù)

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

1.2JSON數(shù)據(jù)優(yōu)勢

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

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

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

1.3服務(wù)器端JSON生成和解析

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

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

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

1.4客戶端解析JSON數(shù)據(jù)

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

? JSON.parse()

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

作用：從一個字符串中解析出json數(shù)據(jù)對象

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

? Eval

七、綜合案例-用戶注冊

1.需求

用戶會員注冊功能，用戶填寫好根據(jù)規(guī)則進(jìn)行驗證，如果驗證成功提示用戶注冊成功。

驗證規(guī)則：

1.用戶名不能為空

2.用戶名必須是由數(shù)字和字母組成，而且是在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;
       
        //創(chuàng)建AJAX對象
       var XHRObj=new XMLHttpRequest();
       //打開對象
       XHRObj.open('get','reg.php?username='+username);
       //實時監(jiān)控AJAX運(yùn)行狀態(tài)
       XHRObj.onreadystatechange=function(){
           //判斷服務(wù)器是否響應(yīng)成功
           if(XHRObj.readyState==4 && XHRObj.status==200){
               //將json數(shù)據(jù)轉(zhuǎn)換成對象
               jsonObj=JSON.parse(XHRObj.responseText);
               //判斷用戶是否操作成功進(jìn)行頁面跳轉(zhuǎn)
               if(jsonObj.state==1){
                   location.href='success.html';
                   
               }else{
                   alert(jsonObj.msg);
               }
           }
       }
       //發(fā)送請求
       XHRObj.send();
       
   }
   
 
   
   
</script>
</html>

3.PHP代碼

法： $.ajax([settings]);

$.ajax({
type: "POST",
url: "UserLogincheck",
data: {username:$("#username").val(), password:$("#password").val(),verify:$("#verify").val()},
dataType: "json",
success: function(data){
if(data==1){
// 用戶名或密碼錯誤
alert("用戶名或密碼錯誤");
}
else if(data==2){
alert("驗證碼錯誤");
// 驗證碼錯誤
}
else if(data==0){
window.location.href="index";
}
//跳轉(zhuǎn)頁面
},
error:function(XMLHttpRequest, textStatus, errorThrown){//請求失敗時調(diào)用此函數(shù)
console.log(XMLHttpRequest.status);
console.log(XMLHttpRequest.readyState);
console.log(textStatus);
}
});

php作為后臺的處理過程

public function UserLogincheck(){//用戶登陸驗證(用戶名和郵箱均可登陸)
$very=new \Think\Verify();
if($very->check($_POST['verify'])){//驗證碼正確
$user_admin=I('post.username');
$judge=" (user_name='$user_admin' or user_email='$user_admin' )";
$user_del_status=$this->user->where($judge)->getField('user_del');
if($user_del_status==0){//用戶未被注銷
$user_password=I('post.password');
$judge .="and user_password='$user_password'";
$res=$this->user->where($judge)->find();
if($res){//記錄用戶登陸狀態(tài)
$_SESSION['ADMIN_user_id']=$this->user->where($judge)->getField('user_id');
$_SESSION['ADMIN_user_name']=$data['user_name'];
$this->ajaxReturn(0);//登陸成功
}
$this->ajaxReturn(1);//用戶名或密碼錯誤
}
else
$this->ajaxReturn(8);//用戶信息被注銷
}
else
$this->ajaxReturn(2);//驗證碼錯誤
}

ajax參數(shù)詳解：

data

類型：String

發(fā)送到服務(wù)器的數(shù)據(jù)。將自動轉(zhuǎn)換為請求字符串格式。GET 請求中將附加在 URL 后。查看 processData 選項說明以禁止此自動轉(zhuǎn)換。必須為 Key/Value 格式。如果為數(shù)組，jQuery 將自動為不同值對應(yīng)同一個名稱。如 {foo:["bar1", "bar2"]} 轉(zhuǎn)換為 '&foo=bar1&foo=bar2'。

dataFilter

類型：Function

給 Ajax 返回的原始數(shù)據(jù)的進(jìn)行預(yù)處理的函數(shù)。提供 data 和 type 兩個參數(shù)：data 是 Ajax 返回的原始數(shù)據(jù)，type 是調(diào)用 jQuery.ajax 時提供的 dataType 參數(shù)。函數(shù)返回的值將由 jQuery 進(jìn)一步處理。

dataType

類型：String

預(yù)期服務(wù)器返回的數(shù)據(jù)類型。如果不指定，jQuery 將自動根據(jù) HTTP 包 MIME 信息來智能判斷，比如 XML MIME 類型就被識別為 XML。在 1.4 中，JSON 就會生成一個 JavaScript 對象，而 script 則會執(zhí)行這個腳本。隨后服務(wù)器端返回的數(shù)據(jù)會根據(jù)這個值解析后，傳遞給回調(diào)函數(shù)。可用值:

"xml": 返回 XML 文檔，可用 jQuery 處理。

"html": 返回純文本 HTML 信息；包含的 script 標(biāo)簽會在插入 dom 時執(zhí)行。

"script": 返回純文本 JavaScript 代碼。不會自動緩存結(jié)果。除非設(shè)置了 "cache" 參數(shù)。注意：在遠(yuǎn)程請求時(不在同一個域下)，所有 POST 請求都將轉(zhuǎn)為 GET 請求。（因為將使用 DOM 的 script標(biāo)簽來加載）

"json": 返回 JSON 數(shù)據(jù) 。

"jsonp": JSONP 格式。使用 JSONP 形式調(diào)用函數(shù)時，如 "myurl?callback=?" jQuery 將自動替換 ? 為正確的函數(shù)名，以執(zhí)行回調(diào)函數(shù)。

"text": 返回純文本字符串

error

類型：Function

默認(rèn)值: 自動判斷 (xml 或 html)。請求失敗時調(diào)用此函數(shù)。

有以下三個參數(shù)：XMLHttpRequest 對象、錯誤信息、（可選）捕獲的異常對象。

如果發(fā)生了錯誤，錯誤信息（第二個參數(shù)）除了得到 null 之外，還可能是 "timeout", "error", "notmodified" 和 "parsererror"。

這是一個 Ajax 事件。

global

類型：Boolean

是否觸發(fā)全局 AJAX 事件。默認(rèn)值: true。設(shè)置為 false 將不會觸發(fā)全局 AJAX 事件，如 ajaxStart 或 ajaxStop 可用于控制不同的 Ajax 事件。

ifModified

類型：Boolean

僅在服務(wù)器數(shù)據(jù)改變時獲取新數(shù)據(jù)。默認(rèn)值: false。使用 HTTP 包 Last-Modified 頭信息判斷。在 jQuery 1.4 中，它也會檢查服務(wù)器指定的 'etag' 來確定數(shù)據(jù)沒有被修改過。

jsonp

類型：String

在一個 jsonp 請求中重寫回調(diào)函數(shù)的名字。這個值用來替代在 "callback=?" 這種 GET 或 POST 請求中 URL 參數(shù)里的 "callback" 部分，比如 {jsonp:'onJsonPLoad'} 會導(dǎo)致將 "onJsonPLoad=?" 傳給服務(wù)器。

jsonpCallback

類型：String

為 jsonp 請求指定一個回調(diào)函數(shù)名。這個值將用來取代 jQuery 自動生成的隨機(jī)函數(shù)名。這主要用來讓 jQuery 生成度獨特的函數(shù)名，這樣管理請求更容易，也能方便地提供回調(diào)函數(shù)和錯誤處理。你也可以在想讓瀏覽器緩存 GET 請求的時候，指定這個回調(diào)函數(shù)名。

password

類型：String

用于響應(yīng) HTTP 訪問認(rèn)證請求的密碼

processData

類型：Boolean

默認(rèn)值: true。默認(rèn)情況下，通過data選項傳遞進(jìn)來的數(shù)據(jù)，如果是一個對象(技術(shù)上講只要不是字符串)，都會處理轉(zhuǎn)化成一個查詢字符串，以配合默認(rèn)內(nèi)容類型 "application/x-www-form-urlencoded"。如果要發(fā)送 DOM 樹信息或其它不希望轉(zhuǎn)換的信息，請設(shè)置為 false。

scriptCharset

類型：String

只有當(dāng)請求時 dataType 為 "jsonp" 或 "script"，并且 type 是 "GET" 才會用于強(qiáng)制修改 charset。通常只在本地和遠(yuǎn)程的內(nèi)容編碼不同時使用。

success

類型：Function

請求成功后的回調(diào)函數(shù)。

參數(shù)：由服務(wù)器返回，并根據(jù) dataType 參數(shù)進(jìn)行處理后的數(shù)據(jù)；描述狀態(tài)的字符串。

這是一個 Ajax 事件。

traditional

類型：Boolean

如果你想要用傳統(tǒng)的方式來序列化數(shù)據(jù)，那么就設(shè)置為 true。請參考工具分類下面的 jQuery.param 方法。

timeout

類型：Number

設(shè)置請求超時時間（毫秒）。此設(shè)置將覆蓋全局設(shè)置。

type

類型：String

默認(rèn)值: "GET")。請求方式 ("POST" 或 "GET")，默認(rèn)為 "GET"。注意：其它 HTTP 請求方法，如 PUT 和 DELETE 也可以使用，但僅部分瀏覽器支持。

url

類型：String

默認(rèn)值: 當(dāng)前頁地址。發(fā)送請求的地址。

username

類型：String

用于響應(yīng) HTTP 訪問認(rèn)證請求的用戶名。

xhr

類型：Function

需要返回一個 XMLHttpRequest 對象。默認(rèn)在 IE 下是 ActiveXObject 而其他情況下是 XMLHttpRequest 。用于重寫或者提供一個增強(qiáng)的 XMLHttpRequest 對象。這個參數(shù)在 jQuery 1.3 以前不可用。

在線咨詢

上一篇：開源的硬件和軟件平臺-Arduino
下一篇：WEBAPP秘密開發(fā)筆記第五集

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

「jQuery-6」 ajax

. ajax的介紹

2. ajax的使用

習(xí)大綱

1.什么是AJAX

1.1概念

1.2特點

1.3應(yīng)用場景

2.AJAX工作流程

3.AJAX的優(yōu)點

二、AJAX使用

1.創(chuàng)建ajax對象

2.建立鏈接

1.1語法

1.2代碼

3.發(fā)送請求

1.1語法

1.2代碼

4.響應(yīng)請求（接受服務(wù)器返回的信息）

1.1語法

1.2代碼

1.3判斷服務(wù)器是否響應(yīng)成功

5.案例聯(lián)系-檢查用戶名是否存在

1.1案例需求

1.2完成思路

1.3HTML代碼

1.4PHP代碼

三、發(fā)送GET/POST請求

1.POST和GET的區(qū)別

2.Ajax之GET請求（加參數(shù)）

1.1實現(xiàn)方式

1.2代碼

3.AJAX之POST請求

1.1實現(xiàn)方式

1.2代碼

四、AJAX同步異步請求

1.概念

2.驗證同步

3.驗證異步

五、解決緩存問題

1.緩存分析

2.解決方案

1.1隨機(jī)數(shù)

1.2時間

1.3設(shè)置請求頭

1.4設(shè)置相應(yīng)頭

六、返回數(shù)據(jù)格式

1.數(shù)據(jù)格式分類

2.返回Text數(shù)據(jù)處理

1.1HTML代碼

1.2PHP代碼

3.返回XML數(shù)據(jù)處理

1.1HTML代碼

4.返回JSON數(shù)據(jù)處理

1.1什么是JSON數(shù)據(jù)

1.2JSON數(shù)據(jù)優(yōu)勢

1.3服務(wù)器端JSON生成和解析

1.4客戶端解析JSON數(shù)據(jù)

? JSON.parse()

? Eval

七、綜合案例-用戶注冊

1.需求

2.HTML代碼

3.PHP代碼

您的項目需求