Ajax技术详解与实例应用-优快云博客

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>