Ajax技術詳解
概述：允許瀏覽器與伺服器通訊而無須重新整理當前頁面的技術都被叫做Ajax.Ajax的核心是JavaScript對象XmlHttpRequest。
分析：首先我們先要使用ajax的話，必須要建立XmlHttpRequest對象，根據不同的瀏覽器，建立的方法也不同，建立成功後，我們需要利用該對象中的方法來請求後台，然後利用該對象的屬性擷取後台返回的資料，然後我們就完成了非同步請求。
一、建立XmlHttpRequest。
function createXMLHttpRequest() {var xmlHttp;try {//firefox opera 等 非 IE的瀏覽器中xmlHttp = new XMLHttpRequest();} catch (ex) {try {//IE瀏覽器xmlHttp = new ActiveXObject("MSXML2.XMLHTTP");} catch (e) {xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");}}
return xmlHttp;
}
二、定義請求參數
利用XmlHttpRequest對象調用open方法來定義請求的參數，確定提交方法和url和請求方式xmlHttp.open("GET","./servlet/EmployeeServlet",true);
參數一、表示用是方式來提交，與form中method類似，值一般為get post
參數二、表示請求的地址，可以為相對路徑或絕對路徑，一般在後來加一個參數隨機數或者毫秒數來表示地址的唯一性。
參數三、表示是否用非同步請求方式，如果是false表示同步請求，一般為true
如果是post提交的話，則必須指定一個要求標頭資訊
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
三、發送請求
如果是post則可以指定參數，多個用&符號來串連，如果用get則一般設定為null值。xmlHttp.send("nowpage="+nowpage);
四、在後台就已用request對象來擷取你帶的參數了，然後就可以做一些幕後處理並向前台返回處理的結果和資料扽。
五、在前台接受伺服器接受後台傳過來的資料
xmlHttp.onreadystatechange = function() { //系統會自動調用這個事件
if (xmlHttp.readyState == 4) { 判斷狀態，為4的時候表示已經請求成功
if (xmlHttp.status == 200) {//表示頁面的正確
xmlHttp.responseText;就可以擷取後台傳遞的文本資料
如果是xml就可以用xmlHttp.responseXML來擷取xml的對象，直接存取節點操作。
}
}
}
六、xmlHttpRequest的方法和屬性
七：執行個體代碼： 城市連動，後台暫時不發了。
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <base href="<%=basePath%>"> <title>My JSP 'city.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="This is my page"><!--<link rel="stylesheet" type="text/css" href="styles.css">--> </head> <body> <div align="center"> <select id="province"> <option>請選擇省</option> </select> <select id="city"> <option>請選擇市</option> </select> </div> </body> <script type="text/javascript"> <!-- //定義快取資料 var cityData=new Array(); var provinceData=null; window.onload=function(){ var xmlHttp=createXmlHttpRequest(); var provinceNode=getNode("province"); var cityNode=getNode("city"); if(provinceData!=null){ addOption(provinceNode, provinceData); }else{ loadProvince(xmlHttp, provinceNode); } provinceNode.onchange=function(){ removeOption(cityNode);if(this.value!="請選擇省"){if(cityData.hasOwnProperty(this.value)){addOption(cityNode,cityData[this.value]);}else{loadCity(xmlHttp,cityNode,this.value);}} }; }; //非同步載入市資料 function loadCity(xmlHttp,cityNode,value){ xmlHttp.onreadystatechange=function(){ if(xmlHttp.readyState==4 && xmlHttp.status==200){ //成功請求，處理前台 var xmlDoc=xmlHttp.responseXML; var cityXmlNodes=xmlDoc.getElementsByTagName("city"); addOption(cityNode, cityXmlNodes); cityData[value]=cityXmlNodes; } }; xmlHttp.open("POST","./servlet/CityServlet?timeStamp="+new Date().getTime(),true); xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); xmlHttp.send("value="+value); } //非同步載入省資料 function loadProvince(xmlHttp,provinceNode){ xmlHttp.onreadystatechange=function(){ if(xmlHttp.readyState==4 && xmlHttp.status==200){ //成功請求，處理前台 var xmlDoc=xmlHttp.responseXML; var provinceXmlNodes=xmlDoc.getElementsByTagName("province"); addOption(provinceNode, provinceXmlNodes); provinceData=provinceXmlNodes; } }; xmlHttp.open("get","./servlet/PorvinceServlet?timeStamp="+new Date().getTime(),true); xmlHttp.send(null); } //清除節點 function removeOption(node){ var optionNodes = node.getElementsByTagName("option");var len = optionNodes.length;for(var m=0;m<len;m++){if(optionNodes[1]){node.removeChild(optionNodes[1]);}} } //添加節點 function addOption(node,nodes){ for(var i=0;i<nodes.length;i++){var optionNode=document.createElement("option");optionNode.setAttribute("value",nodes[i].firstChild.nodeValue);optionNode.appendChild(document.createTextNode(nodes[i].firstChild.nodeValue));node.appendChild(optionNode); } } function getNode(id){ return document.getElementById(id); } function createXmlHttpRequest(){ var xmlHttp; try{ //firefox opera 等 非IE的瀏覽器中 xmlHttp=new XMLHttpRequest(); }catch(ex){ //IE瀏覽器 try{ xmlHttp=new ActiveXObject("MSXML2.XMLHttp"); }catch(e){ xmlHttp=new ActiveXObject("Mircrosoft.XMLHttp"); }; } return xmlHttp; }; //--> </script></html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
