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 //使用post 31 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 用户名:<input id="username" 2 name="username" 3 onblur="check_name();"/> 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");
