AJAX学习总结

AJAX

问题：

目前来，所有的请求的发送都是通过浏览器自己直接进行发送，
响应是浏览器在接收到
响应信息后自主的将响应数据覆盖当前页面显示。现在，要求在保
留原有页面内容的情况下
显示新的响应内容。

解决:

使用ajax技术

ajax原理:

请求由ajax引擎对象发送，响应数据，浏览器不会直接进行处理，
而是流转给发请求的ajax引擎对象。
这样我们可以通过操作ajax引擎对象变相的实现在页面中显示新
的响应资源。

本质：依旧是浏览器获取，但中间经过了ajax引擎从而能够在静态的页面中不转其他页面，而是在本页面中流传servlet中的数据。

ajax的使用

		ajax的基本流程
			//创建ajax引擎对象
			//复写onreadystatement函数
				//判断ajax状态码
					//判断响应状态码
						//获取响应内容(响应内容的格式)
							//普通字符串：responseText
							//json(重点)：responseText
								其实就是讲述数据按照json的格式拼接好的字符串，方便使用eval方法
								将接受的字符串数据直接转换为js的对象
								
								json格式：
									var 对象名={
											属性名:属性值,
											属性名:属性值,
											……
										}
								
							//XML数据：responseXML.返回document对象
								通过document对象将数据从xml中获取出来
						//处理响应内容(js操作文档结构)
			//发送请求
				//get请求
					get的请求实体拼接在URL后面，？隔开，键值对
					ajax.open("get","url");
					ajax.send(null);
				//post请求
					有单独的请求实体
					ajax.open("post", "url");
					ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
					ajax.send("name=张三&pwd=123");
		ajax的状态码
			ajax状态码:
				readyState：0,1,2,3,4
					4: 表示响应内容被成功接收
			响应状态码:
				status
				200:表示一切OK
				404:资源未找到
				500：内部服务器错误
		ajax的异步和同步
			ajax.open(method,urL,async)
			async：设置同步代码执行还是异步代码执行
				  true代表异步，默认是异步
				  false代表同步

			//get方式:请求实体拼接在URL后面
				 ajax.open("get","ajax?"+data);
				ajax.send(null); 
			//post方式：请求实体需要单独的发送
				 ajax.open("post", "ajax");
				ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
				ajax.send("name=张三&pwd=123"); 

function getAJAX(){		
		//创建ajax引擎对象
			var ajax;
			if(window.XMLHttpRequest){//火狐
				ajax=new XMLHttpRequest();
			}else if(window.ActiveXObject){//ie
				ajax=new ActiveXObject("Msxml2.XMLHTTP");
			}
		
			//复写onreadystatement函数
			ajax.onreadystatechange=function(){
				//判断Ajax状态吗
				if(ajax.readyState==4){
					//判断响应状态吗
					if(ajax.status==200){
						//获取响应内容
						var result=ajax.responseText;
						//处理响应内容
							//获取元素对象
							var showdiv=document.getElementById("showdiv");
							showdiv.innerHTML=result;
					}else if(ajax.status==404){
						//获取元素对象
						var showdiv=document.getElementById("showdiv");
						showdiv.innerHTML="请求资源不存在";
					}else if(ajax.status==500){
						//获取元素对象
						var showdiv=document.getElementById("showdiv");
						showdiv.innerHTML="服务器繁忙";
					}
				}else{
					//获取元素对象
					var showdiv=document.getElementById("showdiv");
					showdiv.innerHTML="<img src='img/2.gif' width='200px' height='100px'/>";//添加加载的gif图
				}
			}
		//发送请求
		ajax.open("get","ajax",true);//true是异步，false是同步
		
		ajax.send(null);
		alert("哈哈");
	}

调用

<input type="button" value="测试 " onclick="getData()"/>
	<div id="showdiv"></div>

XML方式获取数据

if(ajax.status==200){
						//获取响应内容
						var doc=ajax.responseXML;
						//处理响应内容
							//获取元素对象
							alert(doc.getElementsByTagName("name")[0].innerHTML);
					}

。。。。

//发送请求
			ajax.open("get","xml.jsp",true);
			ajax.send(null);

xml.jsp

<user>
	<name>李四</name>
	<pwd>123</pwd>
</user>

封装AJAX

将ajax封装为ajaxUtil.js

/*
 	method:
 			请求方式，值为get或者post
 	url：请求地址
 	data:没有值需要传入null
 		有请求数据则传入字符串数据，格式为"a=1&b=2";
 	deal200:
 			接受一个带有一个形参的js函数对象，形参接收的实参是ajax引擎对象
 	deal404：接受一个js函数对象
 	deal500：接受一个js函数对象
 */
	function myAjax(method,url,data,deal200,deal404,deal500,async){		
		//创建ajax引擎对象
			var ajax=getAjax();
			//复写onreadystatement函数
			ajax.onreadystatechange=function(){
				//判断Ajax状态吗
				if(ajax.readyState==4){
					//判断响应状态吗
					if(ajax.status==200){
						if(deal200){
							deal200(ajax);
						}
					}else if(ajax.status==404){
						if(deal404){
							deal404();
						}						
					}else if(ajax.status==500){
						if(deal500){
							deal500();
						}
					}
				}
			}
		//发送请求
		if("get"==method){
			ajax.open("get",url+(data==null?"":"?"+data),async);
			ajax.send(null);
		}else if("post"==method){
			ajax.open("post",url,async);
			ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
			ajax.send(data);
		}
		
	}	
/* --------------------------------------------------------------------------- */
function getAjax(){
	var ajax;
	if(window.XMLHttpRequest){//火狐
		ajax=new XMLHttpRequest();
	}else if(window.ActiveXObject){//ie
		ajax=new ActiveXObject("Msxml2.XMLHTTP");
	}
	
	return ajax;
}	

调用
在js代码域中声明

<script type="text/javascript" src="js/ajaxUtil.js"></script>

function getData2(){
 		var name=document.getElementById("uname").value;
 		var data="name="+name;
 		myAjax("get","user",data,function(ajax){
	 		//获取响应数据
				var rs=ajax.responseText;
			//处理响应数据
				alert(rs);
 		});
 		
 	}