本篇文章主要的介紹了關於ajax的背景定義，還有關於ajax的個人使用總結，現在就讓我們一起來看看這篇文章吧
本文有如下幾個內容：
什麼是AJAX
AJAX出現的背景
AJAX的原理
AJAX的定義
AJAX的開發步驟
一個簡單的demo
AJAX技術的優缺點
什麼是AJAX？
通過查閱維基百科我們可以看到這樣一段話：
AJAX即“Asynchronous JavaScript and XML”（非同步JavaScript與XML技術），指的是一套綜合了多項技術的瀏覽器端網頁開發技術。
那麼，現在我們現在就有一個大致的印象了，AJAX=JavaScript+XML。而js和xml我們應該都不陌生。
AJAX出現的背景
回顧我們的開發旅程，在原來使用Servlet+JSP+JavaBean開發的過程中，我們的Web應用允許使用者在網頁端填寫並提交表單（Form），以向網頁伺服器發送請求（Request）。伺服器接收請求並處理傳來的表單，返迴響應(Response)，瀏覽器取得響應後，通過解析將頁面展示在瀏覽器上，這樣就完成了一次使用者與伺服器的互動。
然而，這種模式存在一些問題。現在看這樣一個例子：瀏覽器端展示了使用者登陸介面，當使用者輸入使用者名稱、密碼及驗證碼後，資料被發送到了伺服器，假定我們在Servlet中處理請求後發現使用者名稱及密碼不匹配，我們接下來會做什嗎？
我們會重新將頁面連同錯誤資訊的響應返回給瀏覽器端，瀏覽器在解析響應後對資訊進行展示，使用這樣的開發流程，無論業務實現的多麼完美都會有一些固有的問題：
首先，浪費頻寬。在前後兩個頁面中除了展示錯誤資訊的部分外其它元素全都是相同的。
其次，使用者體驗差。假設使用者在表單中不小心輸入了錯誤的使用者名稱，在提交表單後就會出現等待一段時間後頁面被重新整理、並提示使用者名稱錯誤的情況，這樣使用者又得重新輸入一遍使用者名稱及密碼，體驗極不友好。在使用者的網速比較慢的情況下，使用者體驗還會更差。
那麼有沒有什麼方法可以解決這種問題呢？也就是，能不能在使用者剛輸入使用者名稱時就可以得到反饋呢？
AJAX的大致思路
在js的XMLHttpRequest對象出現之前是沒有辦法的，但是在它出現之後，前輩們想到了一種比較好的解決方案，即：使用XMLHttpRequest對象作為Agent來將請求發送給伺服器，並用它來接收伺服器返回的資料，這樣就可以不跳轉頁面完成資料的互動，而且只需要傳輸少量必要資料，因此對網速的要求也變低了。
但是，還有兩個問題沒有解決：
1.如何根據伺服器端返回的資料動態更改頁面，以達到與使用者互動的作用？
2.如何規定伺服器發送回來的資料格式，使它更通用，並且傳輸量儘可能的少呢？
對於1：前輩們選擇了使用JavaScript，個人理解這樣做的原因有兩個，第一，JavaScript足夠流行，幾乎所有的主流瀏覽器都對JavaScript提供了支援；第二，JavaScript可以通過DOM編程的方式來動態改變網頁的內容。
對於2：前輩們選擇了XML，我想可能是因為它文法足夠嚴格、語義明確而且更加通用吧。但是我認為傳輸的資料格式對使用AJAX並沒有影響。例如，我們可以選擇傳輸Json來使傳輸的資料更加少，甚至可以選擇傳輸一段有意義的字串，只要伺服器端與瀏覽器端開發人員對格式進行了約定即可。
AJAX定義
現在，我們就可以定義AJAX了：AJAX 是一種用於建立快速動態網頁的技術。通過在後台與伺服器進行少量資料交換，AJAX 可以使網頁實現非同步更新。這意味著可以在不重新載入整個網頁的情況下，對網頁的某部分進行更新。
AJAX技術的開發步驟
通過上面的介紹，我們知道瞭解決傳統的資源浪費問題的思路，現在就來看一下，如何來實現吧！
關於AJAX的實現，可以去查看W3School關於AJAX的介紹
下面是我簡單總結的AJAX實現步驟：
1. 我們需要一個XMLHttpRequest對象。（我們都知道IE低版本瀏覽器的標準很很多都與主流標準不相容。很不幸，對於XMLHttpRequest對象也是一樣的….）
因此，一個XMLHttpRequest對象的擷取過程是這樣的：
var httpXml = null; if(window.XMLHttpRequest){ httpXml = new XMLHttpRequest(); //針對現代瀏覽器，IE7及以上版本 }else if(window.ActiveXObject){ httpXml = new ActiveXObject("Microsoft.XMLHTTP"); //針對IE5,IE6版本 }
2.我們需要為這個XMLHttpRequest對象註冊它要進行的操作（通過回調），並根據返回的請求狀態與HTTP狀態代碼來查看訊息的狀態，並確定在何種情況下我們要進行何種操作。（想看更多就到topic.alibabacloud.comAJAX開發手冊欄目中學習）
這個過程是這樣的：
//為XMLHttpRequest對象的onreadystatechange屬性註冊 httpXml.onreadystatechange=function(){ // 在回呼函數中根據請求狀態與返回的HTTP狀態代碼來選擇相應的操作處理資料 if(httpXml.readyState==4&&httpXml.status==200){ alert(httpXml.responseText); } };
3.我們需要進行請求發送的參數設定。
這個過程是這樣的：
//函數原型：open(method,url,async,username,password) //method --->請求方式:GET,POST或HEAD //url --->請求的地址 GET提交方式可以在後面加上參數 //async --->請求是否非同步執行，true---非同步，false---同步 預設為true //username,password --->可選，為url所需的授權提供認證資格。如果不為空白，會覆蓋掉url中指定的資格 httpXml.open("GET","http://localhost:8080/aaa/MyServlet",true);
4.要真正的發送請求啦！
// 參數為請求參數,POST提交內容格式為--->"username=taffy&password=666",GET為----->空 // 注意：若為POST請求方式，還需設定一個http要求標頭(應該位於open之後,send之前) // 即 setRequestHeader("CONTENT-TYPE","application/x-www-form-urlencoded"); 標誌form表單的enctype屬性 httpXml.send(null);
這樣，一個簡單的AJAX過程就完成了。
一些沒有介紹的小知識點：
//XMLHttpRequest屬性 responseText 得到返回的文本資訊 responseXML 得到返回的XML資訊 //XMLHttpRequest的方法 getResponseHeader() 得到指定頭部資訊 getAllResponseHeaders() 將 HTTP回應標頭部作為未解析的字串返回 //XMLHttpRequest的控制方法 abort() 取消當前響應，關閉串連，將readyState置0
下面是我做的一個簡單的Demo：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><script type="text/javascript"> <!-->onload:頁面載入完成後調用 <--> window.onload = function(){ var user = document.getElementById("my_user"); //擷取XMLHttpRequest對象 var httpXml = null; if(window.XMLHttpRequest){ httpXml = new XMLHttpRequest(); //針對現代瀏覽器，IE7及以上版本}else if(window.ActiveXObject){ httpXml = new ActiveXObject("Microsoft.XMLHTTP"); //針對IE5,IE6版本 } user.onblur=function(){ httpXml.onreadystatechange=function(){ if(httpXml.readyState==4&&httpXml.status==200){ if(httpXml.responseText!="true"){ alert("使用者名稱不存在"); } } }; httpXml.open("GET","http://localhost:8080/aaa/MyServlet?user="+user.value,true); httpXml.send(null); }</script></head><body> <form action="http://localhost:8080/aaa/AnotherServlet"> <input type="text" name="username" id="my_user"> <input type="text" name="password" id="my_pass"> <input type="submit" value="提交"> </form></body></html>MyServlet.java
import java.io.IOException;import java.io.PrintWriter;import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;/** * Servlet implementation class MyServlet */@WebServlet("/MyServlet")public class MyServlet extends HttpServlet { private static final long serialVersionUID = 1L; /** * @see HttpServlet#HttpServlet() */ public MyServlet() { super(); } @override protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { PrintWriter out = response.getWriter(); String username = request.getParameter("user"); if (username!=null&&!username.equals("")) { if (username.equals("admin")) { out.write("true"); }else { out.write("false"); } }else { out.write("false"); } out.close(); } @override protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); }}
* 下面對AJAX的優缺點進行一下總結：*
優點：
能在不更新整個頁面的前提下維護資料。這使得Web應用程式更為迅捷地回應使用者動作，並避免了在網路上發送那些沒有改變的資訊。
缺點：
1.它可能破壞瀏覽器的後退功能。在動態更新頁面的情況下，使用者無法回到前一個頁面狀態，這是因為瀏覽器僅能記下記錄中的靜態頁面（現代瀏覽器一般都可以解決這個問題）；
2.使用動態網頁面更新使得使用者難於將某個特定的狀態儲存到收藏夾中。
本篇文章到這就結束了（想看更多就到topic.alibabacloud.comAJAX使用手冊欄目中學習），有問題的可以在下方留言提問。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
