AJAX——百聞不如一見

時間  2019-12-07
標籤 ajax 不如 一見 欄目 Ajax 简体版
原文   原文鏈接

AJAX

1、AJAX簡介

  • 什麼是 AJAX ？

AJAX = 異步 JavaScript 和 XML。javascript

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

經過在後臺與服務器進行少許數據交換，AJAX 可使網頁實現異步更新。這意味着能夠在不從新加載整個網頁的狀況下，對網頁的某部分進行更新。java

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

有不少使用 AJAX 的應用程序案例：新浪微博、Google 地圖、開心網等等。數據庫

 

2、AJAX 工做原理

 

3、AJAX是基於現有的Internet標準

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

AJAX是基於現有的Internet標準，而且聯合使用它們：瀏覽器

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

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

AJAX應用程序與瀏覽器和平臺無關的！服務器

 

 

4、ajax發送異步請求

  • 第一步：獲得XMLHttpRequest對象

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

 

建立 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對象解析

 

5、實例：異步提交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");
	}

　　

6、實例：發送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);
	}

　　

7、菜鳥實例

<!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匹馬行天下依舊在更新中，歡迎你們關注，感受能夠的能夠點擊一下推薦，如如有誤，感謝指正，歡迎討論，謝謝！

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程