Ajax学习总结

一、Ajax的概念及原理

1）概念：AJAX全称为“Asynchronous JavaScript and XML”（异步JavaScript和XML），是一种创建交互式网页应用的网页开发技术。不是一种新技术，是如下几种技术的组合应用：
基于web标准（standards-based presentation）XHTML+CSS的表示；
使用 DOM（Document Object Model）进行动态显示及交互；
使用 XML 和 XSLT 进行数据交换及相关操作；
使用 XMLHttpRequest 进行异步数据查询、检索；
使用 JavaScript 将所有的东西绑定在一起。
Ajax本质上是一个浏览器端的技术。

 

当需求为：将本次的响应结果和前面的响应结果内容在同一个页面中展现给用户。

传统方式：在客户端发送一个请求后，服务器调用Servlet响应请求，并以JSP页面的方式将响应内容全部发送给客户端，在后台服务器端需要将多次响应内容重新拼成一个JSP页面去响应，会造成资源浪费。

使用Ajax引擎对象：可以在原有页面的基础上，动态的进行内容的改动，而不是再次去通过服务器发送一个完整页面。

2）原理：Ajax引擎对象实际上是一个JS的内置对象，通过这个对象，JS可以通过浏览器向服务器发送请求，响应来的结果客户端不做处理，而是返回到JS中，由JS做处理，通过JSDom编程，动态的改变原有页面的数据。

二、Ajax的使用

1）创建ajax引擎对象
2）复写onreadystatement函数
      3）判断ajax状态码
          4）判断响应状态码
                 5）获取响应内容(响应内容的格式)
                       普通字符串：responseText
                        json(重点)：responseText
                                    其实就是将数据按照json的格式拼接好的字符串，方便使用eval方法将接收的字符串数据直接转换为js对象
                                     json格式：
                                        var 对象名={
                                                属性名:属性值,
                                                属性名:属性值,
                                                ……
                                            }
                                    
                         XML数据：responseXML.返回document对象
                                    通过document对象将数据从xml中获取出来
                   6）处理响应内容(js操作文档结构)
7）发送请求
          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");
            

1.Ajax的readyState值

readyState值	含义
0	表示XMLHttpRequest已建立，但还未初始化，这时尚未调用open方法
1	表示open方法已经调用，但未调用send方法（已创建，未发送）
2	表示send方法已经调用，其他数据未知
3	表示请求已经成功发送，正在接受数据
4	表示数据已经成功接收。

2.Ajax的响应状态码

Http状态码	含义
200	请求成功
404	请求资源未找到
500	内部服务器错误

3.ajax的异步和同步
                ajax.open(method,urL,async)
                async：设置同步代码执行还是异步代码执行
                      true代表异步，默认是异步
                      false代表同步

————————————————————————————————————————————————————————

<script type="text/javascript">
	function getData(){		
		//创建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'/>";
				}
			}
		//发送请求
		ajax.open("get","ajax",true);
		ajax.send(null);
		alert("哈哈");
	}
</script>

注意：可以调用Json的jar包，在Servlet中直接将一个对象以Json的方式响应给Ajax，Ajax可以直接用eval去声明一个对象，获取服务器中传的对象的属性，就不用在服务器端再做字符串拼接了。

在服务器端：

在客户端：

三、Ajax封装使用

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在调用函数的时候允许不必将参数列表全部传过去，所以根据情况将上述代码封装到一个JS文件中，在需要调用Ajax技术的时候，直接将JS文件引入，去调用JS方法即可。