java web 之 AJAX用法

AJAX ：Asynchronous JavaScript And XML

指異步 JavaScript 及 XML一種日漸流行的Web編程方式

• Better
• Faster
• User-Friendly

不是一種新的編程語言，而是一種用於建立更好更快以及交互性更強的 Web 應用程序的技術，是基於JavaScript、XML、HTML、CSS新用法。

呈上AJAX之父 Jesse James Garrett 大佬帥照， emmm 頗有魔性的笑容~

 AJAX交互模型

 

AJAX編碼步驟
一、建立XmlHttpRequest對象
二、註冊狀態監控回調函數
三、創建與服務器的異步鏈接
四、發出異步請求
以下是一個搜索框提示的JavaScript函數寫法

 1 window.onload = function(){  2         //獲得搜索框對象
 3         var searchElement = document.getElementById("name");  4         var div = document.getElementById("context1");  5         searchElement.onkeyup = function(){  6             //給文本框註冊事件
 7             var name = this.value;  8             if(name==""){  9                 div.style.display="none"; 10                 return; 11  } 12             var xhr = getXMLHttpRequest();　　　　　　　　　　　　//1 執行順序：1 13             xhr.onreadystatechange = function(){　　　　　　　　 //2 執行順序：4 14                 if(xhr.readyState == 4){ 15                     if(xhr.status == 200){ 16                         var str = xhr.responseText; 17                         var ss = str.split(","); 18                         var childDivs = ""; 19                         for ( var i = 0; i < ss.length; i++) { 20                             childDivs+="<div onmouseover='changeBackground_over(this)' onmouseout='changeBackground_out(this)' onclick='writeText(this)'>"+ss[i]+"</div>"; 21  } 22                         div.innerHTML=childDivs; 23                         div.style.display="block"; 24  } 25  } 26  }//time 防止IE瀏覽器緩存問題 27             xhr.open("get","${pageContext.request.contextPath}/servlet/searchBookAJAXServlet?name="+name+"&time="+new Date().getTime());//3 執行順序：2 28             xhr.send(null);　　　　　　　　　　　　　　　　　　　　　//4　　　　執行順序：3 29  } 30  } 31  function changeBackground_over(div){ 32             div.style.backgroundColor = "gray"; 33  } 34  function changeBackground_out(div){ 35             div.style.backgroundColor = ""; 36  } 37  function writeText(div){ 38         var searchElement = document.getElementById("name"); 39         searchElement.value = div.innerHTML; 40         div.parentNode.style.display="none"; 41     }


//-------------------------------下面是搜索框代碼

<div id="context1" style="display:block;border:1px solid black;width: 128px; height:100px;position:absolute;left: 945px;top: 137px;"></div>

//-------------------------------下面是引入js
<script type="text/javascript" src="${pageContext.request.contextPath}/js/my.js">

 對應調用的是一個SearchBookAJAXServlet，這裏能夠本身進行數據的封裝，也能夠直接調用json，json的使用很簡單，String str = JSONArray.fromObject(list).toString();便可。

 1 import java.io.IOException;  2 import java.util.List;  3 
 4 import javax.servlet.ServletException;  5 import javax.servlet.http.HttpServlet;  6 import javax.servlet.http.HttpServletRequest;  7 import javax.servlet.http.HttpServletResponse;  8 
 9 import net.sf.json.JSON; 10 import net.sf.json.JSONArray; 11 
12 import com.itheima.domain.Book; 13 import com.itheima.service.BookServiceImpl; 14 
15 public class SearchBookAJAXServlet extends HttpServlet { 16 
17     public void doGet(HttpServletRequest request, HttpServletResponse response) 18             throws ServletException, IOException { 19         response.setContentType("text/html;charset=UTF-8"); 20         response.setCharacterEncoding("UTF-8"); 21         String name = request.getParameter("name"); 22         
23         name = new String(name.getBytes("GBK"),"UTF-8"); 24  System.out.println(name); 25         
26         BookServiceImpl bsi = new BookServiceImpl(); 27         List<Object> list = bsi.searchBookByName(name); 28         //把集合中的數據轉換爲字符串 返回到網頁
29         /*String str="["; 30  for (int i = 0; i < list.size(); i++) { 31  if(i>0){ 32  str+=","; 33  } 34  str+="\""+list.get(i)+"\""; 35  } 36  str+="]";*/
37         //建立json對象
38         String str = JSONArray.fromObject(list).toString(); 39  System.out.println(str); 40         //把數據直接響應到客戶端
41  response.getWriter().write(str); 42         //request.setAttribute("str", str); 43         //request.getRequestDispatcher("/login.jsp").forward(request, response);
44  } 45 
46     public void doPost(HttpServletRequest request, HttpServletResponse response) 47             throws ServletException, IOException { 48 
49         this.doGet(request, response); 50  } 51 
52 }

 建立XMLHttpRequest對象時，不一樣瀏覽器提供不一樣的支持

 1 //獲取XMLHttpRequest對象
 2 function getXMLHttpRequest() {  3     var xmlhttp;  4     if (window.XMLHttpRequest) {// code for all new browsers
 5         xmlhttp = new XMLHttpRequest();  6     } else if (window.ActiveXObject) {// code for IE5 and IE6
 7         xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");  8  }  9     return xmlhttp; 10 }

 XMLHttpRequest 屬性

•     readyState：類型short；只讀
•     responseText：類型String；只讀
•     responseXML：類型Document；只讀
•     status：類型short；只讀

方法：

1. open()
2. send()
3. setRequestHeader()
4. 事件處理器  onreadystatechange

將狀態觸發器綁定到一個函數

1. var xmlHttp;
2. createXMLHttpRequest()
3. xmlHttp.onreadystatechange = processor;　　這裏的processor是回調函數的方法名
4. function processor (){… …}

使用open方法創建鏈接

open(method,url, asynch)

• 其中method表示HTTP調用方法，通常使用"GET"，"POST"
• url表示調用的服務器的地址
• asynch表示是否採用異步方式，true表示異步，通常這個參數不寫

範例代碼

• xmlHttp.open("POST", "url");
• xmlHttp.open("GET", "url?name=xxx&pwd=xxx");

向服務器端發送數據

1. GET方式提交   數據在URL上         xmlHttp.send(null);
2. POST方式提交

• xmlHttp.setRequestHeader("CONTENT-TYPE","application/x-www-form-urlencoded");
• xmlHttp.send("name=xxx&pwd=xxx");

在回調函數中對數據進行處理

function 回調函數(){
    if(xmlHttp.readyState == 4) { //若是響應完成
            if(xmlHttp.status == 200) {//若是返回成功
                …
            }
    }
}
經常使用的服務器返回數據格式

• HTML片斷
• JSON格式的數據
• XML格式的數據