最近在學習ExtJS，在學習到AJAX的一些基礎知識時便總結出來和大家分享一下，適合於初學者看看，大神可以繞過！
一、AJAX概念
AJAX是AsynchronousJavascript And Xml的簡寫，它不是一門新的技術，而是幾門技術的綜合應用，是WEB2.0時代出現的一種非同步通訊技術。其中最核心的是在Javascript中調用一個叫XMLHttpRequest類，使用XMLHttpRequest這個類可以不用重新整理整個網頁就可以跟伺服器端進行通訊，同時再由這個類負責處理伺服器端響應回來的資訊，然後再通過Javascript中DOM編程將處理好的資訊結果添加到網頁上，從而實現了一個網頁的局部重新整理。提升了使用者的體驗，同時也減輕了WEB伺服器的壓力。
二、AJAX的特點
三、AJAX的工作原理
如：
四、AJAX所包含的技術
AJAX:(AsynchronousJavaScript and XML)並不是一項新技術,是多種技術的綜合，包括Javascript、XHTML和CSS、DOM、XML和XMLHttpRequest.
五、AJAX的缺陷
AJAX技術也不是很完美的，也存在下面的缺陷：
IE5.0及以上、Mozilla1.0、NetScape7及以上版本才支援，Mozilla雖然也支援AJAX，但是提供XMLHttpRequest的方式不一樣。所以，使用AJAX的程式必須測試針對各個瀏覽器的相容性。
AJAX更新頁面內容的時候並沒有重新整理整個頁面，因此，網頁的後退功能是失效的；有的使用者還經常搞不清楚現在的資料是舊的還是已經更新過的。這個就需要在明顯位置提醒使用者“資料已更新”。
六、XMLHttpRequest對象
XMLHttpRequest是XMLHTTP組件的對象，通過這個對象，AJAX可以像傳統型應用程式一樣只同伺服器進行資料層面的交換，而不用每次都重新整理介面，也不用每次將資料處理的工作都交給伺服器來做；這樣既減輕了伺服器負擔又加快了響應速度、縮短了使用者等待的時間。
| 方法
|
描述
|
| abort()
|
停止當前請求
|
| getAllResponseHeaders()
|
把http請求的所有響應首部作為鍵/值對返回
|
| getResponseHeader("headerLabel")
|
返回指定首部的串值
|
| open(“method”,”url”)
|
建立對伺服器的調用，method參數可以是GET,POST。url參數可以是相對URL或絕對URL。這個方法還包括3個選擇性參數。
|
| send(content)
|
向伺服器發送請求
|
| setRequestHeader("label", "value")
|
把指定首部設定為所提供的值。在設定任何首部之前必須先調用open()
|
七、第一個AJAX程式：使用者名稱校正
步驟：
（1）建立XMLHttpRequest對象
（2）準備好要發送的資料。
（3）發送請求到後台servlet控制器
（4）處理背景程式返回來的資料，使用DOM編程動態添加到頁面上。
1、Servlet程式：
package cn.itcast.ajax.servlet;import java.io.IOException;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;/** * Servlet implementation class AjaxServlet */public class AjaxServlet extends HttpServlet {private static final long serialVersionUID = 1L;protected void doGet(HttpServletRequest request,HttpServletResponse response) throws ServletException, IOException {String username = request.getParameter("username");System.out.println(username);response.setHeader("Content-Type", "text/html; charset=UTF-8");if ("admin".equals(username)) {response.getOutputStream().write("使用者名稱已存在".getBytes());} else {response.getOutputStream().write("使用者名稱可以使用".getBytes());}}protected void doPost(HttpServletRequest request,HttpServletResponse response) throws ServletException, IOException {doGet(request, response);}}
2、html靜態頁面
<!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" src="ajaxhtm.js"></script></head><body><form action="">使用者名稱:<input type="text" id="username" name="username" /><input id="submit"type="button" onclick="sendDataToServerByHtml()" value="檢查使用者名稱是否已經存在" /><span></span><br /> 密碼:<inputtype="password" name="userpass" /></form></body></html>
三、JavaScript指令碼程式
/* * 使用ajax編程非同步向伺服器端發送請求的步驟： * 第一步：建立並初始化XMLHttpRequest對象 * 第二步：往伺服器端發送請求 * 第三步：處理服務端返回來的資料 */// 初始化XMLHttpRequest對象function createXmlHttpRequest() {var xmlhttp = null;try {// Firefox, Opera 8.0+, Safarixmlhttp = new XMLHttpRequest();} catch (e) {// IE7.0以下的瀏覽器以ActiveX組件的方式來建立XMLHttpRequest對象var MSXML = [ 'MSXML2.XMLHTTP.6.0', 'MSXML2.XMLHTTP.5.0','MSXML2.XMLHTTP.4.0', 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP','Microsoft.XMLHTTP' ];for ( var i = 0; i < MSXML.length; i++) {try {xmlhttp = new ActiveXObject(MSXML[i]);break;} catch (e) {}}}// 返回對象return xmlhttp;}// 發送請求道伺服器端(使用的是html的資料格式向伺服器端發送請求)function sendDataToServerByHtml() {// alert("sdhfhs");var xhr = createXmlHttpRequest();var username = document.getElementById("username").value;// 這裡使用getElementsByTagName方法得到的是該標籤的一個集合數組var span = document.getElementsByTagName("span");// alert(span[0]);// alert(username);// 發送請求到伺服器端xhr.open("get", "/ajax/AjaxServlet?username=" + username, true);/* * 注意：send方法是在使用post方式提交的時候必鬚髮送的訊息內容， * post的請求特點：請求的參數會在請求體中，因此當使用post請求提交的時候就必須使用send方法發送參數 * 但是，get的方法提交請求的時候，參數是在地址欄傳送過去的，因此send方法可以不用夾帶參數，即發送null即可 */xhr.send(null);// 對伺服器端傳遞迴來的資訊進行處理xhr.onreadystatechange = function() {// 對象的狀態 4表示完成if (xhr.readyState == 4) {// 200表示資訊已經被成功返回，304表示資訊沒有被修改if (xhr.status == 200 || xhr.status == 304) {// 開始處理資訊// alert(xhr.responseText);span[0].innerHTML = xhr.responseText;}}};}
如下：
如需要這個小應用的完整工程請單擊下載
這是我個人對AJAX技術的一點小總結，如果我哪些總結的地方寫錯了，希望大家能指出來，讓我改正錯誤，快速成長起來！
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
