web前端ajax筆記之一

習大綱

基礎學習路徑

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

什么會出現跨域

跨域問題來源于JavaScript的同源策略，即只有協議+主機名+端口號 (如存在)相同，則允許相互訪問。也就是說JavaScript只能訪問和操作自己域下的資源，不能訪問和操作其他域下的資源。跨域問題是針對JS和ajax的，html本身沒有跨域問題，比如a標簽、script標簽、甚至form標簽（可以直接跨域發送數據并接收數據）等

如何解決跨域問題

JSONP
JSONP是JSON with Padding的略稱。它是一個非官方的協議，它允許在服務器端集成Script tags返回至客戶端，通過javascript callback的形式實現跨域訪問（這僅僅是JSONP簡單的實現形式）。關于jsonp的使用方式，可以參考http://blog.csdn.net/alen1985/article/details/6365394，優缺點可以參考http://blog.csdn.net/z69183787/article/details/19191385
添加響應頭，允許跨域
addHeader(‘Access-Control-Allow-Origin:*’);//允許所有來源訪問
addHeader(‘Access-Control-Allow-Method:POST,GET’);//允許訪問的方式
代理的方式
服務器A的test01.html頁面想訪問服務器B的后臺action，返回“test”字符串，此時就出現跨域請求，瀏覽器控制臺會出現報錯提示，由于跨域是瀏覽器的同源策略造成的，對于服務器后臺不存在該問題，可以在服務器A中添加一個代理action，在該action中完成對服務器B中action數據的請求，然后在返回到test01.html頁面。

Demo1(添加允許跨域請求的響應頭)

html頁面

Web后臺

按照上面的訪問，由于127.0.0.1:8080和localhost:8081的域和端口不同，所以同樣會出現跨域問題。

現在用添加響應頭的方式

Demo2(jsonp的callback方式)

這里演示的是jquery的ajax，后臺采用的是webservice接口形式

注意此時的dataType為jsonp格式，看看后臺的接收

，

我們返回的其實就是一個函數的調用文本，這里注意，callback的名稱，由于前臺沒有指定callback函數，所以這里自動生成了，如果想自定義回調函數名稱如下操作，添加一行請求參數

這樣后臺的回調函數名就變成了mytest

瀏覽器發出的請求格式和響應數據如下，其實就是返回函數的調用，而需要返回的數據則以函數參數值的形式填入

此時控制臺就能夠獲取到“hello world”

）url:

　　要求為String類型的參數，（默認為當前頁地址）發送請求的地址。

2）type:

　　要求為String類型的參數，請求方式（post或get）默認為get。注意其他http請求方法，例如put和delete也可以使用，但僅部分瀏覽器支持。

3）timeout:

　　要求為Number類型的參數，設置請求超時時間（毫秒）。此設置將覆蓋$.ajaxSetup()方法的全局設置。

4）async:

　　要求為Boolean類型的參數，默認設置為true，所有請求均為異步請求。如果需要發送同步請求，請將此選項設置為false。

注意，同步請求將鎖住瀏覽器，用戶其他操作必須等待請求完成才可以執行。

5）cache:

　　要求為Boolean類型的參數，默認為true（當dataType為script時，默認為false），設置為false將不會從瀏覽器緩存中加載請求信息。

6）data:

　　要求為Object或String類型的參數，發送到服務器的數據。如果已經不是字符串，將自動轉換為字符串格式。get請求中將附加在url后。防止這種自動轉換，可以查看　　processData（防止自動轉換）選項。對象必須為key/value格式，例如{foo1:"bar1",foo2:"bar2"}轉換為&foo1=bar1&foo2=bar2。如果是數組，JQuery將自動為不同值對應同一個名稱。例如{foo:["bar1","bar2"]}轉換為&foo=bar1&foo=bar2。

7）dataType:

　　要求為String類型的參數，預期服務器返回的數據類型。如果不指定，JQuery將自動根據http包mime信息返回responseXML或responseText，并作為回調函數參數傳遞。可用的類型如下：

