前端設計-Ajax技術及實例展示

jax指的是異步JavaScript和XML，是一套綜合了多項技術的瀏覽器端網頁開發技術。也是目前網頁前端設計較為流行使用的技術。Ajax能夠真正實現網頁前端與業務后臺的分離，體現出網頁設計大前端的設計思想。所有的前端設計只需要通過Ajax將消息傳遞給業務邏輯，運算完直接發送前端。其實現原理如下：

工作原理及過程

一般情況下，在處理具體業務是網頁通常采用發送HTTP請求中帶有參數形式傳遞命令與數據，處理頁面接收到數據之后進行處理。這種情況需要頁面跳轉或者頁面刷新，增加了服務器與客戶端通信的開銷。而使用Ajax技術進行業務處理時只需要通過Ajax與Json實現在不刷新頁面前提下完成業務功能，在滿足前后端分離的基礎上進一步降低網絡通信量。本文針對初學者以實例形式對Ajax應用進行說明，希望對初學者有所幫助。

設計案例

案例描述：前端為用戶信息查詢頁面login.html,提供文本框用于接收用戶姓名，業務邏輯處理頁面為query.php,模擬接收用戶姓名，執行查詢，返回用戶基本信息，前端login.html通過Ajax回調函數讀取信息并以table形式進行輸出顯示。其前端頁面設計如下：

前端測試頁面

基本語法

(1) XMLHttpRequest對象

XMLHttpRequest是 AJAX 的基礎。用于向服務器發送request請求實現數據交換。由于是對象XMLHttpRequest在使用的時候需要用new進行對象的實例化。如：var xmlhttp = new XMLHttpRequest();

(2) 發送請求open()與send()

通過使用open與send方法將客戶端Ajax請求發送到服務器端，其中open請求帶有請求類型等參數，send可以帶傳遞的參數值。兩函數基本語法如下：

open(method,url,async)//方法、處理URL，異步/同步
send(string)//post類型時傳遞參數

(3) onreadystatechange 事件

通過使用該事件用于響應服務器端狀態的改變，readyState與status，其中readyState=4表示服務器請求已完成，響應已就緒。status=200表示已就緒。因此可以在該事件響應函數中去接收服務端傳遞數據。

(4) 服務器返回值類型responseText與responseXML,其中responseText表示接收服務器發送過來的字符串。

案例實現

（1）獲取表單用戶名值 var uname=document.getElementById('name').value;

（2）發送Ajax POST請求

Ajax Post請求

（3）（服務器請求處理）業務邏輯處理

php處理業務邏輯

（4）前端獲取服務器值并輸出顯示表格

前端顯示服務器發送數據（在不刷新頁面情況下）

以上給出使用JavaScript原生態Ajax進行服務器與客戶端瀏覽器進行數據交互的簡單例題，重點為XMLHttpRequest對象的使用，業務邏輯處理使用了PHP。整體實現效果GIF動圖描述如下：

Ajax實現效果

本頭條號長期關注編程資訊分享；編程課程、素材、代碼分享及編程培訓。如果您對以上方面有興趣或代碼錯誤、建議與意見，可以聯系作者，共同探討。期待大家關注！如需案例完整代碼請關注并私信，往期前端設計文章鏈接如下：

前端設計-響應式頁面開發基礎
Web開發前端、后端與全棧的區別是什么？

jax學習

大家應該都知道mysql數據庫，服務器是一臺機器，他的的作用就是用來存儲各種數據資源，而數據庫存在的意義就是幫助服務器更好得打理數據！

比如，我們的頁面上有一個按鈕，用戶點了一下這個按鈕，頁面就可以通過萬維網來與目標地址進行數據交互！我們的頁面就會發送一個網絡請求過去，目標地址的服務器就會接受到這個請求，服務器已經封裝好了一些后端代碼，這個后端代碼時刻運行在服務器上，后端代碼就會做一些處理！去數據庫中幫我們把數據取出來，再拿到這個數據，再通過網絡請求把這個數據返回給我們的頁面，于是我們的頁面就可以拿到這一段數據，把數據展示在頁面上，當然，這其中有很多細節我們沒有聊到，大概是這樣一個過程！那么，這個請求該怎么發出去呢？

