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匹馬行天下依舊在更新中，歡迎大家關注，感覺可以的可以點選一下推薦，如若有誤，感謝指正，歡迎討論，謝謝！