「jQuery-6」 ajax

. ajax的介紹

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

這里提示一下大家, 在html頁面使用ajax需要在web服務器環境下運行, 一般向自己的web服務器發送ajax請求。

2. ajax的使用

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

示例代碼:

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

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

ajax方法的參數說明:

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

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

ajax的簡寫方式:

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

ajax簡寫方式的示例代碼:

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

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


</script>

$.get和$.post方法的參數說明:

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

url 請求地址
data 設置發送給服務器的數據，沒有參數不需要設置
success 設置請求成功后的回調函數

data 請求的結果數據
status 請求的狀態信息, 比如: "success"
xhr 底層發送http請求XMLHttpRequest對象

dataType 設置返回的數據格式

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

error 表示錯誤異常處理

func 錯誤異常回調函數

習大綱

基礎學習路徑

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代碼

法： $.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";
}
//跳轉頁面
},
error:function(XMLHttpRequest, textStatus, errorThrown){//請求失敗時調用此函數
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){//記錄用戶登陸狀態
$_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參數詳解：

data

類型：String

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

dataFilter

類型：Function

給 Ajax 返回的原始數據的進行預處理的函數。提供 data 和 type 兩個參數：data 是 Ajax 返回的原始數據，type 是調用 jQuery.ajax 時提供的 dataType 參數。函數返回的值將由 jQuery 進一步處理。

dataType

類型：String

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

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

"html": 返回純文本 HTML 信息；包含的 script 標簽會在插入 dom 時執行。

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

"json": 返回 JSON 數據。

"jsonp": JSONP 格式。使用 JSONP 形式調用函數時，如 "myurl?callback=?" jQuery 將自動替換 ? 為正確的函數名，以執行回調函數。

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

error

類型：Function

默認值: 自動判斷 (xml 或 html)。請求失敗時調用此函數。

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

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

這是一個 Ajax 事件。

global

類型：Boolean

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

ifModified

類型：Boolean

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

jsonp

類型：String

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

jsonpCallback

類型：String

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

password

類型：String

用于響應 HTTP 訪問認證請求的密碼

processData

類型：Boolean

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

scriptCharset

類型：String

只有當請求時 dataType 為 "jsonp" 或 "script"，并且 type 是 "GET" 才會用于強制修改 charset。通常只在本地和遠程的內容編碼不同時使用。

success

類型：Function

請求成功后的回調函數。

參數：由服務器返回，并根據 dataType 參數進行處理后的數據；描述狀態的字符串。

這是一個 Ajax 事件。

traditional

類型：Boolean

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

timeout

類型：Number

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

type

類型：String

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

url

類型：String

默認值: 當前頁地址。發送請求的地址。

username

類型：String

用于響應 HTTP 訪問認證請求的用戶名。

xhr

類型：Function

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

在線咨詢

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

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

「jQuery-6」 ajax

. ajax的介紹

2. ajax的使用

習大綱

1.什么是AJAX

1.1概念

1.2特點

1.3應用場景

2.AJAX工作流程

3.AJAX的優點

二、AJAX使用

1.創建ajax對象

2.建立鏈接

1.1語法

1.2代碼

3.發送請求

1.1語法

1.2代碼

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

1.1語法

1.2代碼

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

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

1.1案例需求

1.2完成思路

1.3HTML代碼

1.4PHP代碼

三、發送GET/POST請求

1.POST和GET的區別

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

1.1實現方式

1.2代碼

3.AJAX之POST請求

1.1實現方式

1.2代碼

四、AJAX同步異步請求

1.概念

2.驗證同步

3.驗證異步

五、解決緩存問題

1.緩存分析

2.解決方案

1.1隨機數

1.2時間

1.3設置請求頭

1.4設置相應頭

六、返回數據格式

1.數據格式分類

2.返回Text數據處理

1.1HTML代碼

1.2PHP代碼

3.返回XML數據處理

1.1HTML代碼

4.返回JSON數據處理

1.1什么是JSON數據

1.2JSON數據優勢

1.3服務器端JSON生成和解析

1.4客戶端解析JSON數據

? JSON.parse()

? Eval

七、綜合案例-用戶注冊

1.需求

2.HTML代碼

3.PHP代碼

您的項目需求