我們在之前jsp中編寫的前端頁面，在沒有學到AJAX時，會遇到這樣的問題，我們返回響應的結果展示在頁面總會替代掉當前頁面，展示出新的內容，所有當我們想要保留一些頁面上的信息，去展示響應的結果時就可以使用AJAX技術。

AJAX其實就是頁面局部刷新技術，他普遍應用在地圖展示，搜索框提示語等功能上，他的運行原理大致是這樣的，

Ajax的工作原理相當于在用戶和服務器之間加了—個中間層(AJAX引擎)，使用戶操作與服務器響應異步化。并不是所有的用戶請求都提交給服務器。像—些數據驗證和數據處理等都交給Ajax引擎自己來做,，只有確定需要從服務器讀取新數據時再由Ajax引擎代為向服務器提交請求。

1.創建ajax具體流程

• 1創建ajax引擎對像 2.聲明監聽函數
• 3.創建并發送ajax請求
• 4.其他處理

一個例子：用來判斷輸入框中的用戶名字是否已被占用

function checkUname(){//獲取用戶名信息var uname=document.getElementById("uname").value;//創建ajax引擎對象var ajax;if(window.XMLHttpRequest){ajax=new XMLHttpRequest();}else if(window.ActiveXObject){ajax=new ActiveXObject("Msxml2.XMLHTTP");}//聲明監聽函數ajax.onreadystatechange=function(){//判斷ajax狀態碼if(ajax.readyState==4){//判斷響應狀態碼if(ajax.status==200){//獲取響應數據（普通字符串或者json格式的字符串）var data=ajax.responseText;//處理響應數據if(eval(data)){//獲取Span對象var span=document.getElementById("unameSpan");//設置span顏色span.style.color="red";//將數據填充到span中span.innerHTML="用戶名已被注冊";}else{//獲取Span對象var span=document.getElementById("unameSpan");//設置span顏色span.style.color="green";//將數據填充到span中span.innerHTML="用戶名ok";} } } //創建并發送請求 //創建請求ajax.open("get","data?uname="+uname);//發送請求ajax.send(null); }

這里的代碼含義具體是這樣的：

if(window.XMLHttpRequest){//火狐ajax=new XMLHttpRequest(); }else if(window.ActiveXObject){//ieajax=new ActiveXObject("Msxml2.XMLHTTP"); }

這是創建AJAX對象的代碼，上面的是對于火狐瀏覽器而說的，下面的是ie瀏覽器的對象，因為瀏覽器的兼任問題，所以最好寫出這兩個方式。

ajax.onreadystatechange=function(){}

這是聲明事件監聽：監聽ajax對象的屬性readystate的值，因為一旦readystate的值發生改變就會觸發聲明的函數的執行。我們想要在ajax發送完請求后做出的處理，可以從狀態碼判斷狀態，具體的狀態碼是這樣的：

ajax的狀態碼之readyState的值:

• 0:表示ajax引擎對象創建
• 1:表示請求創建但是未發送 ajax.open("get","my");
• 2:請求發送 ajax.send(null);
• 3:請求處理完畢，正在接收響應內容
• 4:響應內容接收完畢(重要狀態)

ajax.status

這是表示服務器響應的狀態碼：大致與服務器返回的一致，例如常見的404，500等

ajax之響應狀態碼：ajax.status

• 200:表示一切正常
• 404:資源未找到
• 500:服務器內部錯誤

ajax.open("get","data?uname="+uname);

這時創建ajax的發送請求

創建ajax請求(設置異步或者同步)ajax.open(method,url,ansyc);

• 其中：method:表示請求方式
• get方式:請求數據以?隔開的形式拼接在url的后面。并且請求數據不能寫在send方法中
• post方式:post方式需要單獨的進行請求數據的設置。使用ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");設置請求數據為鍵值對數據。如果有請求數據則ajax.send("鍵值對數據&鍵值對數據..."),如果沒有請求數據，則ajax.send(null)
• url:請求地址
• ansyc:設置異步或者同步請求，true表示異步，false，表示同步。默認是異步的。
• 異步：當前js函數繼續執行，無須等待ajax請求的響應以及響應的處理。
• 同步：當前js函數會等待ajax請求以及響應，當ajax響應處理完畢后，繼續執行函數的剩余代碼。

ajax.send(null);

發送ajax請求

• //get方式
• ajax.send(null);

• //post方式
• ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
• ajax.send("uname=張三&pwd=123");

總結

以上是生活随笔為你收集整理的$.ajax data怎么处理_AJAX的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。