Ajax介绍

 一、Ajax概念介绍

       Ajax ：是“Asynchronous JavaScript and XML”的缩写，即异步JavaScript和XML。Ajax是一个创建交互式网页应用的客户端技术。

    Ajax可以进行同步交互也可以进行异步交互，一般都是使用其异步模型。

    同步与异步在web开发中：

    同步的交互方式,由用户触发一个HTTP请求到服务器,服务器对其进行处理后再返回一个新的HTHL页到客户端,每当服务器处理客户端提交的请求时,客户都只能空闲等待,并且哪怕只是一次很小的交互、只需从服务器端得到很简单的一个数据,都要返回一个完整的HTML页,而用户每次都要浪费时间和带宽去重新读取整个页面。

    异步的交互方式，浏览器不必等待服务器返回结果，在服务器响应的时间内，客户仍可以继续做其他的事情。

    因此，使用Ajax异步模型主要表现在：

    1、通过适当的Ajax应用达到更好的用户体验；

    2、把以前的一些服务器负担的工作转嫁到客户端，利于客户端闲置的处理能力来处理，减轻服务器和带宽的负担。

    Ajax的交互流程：

        浏览器将要处理的事情告诉Ajax Engine，由引擎和服务器交互，同时，浏览器可以继续执行其他命令。

      

二、Ajax的核心对象

    Ajax的核心对象是XMLHttpRequest对象。如果有多个请求，需要多个XMLHttpRequest对象。主要掌握XHR对象的创建、五种状态、属性和方法。

    常见XMLHttpRequest对象的代码

//创建Ajax核心udixiang XMLHttpRequest
	var xmlHttp;
	function createXMLHttpRequest(){
		//表示当前浏览器不是IE 
		if(window.XMLHttpRequest){
					xmlHttp = new XMLHttpRequest();
				}else if(window.ActiveXObject){
					xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
				}
		}

  XMLHttpRequest对象的五种状态，也就是readyState属性的五个值：

    0未初始化    此时，已经创建一个xhr对象，但是还没有初始化。

       1 装载中  代码已经调用了 open( )方法，并且xhr对象已经准备好把一个请求发送到服务器。

        2已装载  已经通过send（）方法把一个请求发送到服务器，但是还没有收到一个响应。

        3交互中 已经接收到http响应头部信息，但是消息体部分还没有完全接收结束。

        4完成   此时，响应已经被完全接收。

 几个主要属性和方法：

       open("get/put",true/false)      

       建立服务器的调用，同时告诉服务器提交方式、url、交互方式（不写，默认为true）。open()方法也是使用Ajax技术的第一步（前提是已创建了XHR对象），我的理解就是请求是通过Ajax引擎和服务器交互的，所以首先要建立服务器的调用。

      onreadystatechange事件

      每个状态改变时都会触发这个事件。 属性值一般是回调函数的地址或者函数体，如果直接写函数体的话就是所谓的匿名函数。这个函数表示的是Ajax引擎处理完成后如何反馈结果。

     status属性表示服务器的http状态码，200表示ok，400表示not fond。

     responseText属性

     表示服务器的响应。包含客户端接收到的http响应的文本内容，当readyState值为0、1、2时，responseText包含一个空字符串。当readyState值为3时，响应中包含客户端还未完成的响应信息。当readystate为4时，该respnseText包含完成的响应信息。

     send()方法

     向服务器发送请求。在最后调用这个方法之前，已经设置好了各种信息(提交方式、url、交互方式、反馈结果等等)。

实例：采用Ajax验证用户Id是否重复

     第一步、创建XHR对象，代码略。

     第二步、调用open方法与Ajax引擎建立连接，并告诉Ajax引擎我们的请求方式。  

	
        var url="user_validate.jsp?userId=" + trim(field.value) + "&time=" + new Date().getTime();
       // 这里采用时间戳来i清除缓存 
	xmlHttp.open("GET",url,true);

     第三步、告诉Ajax引擎处理完成后，如何把结果反馈给我们。callback()回调函数中写了反馈信息。

xmlHttp.onreadystatechange=callback;

     第四步、最后调用send方法把步骤2和3设置的参数发送给Ajax引擎。也就是真正的交给Ajax引擎去处理。

callback（）函数：

function callback(){
	//ajax引擎状态为成功 
	if(xmlHttp.readyState == 4){
	//http协议状态为成功 
	if(xmlHttp.status==200){
		alert(xmlHttp.responseText);
	}else{
		alert("请求失败，错误码=" + xmlHttp.status);
	     }
	}
}

请求响应的页面：

String userId = request.getParameter("userId");
	if(UserManager.getInstance().findUserById(userId) != null){ 
		out.println("用户代码已经存在！");
	}

 

  Ajax暂时先分析到此，随着以后理解的深入，还会继续更新。同时非常欢迎大家的指导。