AJAX發送異步請求教程詳解

AJAX

一、AJAX簡介

• 什么是 AJAX ？

AJAX = 異步 JavaScript 和 XML。

AJAX 是一種用於創建快速動態網頁的技術。

通過在后台與服務器進行少量數據交換，AJAX 可以使網頁實現異步更新。這意味着可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。

傳統的網頁（不使用 AJAX）如果需要更新內容，必需重載整個網頁面。

有很多使用 AJAX 的應用程序案例：新浪微博、Google 地圖、開心網等等。

 

二、AJAX 工作原理

 

三、AJAX是基於現有的Internet標准

• (Ajax：只刷新局部頁面的技術) 包括以下幾種技術： 

AJAX是基於現有的Internet標准，並且聯合使用它們：

• XMLHttpRequest 對象 (異步的與服務器交換數據)
• JavaScript/DOM (信息顯示/交互)
• CSS (給數據定義樣式)
• XML (作為轉換數據的格式)

異步：發送請求后不等待返回結果，由回調函數處理結果。

AJAX應用程序與瀏覽器和平台無關的！

 

 

四、ajax發送異步請求

• 第一步：得到XMLHttpRequest對象

ajax其實只需要用到一個對象：XMLHttpRequest，編寫創建XMLHttpRequest對象的函數

 

創建 XMLHttpRequest 對象的語法：

variable=new XMLHttpRequest();

　　

• 第二步：打開與服務器的連接

mxlHttp.open();用來打開與服務器的連接，需要三個參數：

請求方式，可以是EGT或POST；

請求的URL，指定服務器端資源，例如：/oa/AServlet；

請求是否為異步，true為異步請求，false為同步請求

例如：xmlHttp.open("GET","/oa/AServlet",true);

• 第三步：發送請求

xmlHttp.send(null);參數為請求體，如果是GET請求，參數為null，如果傳參數可能會造成部分瀏覽器無法發送

如需將請求發送到服務器，我們使用 XMLHttpRequest 對象的 open() 和 send() 方法：

xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();

　　

       

 

       

       

 

     

 

方法：
  open()  該方法有3個參數，"get|post","url?name=tom","true|false",默認為true。
  send() 發送請求，可以帶參數 或 null。
  setRequestHeader() 設置請求消息頭。
屬性：
  readyState  類型為short，只讀
  responseText  類型為String，只讀
  responseXML  類型為Document，只讀（一般不用）
  status  類型為short，只讀
事件處理器：
  onreadystatechange

• GET 還是 POST？

與 POST 相比，GET 更簡單也更快，並且在大部分情況下都能用。

然而，在以下情況中，請使用 POST 請求：

• 無法使用緩存文件（更新服務器上的文件或數據庫）
• 向服務器發送大量數據（POST 沒有數據量限制）
• 發送包含未知字符的用戶輸入時，POST 比 GET 更穩定也更可靠

 

 

• 第四步：注冊監聽器

在xmlHttp對象的一個事件上注冊監聽器：onreadystatechange

xmlHttp對象一共有5個狀態：

•   0狀態：剛創建，還沒有調用open()方法；
•   1狀態：請求開始，調用open()方法，但是沒有調用send()方法；
•   2狀態：調用完了send()方法；
•   3狀態：服務器已經開始響應，但是響應未結束；
•   4狀態：服務器響應結束；

得到xmlHttp對象的狀態：

var state = xmlHttp.readyState;//狀態為：0/1/2/3

得到服務器響應的狀態碼：

var status = xmlHttp.status;//狀態碼：200/404/500

得到服務器響應的內容：

var content = xmlHttp.responseText;//得到服務器的響應的文本格式內容

var content = xmlHttp.responseXML;//得到服務器響應的xml內容，可以使用Document對象解析

 

五、實例：異步提交GET請求

	<script type="text/javascript">
		//獲得XMLHttpRequest對象
		function createXMLHttpRequest(){
			try{
				//大部分瀏覽器支持
				return new XMLHttpRequest;
			}catch(e){
				try{
					//支持IE6.0
					return new ActiveXObject("Msxm12.XMLHTTP");
				}catch(e){
					try{
						//支持IE5更早版本
						return new ActiveXObject("Microsoft.XMLHTTP");
					}catch(e){
						throw e;
					}
				}
			}
		}
		
		function dianji(){
			//1.得到異步對象
			var xmlHttp = createXMLHttpRequest();
			//2.打開服務器連接
			xmlHttp.open("GET","<c:url value='/AServlet' />",true);
			//3.發送請求
			xmlHttp.send(null);
			//4.注冊監聽
			xmlHttp.onreadystatechange = function(){
				//判斷響應狀態和狀態碼
				if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
					//獲取響應內容
					var text = xmlHttp.responseText;
					//獲取標簽元素
					var cont = document.getElementById("content");
					cont.innerHTML = text;
				}
			};
		}
		
	</script>
	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		System.out.println("獲得異步請求");
		response.getWriter().println("hello world");
	}

　　

六、實例：發送POST請求，服務器響應XML

