Ajax技术

1.什么是Ajax

               . Ajax全称为“Asynchronous JavaScript and XML”（异步JavaScript和xml），是一种常见交互式网页的网页开发技术，异步刷新技术，用来在当前页面响应不同的请求。

               .不是一种新技术，是如下几种技术的组合应用：

                         -----基于web标准，HTML+CSS

                         ------使用DOM进行动态显示及交互

                         -------使用XML和XSTL进行数据交换及相关操作

                         -------使用XMLHTTPRequest进行异步数据查询，检索

                         --------使用JavaScript将所有的东西绑定在一起

               .Ajax是一种浏览器端的技术

2.为什么需要Ajax

               需求：

                      有的时候我们需要将本次的响应结果页面和前面的响应结果内容在同一个页面中展现给用户

               解决：

                       1.在后台服务器端将多次响应内容重新拼接成一个JSP页面，响应，但是这样会造成很多响应内容被重复的响应，                            资源浪费

                       2.使用Ajax技术

3.使用Ajax

                Ajax访问原理

                Ajax基本访问流程

                Ajax的状态码

                               readyState:0,1,2,3,4

                               4代表请求成功，可以获得对象

                 Ajax的异步和同步

                 Ajax的请求

                 Ajax的响应数据类型

                               1.普通的字符串

                               2.json（重点）

                                      其实就是将数据按照json格式拼接好的字符串，方便使用eval方法，将接受的字符串数据直接转换成js                                          的对象

                                       json格式：

                                                var 对象名={属性名：属性值，

                                                                    属性名：属性值

                                                                    .........................}

                             3.XML数据

                                          responseXML，返回document对象，通过document对象取出数据

                 Ajax的封装

/*
 	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;
}	

                 Ajax的案例

4.Ajax的代码按规范流程

                        //创建ajax对象

                        //复写onreadystatement函数     

                                   //判断ajax状态码           

                                           //判断响应状态码

                                                   //获取响应内容

                                                   //处理响应内容      
                       //发送请求

                               //get请求（请求实体拼接在url后面）

                                                  jax.open("get","ajax?name=张三&pwd=123");
                                                  jax.send(null); 

                               //post请求（单独的请求实体）

                                                   jax.open("post","ajax");
                                                   jax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
                                                   jax.send("name=张三&pwd=123");