Ajax使用实例详解.docVIP

%@page pageEncoding utf-8 contentType text/html;charset utf-8% .tips color:red; font-size:24px; script type text/javascript src % request.getContextPath % /js/my.js script type text/javascript function check_username //step1,获得ajax对象 var xhr getXhr ; //step2,发送请求 /*1、找到tomcat的server.xml文件 TOMCAT_HOME/ conf/server.xml 。 添加URIEncoding utf-8; 作用是告诉服务器，对亍get请求中的数据，使用utf-8解码。 2、对请求地址使用encodeURI 函数迚行处理，该函数的作用是：对请求地址中的中文进行 utf-8编码。*/ var uri check_username.do?username + $F username xhr.open get,encodeURI uri ,true ; /* 注册一个监听器 即当xhr的状态发生改变产生了readystatechange事件， 该事件会由f1函数来处理。 我们需要在f1函数里面获得服务器返回的数据， 然后更新页面 */ xhr.onreadystatechange function //必须等待ajax对象获取了服务器返回的所有的数据 if xhr.readyState 4 if xhr.status 200 /*正确执行*/ var txt xhr.responseText; //利用服务器返回的数据更新当前页面 $ A_msg .innerHTML txt; else $ A_msg .innerHTML 亲，系统错误！; ; $ A_msg .innerHTML 正在检查...;/*先执行这行再上面的代码块*/ xhr.send null ; function check_yanzheng var xhx getXhr ; xhx.open get, check_yanzheng.do?number + $F number ,true ; xhx.onreadystatechange function if xhx.readyState 4 var txt xhx.responseText; $ B_msg .innerHTML txt; ; /* 只有调用send方法之后，请求才会真正发送 */ xhx.send null ; function check_username2 var xhr getXhr ; xhr.open post,check_username.do,true ; xhr.setRequestHeader content-type, application/x-www-form-urlencoded ; //按照http协议要求，发送post请求时，要添加一个content-type消息头，而默认情况下,ajax对象并不会自动添加这个消息头，所以，需要调用setRequestHeader方法来添加。 xhr.onreadystatechange function if xhr.readyState 4 var txt xhr.responseText; $ A_msg .innerHTML txt; ; xhr.send username + $F username ; body style font-size:30px;font-style:italic; form action regist.do method post !-- 当onblur check_username2 时method post -- 注册 用户名: input id username name username onblur check_username ;/ span class tips id A_msg 真实姓名: input name name/ 验证码: input name number id number onblur check_yanzheng ;/ span class tips id B_msg img src checkcode id img1/ !-- src checkcode请求路径与action regist.do之类相同 -- a href javascript:; onclick $ img1 .src