初步认识Ajax
1.创建XMLHttpRequest对象
var xmlHttpReques;
//创建xmlHttpReques对象
function createxmlHttpReques(){
try{
xmlHttpReques=new ActiveXObject("Msxml.XMLHTTP");//创建火狐浏览器的xmlHttpReques对象
}
catch (e) {
try {
xmlHttpReques=new ActiveXObject("Microso.XMLHTTP");//创建IE浏览器的xmlHttpReques对象
}
catch (e){
try{
xmlHttpReques=new XMLHttpRequest();//创建谷歌浏览器的xmlHttpReques对象
if(xmlHttpReques.overrideMimeType){//判断xmlHttpReques对象是否创建成功
xmlHttpReques.overrideMimeType("textXML"); //设置xmlHttpReques对象的文本格式
}
}catch (e){
alert("創建失敗");
}
}
}
}
2.通过XMLHttpRequest对象设置请求信息
function doAjax(){
createxmlHttpReques();//創建xmlHttpReques對象
var name=document.form1.Uname.value;
name=name.replace(/(^s+)|(s+$)/g,"");
xmlHttpReques.onreadystatechange=huidiao;//控件发生改变调用方法，是页面发生改变
var url="yanzheng.jsp?name="+name;//获取到文本框中的value值并传到yanzheng.jsp页面进行验证看用户名是否存在
xmlHttpReques.open("get", url,true);//打开服务器的链接设置提交模式为get提交的地址为url以及采用异步，为true时采用异步
xmlHttpReques.send(null);//提交给服务器
}
3.创建回调函数根据服务器的响应动态的改变页面
function huidiao(){
if(xmlHttpReques.readyState==4){//判断xmlHttpReques执行的状态
if(xmlHttpReques.status==200){//判断服务器是否正常执行
var reult=xmlHttpReques.responseText;//获取yanzheng.jsp页面传回来的值
reult=reult.replace(/(^s+)|(s+$)/g,"");//除去空格
reult=reult.replace(/
/g,"");//除去换行
if(reult=="true"){//判断获取的值是否为true
document.getElementById("name_test").innerHTML="可用";
}else{
document.getElementById("name_test").innerHTML="用户名已存在";
}
}
else{
document.getElementById("name_test").innerHTML=xmlHttpReques.status;
}
}
}
yanzheng.jsp页面
<%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%> <%@page import="com.user.dao.UserDao"%> <%@page import="com.user.dao.impl.UserDaoImpl"%> <% request.setCharacterEncoding("utf-8");//设置request对象的编码格式 UserDao userDao=new UserDaoImpl(); String name=request.getParameter("name");//获取到通过doAjax方法传过来的name值var url="yanzheng.jsp?name="+name; boolean flag=userDao.getUserByName(name);//根据name的值在数据库中进行查询如果存在返回true否则返回false if(flag){ out.print(false);//如果返回的是true由huidiao()函数中的var reult=xmlHttpReques.responseText;这一句接受响应的文本内容且值为false }else { out.print(true);//同样是输出响应的文本内容且值为true } /* 解释一下当flag的值为true时说明数据库中存在此人根据注册的时用户名不能重复的规则所以在这了会向响应的文本内容传为false所以服务器的响应的文本值是false。 当flag的值为flase时说明数据库中不存在这个用户名所以就可以进行顺利的注册，所以在这个时候响应的文本内容是为true所以服务器的响应的文本值是true 在回调函数接收到响应的文本内容时就会根据响应的文本内容值进行判断，当为true时说明用户名是可用的也就是数据库中没有与此重复的用户名就可以继续注册，相反则无法注册 在这里血药注意的就是在这里说出的文本响应的内容会有很多的空格以及换行，我们在回调函数中要进行处理。 */ %>
Ajax常用的一些方法：
| 方法名 | 说明 |
| open(method,URL,async) |
建立与服务器的连接 method指定请求的Http方法典型的值有get和post URL指定请求的地址 async指定是否使用异步为true时使用异步 |
| send（content） |
发送请求 content指定请求的参数没有参数时设为null |
| setRequestHeader（header value） | 设置请求的头信息 |
其中的onreadystatechange:是指回调函数
readystate是XMLHttpRequset的状态信息：
| 状态码 | 说明 |
| 0 | XMLHttpRequset对象没有完成初始化 |
| 1 | XMLHttpRequset对象开始发送请求 |
| 2 | XMLHttpRequset对象的请求发送完成 |
| 3 | XMLHttpRequset对象开始读取响应，但是还没有结束 |
| 4 | XMLHttpRequset对象读取响应结束 |
status是http的状态信息：
| 状态码 | 说明 |
| 200 | 服务器响应正常 |
| 400 | 无法找到请求的资源 |
| 403 | 没有访问的权限 |
| 404 | 访问的资源不存在 |
| 500 | 服务器内部出错 |
responseText：获得响应的文本内容。
总结：
1.创建XMLHttpRequest对象，这里在创建XMLHttpRequset对象的时候是要分浏览器的根据不同的浏览器分不同的情况进行创建 ，创建完之后一定要判断是否创建成功
以及设置响应文本的传输格式
2.设置请求信息，以及服务器的连接方式以及设置是否采用异步以及对服务器发送请求
3.那就是服务器对请求进行处理也就是上面的例子进入到yanzheng.jsp页面进行请求的处理，然后把结果返回。
4.就是回调函数（huidiao（））接收返回结果，通过多对结果的判断对我们的页面进行动态的改变。