Ajax技术简介及使用

AJax (Asynchronous JavaScript And Xml)

即异步的JavaScript  和 XML

是指一种创建交互式网页应用的网页开发技术

是一种独立于Web服务器软件的浏览器技术

用一句话总结就是：从浏览器端使用异步的方式发送请求，请求服务器并获得资源的技术

AJAX不是一种新的编程语言，而是一种用于创建更好(Better)更快(Faster)以及交互性更强(User-Friendly)的Web应用程序的技术

Ajax和传统开发对比

AJAX可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页面

在浏览器内部存在一个Ajax引擎，当浏览器使用Ajax技术时，首先将请求发送到Ajax引擎，Ajax引擎将请求发送到服务器，当服务器返回数据时也返回到Ajax引擎，然后Ajax引擎将数据返给浏览器。

使用步骤：

<script type="text/javascript" >
function burtton(){
	//获取核心对象  XMLHttRequest Ajax引擎  不同浏览器对此对象的创建方式不同 所以存在兼容问题
	var xmlHttp;
	if(window.XMLHttRequest){//新浏览器
		xmlHttp = new XMLHttRequest();
	}else if(window.ActiveXObject){//IE5  IE6
		xmlHttp = new ActiveXObject("Microsoft.XMLHtt");
	}
	
	/* 2 设置回调函数，通过属性设置 onreadystatechange
				* 目的：发送请求之后可以获得服务器响应内容。
				* 一般情况使用匿名函数实现
				* ajax引擎在不同的阶段都会调用回调函数。
				* 属性：readyState 和 stauts
				2.1 readyState 返回整形数据，表示当前执行某一个阶段。
					* 0  初始化状态。核心对象创建时默认值
					* 1 open() 方法已调用，连接创建完成之后，ajax引擎将此状态修改1
					* 2 send() 方法已调用，发送请求 
					* 3  接受中， 所有响应头部都已经接收到。响应体开始接收但未完成。 
					* 4  响应已经完全接收。【掌握】--服务器发送的所有数据，已经到ajax引擎内部。
				2.2 status 表示  响应的http状态码
					* 200 正常【掌握】
					* 302 重定向
					* 304 缓存
					* 404 不存在
					* 500 服务器异常

			*/
	xmlHttp.onreadystatechange = function(){
		if(readyState==4&&status==200){
			//接收服务器响应的数据 , 属性：responseText 获得响应的文本内容。
			var data = xmlhttp.responseText;
			alert(data);
			 
		}
		
	};
	/* 3 建立连接,通过指定的参数建立连接
				* 参数1：method ，请求方式，例如：GET和POST等【】
				* 参数2：url ，请求路径。【】
					* 如果get请求，使用?追加请求参数。例如：/test/DemoServlet?username=jack&password=1234
				* 参数3：async 是否异步，默认：true 表示异步。
					* 如果取值为false表示同步，当发送请求，响应必须完成，否则页面不能进行其他操作。
				* 参数4和参数5：表示权限验证账号和密码，一般使用tomcat权限验证。
			
	*/
	xmlHttp.open("get","/test/DemoServlet?username=jack&password=1234");
	// 注意：如果是post请求，必须设置编码方式
	//xmlhttp.setRequestHeader("content-type", "application/x-www-form-urlencoded");
			
			
	/* 4 发送请求 
	 * 参数body：表示请求体内容
	GET请求，此值可以不写，也可以写成null，但不同的浏览器支持程度不同，建议：get请求必须写null
	POST请求，用于编写请求参数。例如：username=jack&password=1234&....
	*/
	xmlHttp.send(null);
	
}

</script>

这就是Ajax的简单使用