這就是我們今天要學的Ajax

一、Ajax基礎介紹

Ajax（Async JavaScript And XML）即異步 JavaScript 和 XML，是一種在無需重新加載整個網頁的情況下，能夠更新部分網頁的技術。通過在后臺與服務器進行少量數據交換，Ajax 可以使網頁實現異步更新。這意味著可以在不重新加載整個網頁的情況下，更新網頁的某部分內容。

Ajax 主要包括以下幾個部分：

JavaScript：用于實現客戶端的邏輯和與服務器的交互。
XMLHttpRequest：這是 JavaScript 提供的一個對象，用于向服務器發送請求和接收響應。
服務器端腳本：通常使用服務器端語言（如 PHP、Python、Ruby 等）來處理請求并生成響應。
數據格式：Ajax 通信中常用的數據格式包括 XML 和 JSON。

使用 Ajax 技術，可以在不刷新頁面的情況下，向服務器請求數據、更新網頁內容、驗證用戶輸入等。

二、Ajax實現

今天我們就拿到大佬的網易云音樂API （node）:網易云音樂 NodeJS 版 API (neteasecloudmusicapi.js.org)

**API：**應用程序編程接口。它是一組預定義的函數、方法、屬性或類，用于與 JavaScript 引擎或其他 JavaScript 庫進行交互。

我們在github拿到這一段后端代碼之后，我們把它運行在自己的電腦上！這樣我們就有了一個后端代碼!

地址為：http://localhost:3000

這里我們為大家推薦一個插件：JSONVue

這個插件可以幫助我們處理這種情況：比如我們直接通過瀏覽器訪問接口數據，看到的數據是亂的，我們就可以通過這個插件讓我們的數據看起來更舒服！

比如我們拿到這個接口當中的

新歌速遞

接口地址 : /top/song

調用例子 : /top/song?type=96

我們在瀏覽器中輸入：localhost:3000/top/song?type=96

我們能看到這樣一個頁面就說明后臺啟動成功了！

接下來我們就使用一下Ajax

案例一：Ajax基本知識點-新歌速遞

<body>
<button id="btn">新歌速遞</button>
<ul id="ul">
</ul>
<script>
const btn = document.getElementById("btn");
btn.addEventListener("click",()=>{
//創建實例
let xhr = new XMLHttpRequest();
//準備階段
xhr.open('GET','http://localhost:3000/top/song?type=7',true);
// 接收服務器返回的數據
xhr.onreadystatechange=()=>{
if(xhr.readyState===4&&xhr.status===200){
console.log(JSON.parse(xhr.responseText));
let result = JSON.parse(xhr.responseText);
result.data.forEach((item)=>{
let li = document.createElement("li");
li.innerHTML = item.name;
document.getElementById("ul").appendChild(li);
})
}
}
// 發送請求
xhr.send();
  
})
</script>
</body>

這就是我們一個案例我們來為大家逐條分析一下！

我們要實現的效果是：通過這個新歌速遞的按鈕，點一下，就可以拿到后端的數據并且展示在頁面上。

這里我們為這個按鈕添加一個點擊事件,通過傳統的js語法