設置Content-Type請求頭：

xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

發送請求時指定的請求體

xmlHttp.send("username=tom&password=123");

	<script type="text/javascript">
		//獲得XMLHttpRequest對象
		function createXMLHttpRequest(){
			try{
				//大部分瀏覽器支持
				return new XMLHttpRequest;
			}catch(e){
				try{
					//支持IE6.0
					return new ActiveXObject("Msxm12.XMLHTTP");
				}catch(e){
					try{
						//支持IE5更早版本
						return new ActiveXObject("Microsoft.XMLHTTP");
					}catch(e){
						throw e;
					}
				}
			}
		}
		
		function dianji(){
			//1.得到異步對象
			var xmlHttp = createXMLHttpRequest();
			//2.打開服務器連接
			xmlHttp.open("POST","<c:url value='/AServlet' />",true);
			//3.設置請求頭請求
			xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
			xmlHttp.send("username=張三&password=123");
			//4.注冊監聽
			xmlHttp.onreadystatechange = function(){
				//判斷響應狀態和狀態碼
				if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
					//獲取響應內容
					var rel = xmlHttp.responseXML;
					//獲取標簽元素
					var userele = rel.getElementsByTagName("user")[0];
					var nameele = rel.getElementsByTagName("username")[0].innerHTML;
					var pwdele = rel.getElementsByTagName("password")[0].innerHTML;
					
					var str = "賬號："+nameele+"，密碼："+pwdele;
					
					var cont = document.getElementById("content");
					cont.innerHTML = str;
				}
			};
		}
		
	</script>
	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		System.out.println("post請求。。。");
		// 設置請求響應的編碼
		request.setCharacterEncoding("utf-8");
		response.setContentType("text/xml;charset=utf-8");

		// 獲取參數
		String name = request.getParameter("username");
		String pwd = request.getParameter("password");

		// 封裝為xml
		String xml = "<user>" + "<username>" + name + "</username>"
				+ "<password>" + pwd + "</password>" + "</user>";
		System.out.println(xml);
		response.getWriter().println(xml);
	}

　　

七、菜鳥實例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function loadXMLDoc()
{
    var xmlhttp;
    if (window.XMLHttpRequest)
    {
        //  IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執行代碼
        xmlhttp=new XMLHttpRequest();
    }
    else
    {
        // IE6, IE5 瀏覽器執行代碼
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
    xmlhttp.send();
}
</script>
</head>
<body>
​
<div id="myDiv"><h2>使用 AJAX 修改該文本內容</h2></div>
<button type="button" onclick="loadXMLDoc()">修改內容</button>
​
</body>
</html>

　　

 

參考案例：

 <script type="text/javascript">
        // 方式1
        function ckName() {
            // 獲取用戶名對象
            var name = document.getElementsByTagName("input")[0];
            // 創建XMLHttpRequest對象
            var xhr = getXMLHttpRequest();
            // 處理響應結果，創建回調函數，根據響應狀態動態更新頁面
            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4) { // 說明客戶端請求一切正常
                    if (xhr.status == 200) { // 說明服務器響應一切正常
                        // alert(xhr.responseText); // 得到響應結果
                        var msg = document.getElementById("msg");
                        if (xhr.responseText == "true") {
                            // msg.innerText = "用戶名已存在";
                            msg.innerHTML = "<font color='red'>該用戶名已存在</font>";
                        } else {
                            msg.innerHTML = "<font color='green'>該用戶名可以使用</font>";
                        }
                    }
                }
            }            
            // 建立一個連接
            xhr.open("get", "${pageContext.request.contextPath }/servlet/ckNameServlet?name=" + name.value);
            // 發送請求
            xhr.send(null);
        }
        
        // 方式2
        window.onload = function() {
            var nameElement = document.getElementsByName("userName")[0];
            nameElement.onblur = function() {
                var name = this.value; // this等價於nameElement
                
                // 創建XMLHttpRequest對象
                var xhr = getXMLHttpRequest();
                // 處理響應結果，創建回調函數，根據響應狀態動態更新頁面
                xhr.onreadystatechange = function() {
                    if (xhr.readyState == 4) { // 說明客戶端請求一切正常
                        if (xhr.status == 200) { // 說明服務器響應一切正常
                            // alert(xhr.responseText); // 得到響應結果
                            var msg = document.getElementById("msg");
                            if (xhr.responseText == "true") {
                                // msg.innerText = "該用戶名已存在";
                                msg.innerHTML = "<font color='red'>該用戶名已存在</font>";
                            } else {
                                msg.innerHTML = "<font color='green'>該用戶名可以使用</font>";
                            }
                        }
                    }
                }            
                // 建立一個連接
                xhr.open("get", "${pageContext.request.contextPath }/servlet/ckNameServlet?name=" + name + "&time=" + new Date().getTime());
                // 發送請求
                xhr.send(null);
            }
        }
    </script>

　　

 Java匹馬行天下依舊在更新中，歡迎大家關注，感覺可以的可以點擊一下推薦，如若有誤，感謝指正，歡迎討論，謝謝！