Ajax技術

非同步處理

1. 允許瀏覽器與伺服器通訊
2. 網頁區域性重新整理

Ajax的工作原理

• Ajax引擎需要javascript編寫

• 需要伺服器語言

• 伺服器所能識別的語言：

  1. XML
  2. HTML
  3. json

  缺陷及解決方法：

• 瀏覽器不相容問題 --> javascript（Ajax） 需要 jquery 封裝

• 對流媒體 不太好。

如何使用Ajax引擎

• XMLHttpRequest物件

• 1. 方法：

  2. 屬性：

​ responseText 屬性 當readyState屬性值為4的時候才可以使用。

實戰

 <script>
        window.onload=function(){
            document.getElementById("btn").onclick = function(){
                //1.建立一個 XMLHttpRequest物件
                var req = new XMLHttpRequest();
                //2.呼叫 XMLHttpRequest物件open()
                //解決快取問題：加一個時間戳 new Date()
                req.open("post",'RandomTest?'+new Date);
                req.send();
                
                //3.呼叫onreadystatechange 這個函式： 判斷readyState的值
                req.onreadystatechange = function(){
                    //4.判斷readyState的值是否等於4
                    if(req.readyState==4){
                        //5.判斷瀏覽器是否正常使用
                        if(req.status==304||req.status==200){
                            //6.//接受伺服器返回來的資料  req.responseTest;
                            var txt = req.responseText;
                            alert("隨機數:"+txt);
                        }
                    }
                }
            }
        }
       
    </script>
 

RandomTest.java

public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		        //1.產生隨機數
				Random ran = new Random();
				//2.
				int num = ran.nextInt(100);
				//3.
				System.out.println(num);
				//4.將隨機數傳送到瀏覽器
				response.getWriter().print(num);
	}