Ajax使用方法

日前正在学习Ajax异步通信方式。

首先，介绍一下什么是Ajax.Ajax(Asynchronous Javascript And XML)是一种异步通信方式。它使得在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页，减少了静态页面的加载，起到节省服务器资源的效果。首先看看如何创建Ajax.

在jsp页面中创建Ajax对象：

<span style="white-space:pre">	</span><script type="text/javascript">
		//创建AJAX异步对象，即XMLHttpRequest
		function createAJAX(){
			var ajax = null;
			try{
				ajax = new ActiveXObject("microsoft.xmlhttp");   //支持IE5及以下
			}catch(e1){
				try{
					ajax = new XMLHttpRequest();
				}catch(e2){
					alert("浏览器不支持Ajax！");
				}
			}
			return ajax;
		}
	</script>

Ajax与服务器通信时的步骤，分提交方式说明：

GET提交：

在GET提交中，如果提交的是汉字，首先应该先对汉字进行编码，因为GET提交通过地址栏传输数据，此时servlet端没法进行编码。其中encodeURI()函数是javascript自带的utf-8编码方式，如下：

username = encodeURI(username);

然后以下正式进入ajax与服务器的通讯过程

1）创建ajax对象

var ajax = createAJAX();      //创建Ajax对象，同时ajax的状态被标注为0

2）打开ajax对象，做好发送的准备,此时需要两个参数，method，表明此时的传输方式，url，表明需要传送至服务器的地址，其中get提交的参数需要写到此处。

var method = "GET";

 //为了防止IE浏览器因为地址无变化而对资源不更新，需要拼接此时的时间，保证每次的请求地址栏都不同,此时ajax的状态为1

var url = "${pageContext.request.contextPath}/servlet/userServlet?time="+new Date().getTime()+"&username=" + username;

ajax.open(method,url);

3）传送ajax,又有GET提交参数不在函数，使用如下的传送

ajax.send(null);              //ajax的状态被标注为2

4）此时轮到服务器的处理，ajax的状态被标注为3，get提交此时需要手动解码

String username = request.getParameter("username");    //servlet中的手动解码
byte[] buf = username.getBytes("iso8859-1");
username = new String(buf,"utf-8");
System.out.println("username="+username);

5)服务器处理完毕后返回消息，此时Ajax一直处在监听状态，被标注为4

ajax.onreadystatechange = function(){
	if(ajax.readyState == 4){<span style="white-space:pre">	</span>		//判断ajax的状态是否被标注为4
		if(ajax.status == 200){<span style="white-space:pre">		</span>	//判断服务器转发过来的状态时候成功
			var text = ajax.responseText;   //获取从服务器发送来的消息
			}
		}
	}
}

以上则是get的Ajax的传输方式

相对于POST提交，POST提交的参数主要是放在http协议的请求体，不需要编码和手动解码

具体的ajax代码与GET提交类似，此处不再详解，贴下代码吧

<script type="text/javascript">
      	document.getElementById("textID").onblur = function(){     //失去焦点后出发函数
      		var username = this.value;      //获取当前输入的值
      		
      		var ajax = createAjax();
      		var method = "POST";     //致命此时是POST提交方式
      		var url = "${pageContext.request.contextPath}/servlet/userServlet?time="+new Date().getTime();    //此处不再有参数传递
      		ajax.open(method,url);
      		ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");      //使用POST提交必须要通知服务器参数的地方
      		var content = "username="+username;
      		ajax.send(content);     //此时传送的不再为null
      
      		ajax.onreadystatechange = function(){
      			if(ajax.readyState == 4){
      				if(ajax.status == 200){
      					var text = ajax.responseText;    //得到服务器的输出

<span style="white-space:pre">				</span>$("input").load(url,data,function(backData,textStatus,ajax){

})

} } } }

利用jquery实现ajax更为方便

只需要调用jquery的load方法，下面是load()方法的几种形式

1）简单形式

$("input").load(url)        //其中url为需要提交的地址

$("input").load(url,data);  //data为需要传送给服务器的数据，输入形式必须为json格式数据

当采用简单方式来进行一步通信时，返回结果会自动添加到jquery对象代表的标签中间。如果没有带有请求数据则默认为get提交，在客户端不需要对汉字进行编码，在服务器端不用对汉字进行解码。如果带有数据，则默认为post提交，同样，在客户端不需要对汉字进行编码，在服务器端不用对汉字进行解码。

2）复杂形式

$("input").load(url,data,function(backData,textStatus,ajax){

})

其中

function(backData,textStatus,ajax){   }

为回调函数，backData为服务器端返回的js对象如果是html则是字符串，textStatus为返回状态的文本信息描述，一般返回success，error等，ajax为ajax核心对象，一般可以从该对象中获得ajax的状态、服务器返回的状态码，返回的文本信息等。

同时还可以强行使用get或者post提交

$.get(url,data,function(backData,textStatus,ajax){   });
$.post(url,data,function(backData,textStatus,ajax){   });

同样无序手动编码。
在异步提交中form表单下的action和methd属性不会起决定性作用