const btn = document.getElementById("btn");
btn.addEventListener("click",()=>{}

接下來就開始我們的AJax操作了

let xhr = new XMLHttpRequest();

這是js封裝好的用于發送http請求的類,用這個類發送http請求，就相當于用瀏覽器發http請求，xhr就是我們拿到一個實例對象！

xhr.open('GET','http://localhost:3000/top/song?type=7',true);

open方法用來做請求的準備工作！

第一個參數為請求的類型,'GET'是一種請求類型，這是常見的一種請求方式，請求方式有很多種：POST PUT DELETE 等等，用的最多是GET 和 POST

ajax請求的方式有以下幾種：

GET：向服務器請求獲取數據，通常用于請求靜態資源。
POST：向服務器提交數據，通常用于提交表單數據或上傳文件。
PUT：向服務器更新數據，通常用于更新資源的全部內容。
DELETE：向服務器刪除數據，通常用于刪除資源。
HEAD：向服務器請求獲取資源的頭部信息，通常用于檢查資源是否存在或檢查資源的更新時間等。
OPTIONS：向服務器請求獲取可用的請求方法，通常用于跨域請求或預檢請求。

第二個參數就是我們的接口地址了！這里我們用的是'http://localhost:3000/top/song?type=7'

第三個參數是一個布爾值 ture||false 表示是否異步請求 (一般我們用異步,使用同步的話假如遇到網絡情況不好的時候，會阻塞后面代碼的運行！)

xhr.send();

用于發送網絡請求

xhr.onreadystatechange=()=>{
if(xhr.readyState===4&&xhr.status===200){
console.log(JSON.parse(xhr.responseText));
let result = JSON.parse(xhr.responseText);
result.data.forEach((item)=>{
let li = document.createElement("li");
li.innerHTML = item.name;
document.getElementById("ul").appendChild(li);
})
}
}

這里負責接收服務器返回的數據！并且把數據展示在頁面上！

if(xhr.readyState===4&&xhr.status===200){}

一般我們要加上這樣一個判斷條件，其中readyState 4 表示請求已經完成，status 200 表示請求成功

readyState表示的是Ajax的狀態

0 -- xhr剛剛創建，請求還沒發
1 -- open準備完成
2 -- 請求已經發送，客戶端接收到了響應頭
3 -- 接收到服務器返回的響應體（數據包），正在解析
4 -- 解析完成

status表示的是http的狀態碼,下面是一些常見的狀態碼:

200 OK：請求成功，服務器成功返回了請求的資源。
301 Moved Permanently：永久重定向，請求的資源已永久移動到新的位置。
302 Found：臨時重定向，請求的資源臨時移動到新的位置。
400 Bad Request：客戶端請求有錯誤，服務器無法理解請求。
401 Unauthorized：請求未經授權，客戶端需要進行身份驗證。
403 Forbidden：服務器拒絕了請求，客戶端沒有權限訪問該資源。
404 Not Found：服務器找不到請求的資源。
500 Internal Server Error：服務器內部發生錯誤，無法完成請求。
502 Bad Gateway：代理服務器從上游服務器收到了無效的響應。
503 Service Unavailable：服務器當前無法處理請求，可能是因為維護或過載。

console.log(JSON.parse(xhr.responseText));

responseText 就是后臺的數據返回的數據是一個JSON 字符串我們要處理一下數據，將數據轉換為對象JSON.parse(xhr.responseText)把字符串轉為對象。

let result = JSON.parse(xhr.responseText);

使用result存儲轉為對象后的數據.

result.data.forEach((item)=>{
let li = document.createElement("li");
li.innerHTML = item.name;
document.getElementById("ul").appendChild(li);
})

使用js中的forEach將數據中的歌曲名稱展示在頁面上！我們來看看效果！

案例二、Jquery接口封裝 -新歌速遞

我們在上述案例的基礎上，轉換為jquery的封裝

推薦一個網站：BootCDN前端工具網站BootCDN - Bootstrap 中文網開源項目免費 CDN 加速服務

jquery引入（script）:<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>

<body>
<button id="btn">新歌速遞</button>
<ul id="ul">
</ul>
<!-- jquery 的引入-->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
<script>
const btn = document.getElementById("btn");
btn.addEventListener("click",()=>{
// jquery的語法 異步代碼
$.ajax({
url:'http://localhost:3000/top/song?type=7',
method:'GET',
dataType: 'json',
success:function(data){
// success回調 拿到數據響應的時候操作
// 要放在里面，因為請求是異步的，我們要拿到數據之后，才能操作數據
console.log(data);
}
})
  
})
</script>
</body>

這里我們使用的是jquery封裝接口來進行與后端的數據交互

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>

這里是jquery的引入！當然方式不止這一種，還有很多種方式，我們只是拿到其中的一種而已，接下來我們就在在按鈕的點擊事件中直接使用jquery的語法

// jquery的語法 異步代碼
$.ajax(
{
url:'http://localhost:3000/top/song?type=7',
method:'GET',
dataType: 'json',
success:function(data){
// success回調 拿到數據響應的時候操作
// 要放在里面，因為請求是異步的，我們要拿到數據之后，才能操作數據
console.log(data);
}
})

我們可以直接使用$.ajax對ajax進行封裝，在$.ajax()的括號中加入一個對象{}

{
url:'http://localhost:3000/top/song?type=7',
method:'GET',
dataType: 'json',
success:function(data){
console.log(data);
}
}

其中

url:是接口的地址，method:是請求的類型，dataType:告訴后端數據返回的類型

success:success回調,是拿到數據后，我們要進行的操作！要放在這個對象里面，因為請求是異步的，我們要拿到數據之后，才能操作數據。

我們來看看打印

案例三、fetch()原生js自帶的方法-新歌速遞

你可以在MDN前端字典網站中找到它！MDN Web Docs (mozilla.org)

<body>
<button id="btn">新歌速遞</button>
<ul id="ul">
</ul>
<!-- jquery 的引入-->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
<script>
const btn = document.getElementById("btn");
btn.addEventListener("click",()=>{
// 說明fetch是一個異步函數,會返回一個new promise 并且會把后端返回的數據通過resolve拋出這個數據
fetch("http://localhost:3000/top/song?type=7")
.then(data=>{
// data是整個響應體 data可以調用json()方法 得到一個promise對象
return data.json();
})
.then((res)=>{
console.log(res);
})
})
</script>
</body>

這里還是通過點擊事件

fetch("http://localhost:3000/top/song?type=7")

這是官方的fetch方法，其中帶一個形參,接收的就是你的接口地址！

并且，在后面可以接.then()，這說明fetch是一個異步函數，并且會返回一個new promise對象，（返回了new promise才能接.then），并且會把后端返回的數據通過resolve拋出這個數據！

then(data=>{
// data是整個響應體 data可以調用json()方法 得到一個promise對象
return data.json();
})

這是第一個.then，在這里我們拿到的data是整個響應體，我們可以返回data.json()之后再接.then，注意這里.json是這個請求體能調用的方法,能得到一個promise對象

.then((res)=>{
console.log(res);
})

這里是第二個.then這里我們就能拿到請求體拋出的數據了！接收一個形參res這個就是我們拿到的數據!

我們來看看打印的結果！

最后

各位老鐵都看到這里了！coding不易，給我點上一個小小的贊吧！

后續我還會大家持續輸出vue3，Element-ui以及相關后端的文章！讓我們一起跨步向前！

那么，我們今天就到這啦！

作者：Aidan路修遠i
鏈接：https://juejin.cn/post/7325724706140225577

習大綱

基礎學習路徑

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

在線咨詢

上一篇：HTML5實例002-1分鐘用javascript實現倒計時效果
下一篇：快速將PPT轉換為HTML（h5）

您的項目需求

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

整合營銷服務商

前端設計-Ajax技術及實例展示

設計案例

基本語法

案例實現

jax學習

一、Ajax基礎介紹

二、Ajax實現

案例一：Ajax基本知識點-新歌速遞

案例二、Jquery接口封裝 -新歌速遞

案例三、fetch()原生js自帶的方法-新歌速遞

最后

習大綱

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基礎介紹

案例二、Jquery接口封裝 -新歌速遞

二、AJAX使用

五、解決緩存問題

六、返回數據格式

七、綜合案例-用戶注冊