　　● xml：返回XML文檔，可用JQuery處理。

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

　　● script：返回純文本JavaScript代碼。不會自動緩存結果。除非設置了cache參數。注意在遠程請求時（不在同一個域下），所有post請求都將轉為get請求。

　　● json：返回JSON數據。

　　● jsonp：JSONP格式。使用SONP形式調用函數時，例如myurl?callback=?，JQuery將自動替換后一個“?”為正確的函數名，以執行回調函數。

　　● text：返回純文本字符串。

8）beforeSend：

　　這個參數主要是為了在向服務器發送請求前，執行一些操作。要求為Function類型的參數，發送請求前可以修改XMLHttpRequest對象的函數，例如添加自定義HTTP頭。在beforeSend中如果返回false可以取消本次ajax請求。XMLHttpRequest對象是惟一的參數。

     function(XMLHttpRequest){
        this;  //調用本次ajax請求時傳遞的options參數
      }

9）complete：

　　要求為Function類型的參數，請求完成后調用的回調函數（請求成功或失敗時均調用）。參數：XMLHttpRequest對象和一個描述成功請求類型的字符串。

     function(XMLHttpRequest, textStatus){
       this;  //調用本次ajax請求時傳遞的options參數
     }

10）success：

　　要求為Function類型的參數，請求成功后調用的回調函數，有兩個參數。

（1）由服務器返回，并根據dataType參數進行處理后的數據。

（2）描述狀態的字符串。

     function(data, textStatus){
      //data可能是xmlDoc、jsonObj、html、text等等
      this; //調用本次ajax請求時傳遞的options參數
     }

11）error:

要求為Function類型的參數，請求失敗時被調用的函數。該函數有3個參數，即XMLHttpRequest對象、錯誤信息、捕獲的錯誤對象(可選)。ajax事件函數如下：

    function(XMLHttpRequest, textStatus, errorThrown){
     //通常情況下textStatus和errorThrown只有其中一個包含信息
     this;  //調用本次ajax請求時傳遞的options參數
    }

12）contentType：

要求為String類型的參數，當發送信息至服務器時，內容編碼類型默認為"application/x-www-form-urlencoded"。該默認值適合大多數應用場合。

13）dataFilter：

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

      function(data, type){
        //返回處理后的數據
        return data;
      }

14）dataFilter：

   function(data, type){
        //返回處理后的數據
        return data;
      }

15）global：

要求為Boolean類型的參數，默認為true。表示是否觸發全局ajax事件。設置為false將不會觸發全局ajax事件，ajaxStart或ajaxStop可用于控制各種ajax事件。

16）ifModified：

要求為Boolean類型的參數，默認為false。僅在服務器數據改變時獲取新數據。服務器數據改變判斷的依據是Last-Modified頭信息。默認值是false，即忽略頭信息。

17）jsonp：

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

18）username：

要求為String類型的參數，用于響應HTTP訪問認證請求的用戶名。

19）password：

要求為String類型的參數，用于響應HTTP訪問認證請求的密碼。

20）processData：

要求為Boolean類型的參數，默認為true。默認情況下，發送的數據將被轉換為對象（從技術角度來講并非字符串）以配合默認內容類型"application/x-www-form-urlencoded"。如果要發送DOM樹信息或者其他不希望轉換的信息，請設置為false。

21）scriptCharset：

要求為String類型的參數，只有當請求時dataType為"jsonp"或者"script"，并且type是GET時才會用于強制修改字符集(charset)。通常在本地和遠程的內容編碼不同時使用。

在線咨詢

上一篇：HTML5 簡介
下一篇：38個不可錯過的實用前端工具

您的項目需求

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

整合營銷服務商

web前端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代碼

您的項目需求

二、AJAX使用

三、發送GET/POST請求

六、返回數據格式

七、綜合案例-用戶注冊