Ajax实现页面局部更新

Ajax，即异步的javascript和xml，通过实现与服务器的少量数据交换来更新局部页面，而传统的页面需要更新页面的话必须重载页面。

  通过XMLHttpRequest对象实现异步方式在后台发送请求，具体步骤如下：

1.初始化XMLHttpRequest对象,因为该对象不是一个W3C标准，对于不同的浏览器，初始化的方法是不一样的。

var xmlhttp;

if（window.XMLHttpRequest）{

xmlhttp=new XMLHttpRequest();

}

else{

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

}

2.为XMLHttpRequest对象指定一个返回结果处理函数，对于返回结果进行处理。

xmlhttp.onreadystatechange=function1; //function1为函数名，该函数不能指定参数也不能有“（）”，如果有参数，

xmlhttp.onreadystatechange=function（）{function1（param）}；

3.创建一个与服务器的连接。

xmlhttp.open(method,url,async,user,password); //method为请求类型，url为请求处理页，可以jsp或者servlet。async为请求方式，异步或同步，默认为异步。user，password为指定请求用户名，密码，没有可以忽略。

4.向服务器放松请求。

send（param）；如果是get请求，可以将参数设置为null，如果是post请求。可以通过param指定要发送的请求参数。不过在发送post请求前，要设置正确的请求头。

xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

例子：用户注册页面检测用户名是否已经被注册，思路如下：

首先一个表单 里面有注册信息，用户名旁边有一个检测是否已被注册的按钮。在页面的适当位置有一个div。单击检测按钮，调用函数判断输入值是否为空，如果为空则提示错误。不为空则调用函数通过前面的四个步骤来实现页面的局部更新。在open（）方法的参数中指定相应的url。该例子中url为一个jsp。在function1中判断请求的状态。如果请求成功的话通过document.getElementById_x_x（）.innerHTML=xmlrequest.responseText()来显示结果。在异步请求的jsp中可以从数据库获取信息，然后将表单中的用户名与数据库的用户名对比 如果有相匹配的。这输出“已经被注册”，否则输出“用户名可以使用”.输出的内容就以文本形式通过前面的document.get.....代码显示到div中了。