1. ajax是什么？
1）异步的javascript和xml 为了解决传统的web应用当中“等待－响应－等待”的弊端而创建的一种技术，其实质可以 理解为：使用浏览器内置的一个对象(XmlHttpRequest)向服务器发送请求，服务器返 回xml数据或者是文本数据，然后在浏览器端使用这些数据更新部分页面，整个过程，页 面无任何的刷新。 2）传统的“等待－响应－等待”： 指的是，在传统的web应用当中，比如注册，用户填写完整个注册信息，然后提交， 此时，浏览器会将整个注册页面抛弃，等待服务器返回一个新的完整的页面。在等待 过程当中，用户不能够做其他操作。服务器生成新的页面发送给浏览器，浏览器需要 重新解析整个页面生成相应的界面。 2.XmlHttpRequest对象 1）如何获得该对象 该对象并没有标准化，要区分浏览器。 ie浏览器不指出XMLHttpRequest类型，其他浏览器支持。 function getXmlHttpRequest(){ var xmlHttpRequest = null; iif((typeof)) } 2)属性 onreadystatechange:注册监听器（绑定事件处理代码） readyState：ajax对象与服务器间通讯的状态，该状态有0 ，1，2，3，4，五个值，当值为4时，表示收到了服务器返回 所有的数据。 responseText：获取服务器返回的文本数据 responseXML：获得服务器返回的xml数据 statue：获得状态码 3）编程 step1 获得XmlHttpRequest对象 var xhr = getXhr(); step2 发请求 1)发送get请求 //open(请求方式，请求地址，同步还异步) //如果有请求参数，应该添加到请求地址后面 //true表示异步，false表示同步 xhr.open('get','check_username.do?username=zs',true); xhr.onreadystatechange=f1; xhr.send(null); 2)发送post请求 xhr.open(‘post','check_username.do',true); //为xhr生成的请求数据包添加一个content-type消息头 xhr.setRequestHeader('content-type','application/x-www-form-urlencoded'); xhr.send("username=zs"); step3 编写服务器端代码，来处理请求。 step4 在监听器（时间处理代码当中）处理服务器返回的数据。 function f1(){ //只有状态等于4 if(xhr.readyState==4){ //获得服务器返回的数据 var txt = xhr.responseText; //var xml = xhr.reqponseXML; //dom操作 ... } }例子:JS部分1 function $(id){ 2 return document.getElementById(id); 3 } 4 function $F(id){ 5 return document.getElementById(id).value; 6 } 7 function getXhr() { 8 var xhr = null; 9 if (window.XMLHttpRequest) {10 //非ie浏览器11 xhr = new XMLHttpRequest();12 } else {13 //ie浏览器14 xhr = new ActiveXObject("Microsoft.XMLHttp");15 }16 return xhr;17 } javascript部分使用get
1 function check_name(){ 2 3 //step1 得到XMLHttpRequest对象 4 var xhr = getXhr(); 5 //step2 发送请求 6 xhr.open('get', 7 'check_name.do?username=' 8 + $F('username'),true); 9 xhr.onreadystatechange=function(){10 if(xhr.readyState == 4){11 //只有状态等于4,才能够获得服务器返回的12 //数据。13 if(xhr.status==200){14 //说明服务器返回的数据正常15 var txt = xhr.responseText;16 //更新页面17 $('name_msg').innerHTML = txt;18 }else{19 $('name_msg').innerHTML = '稍后重试';20 }21 22 }else{23 //当readyState的值不等于4，表示xhr对象正在与服务器交互24 $('name_msg').innerHTML ='正在检查..';25 }26 };27 xhr.send(null);28 }29 30 //使用post31 function check_name2(){32 33 //step1 得到XMLHttpRequest对象34 var xhr = getXhr();35 //step2 发送请求36 xhr.open('post',37 'check_name.do',true);38 xhr.onreadystatechange=function(){39 if(xhr.readyState == 4){40 //只有状态等于4,才能够获得服务器返回的41 //数据。42 if(xhr.status==200){43 //说明服务器返回的数据正常44 var txt = xhr.responseText;45 //更新页面46 $('name_msg').innerHTML = txt;47 }else{48 $('name_msg').innerHTML = '稍后重试';49 }50 51 }else{52 //当readyState的值不等于4，表示xhr对象正在与服务器交互53 $('name_msg').innerHTML ='正在检查..';54 }55 };56 xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');57 xhr.send('username=' + $F('username'));58 } jsp部分：
1 用户名:4
Servlet部分
1 String username =2 request.getParameter("username");3 if(username.equals("zs")){4 out.println("用户名已经存在");5 }else{6 out.println("可以使用");7 } 3.ajax需要注意的问题1）缓存问题： 当采用get方式向服务器发送请求时，ie浏览器会先查询缓存当中有没有 结果，如果有，则不会向服务器发送请求。 解决方案： a.在请求地址后面加上一个随机数 b.或者使用post方式2）编码问题 a.连接地址当中有中文 浏览器一定会使用utf-8对连接地址中的中文进行编码 解决方式： 对于tomcat,tomcat_home/config/server.xml， 在 <Connector/> 中添加URLEncoding="utf-8" 重新启动服务器。 b.连接地址中包含了中文参数 浏览器会对连接地址中的中文参数进行编码，会使用打开 连接所在页面的编码格式来编码. 解决方式： step1: 对于tomcat,tomcat_home/config/server.xml， 在 <Connector/> 中添加URLEncoding="utf-8" 重新启动服务器。 step2：要保证连接所在页面以utf-8编码格式打开 如果页面中不以utf-8来编码，那就对中文参数手动 转码:<%=URLEncoder.encoding("张三")%> c.ajax编程当中如何向服务器发送中文 在ajax编程中，不是浏览器向服务器发送请求，是XMLHttpRequest对 象向服务器发送请求，该对象也会对请求中的中文参数进行编码。 使用get方法发送请求时 ie浏览器内置的MLHttpRequest对象（其实是ActiveXObject） 会采用gbk编码，而其他浏览器，采用utf-8编码。 解决办法： step1: 对于tomcat,tomcat_home/config/server.xml， 在 <Connector/> 中添加URLEncoding="utf-8" 重新启动服务器。 step2:使用encodeURI(javascript内置的一个函数) encodeURI(url) 使用post发送请求，此时，浏览器会对中文参数统一进行utf-8编码。 解决方式：request.setCharacterEncoding("utf-8");