function getXhr(){ var xhr; if(window.XMLHttpRequest){ //非ie浏览器 xhr = new XMLHttpRequest(); }else{ //ie xhr = new ActiveXObject('Microsoft.XMLHttp'); } return xhr; }
上面这段代码是写在JS里的，用来返回AJAX对象。下面来一段JSP里的代码。
<%@page pageEncoding="utf-8" contentType="text/html;charset=utf-8" %> <html> <head> <script type="text/javascript" src="js/my.js"></script> <script type="text/javascript"> function check_username(){ //step1，获得ajax对象 var xhr = getXhr(); //step2, 发请求 xhr.open('get', 'check_username.do?username=' + $F('username'),true); xhr.onreadystatechange=function(){ //只有ajax对象的readyState值为4时， //才能获得服务器返回的数据。 if(xhr.readyState == 4){ //获得服务器返回的文本数据 var txt = xhr.responseText; //更新页面 $('username_msg').innerHTML = txt; } }; xhr.send(null); } </script> </head> <body style="font-size:30px;font-style:italic;"> <form action="regist.do" method="post"> <fieldset> <legend>注册</legend> 用户名:<input id="username" name="username" onblur="check_username();"/> <span style="color:red;" id="username_msg"></span> <br/> 密码:<input type="password" name="pwd"/><br/> <input type="submit" value="确定"/> </fieldset> </form> </body> </html>
再看看servlet里面怎么写：
import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; public class ActionServlet extends HttpServlet { public void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html;charset=utf-8"); PrintWriter out = response.getWriter(); String uri = request.getRequestURI(); String action = uri.substring(uri.lastIndexOf("/"),uri.lastIndexOf(".")); if(action.equals("/check_username")){ String username = request.getParameter("username"); if(username.equals("zs")){ out.println("用户名已经被占用"); }else{ out.println("用户名可以使用"); } } out.close(); } }
都完事了吧，来段点AJAX知识
1、ajax是什么? asynchronous javascript and xml:异步的javascript和xml。 是一种用来改善用户体验的技术，其本质是利用 浏览器内置的一种特殊的对象(XMLHttpRequest)异步 (即发送请求时，浏览器不会销毁当前页面，用户 可以继续在当前页面做其它的操作)的向服务器发送 请求,并且利用服务器返回的数据(不再是一个完整的 页面，只是部分的数据，一般使用文本或者xml返回) 来部分更新当前页面。 使用ajax技术之后，页面无刷新，并且不打断用户 的操作。 2、ajax对象 (1)如何获得ajax对象? XMLHttpRequest并没有标准化，要区分浏览器: function getXhr(){ var xhr; if(window.XMLHttpRequest){ //非ie浏览器 xhr = new XMLHttpRequest(); }else{ //ie xhr = new ActiveXObject('Microsoft.XMLHttp'); } } (2)ajax对象的属性 a, onreadystatechange : 绑订一个事件处理 函数(注册监听器),当ajax对象的readyState 值发生了改变(比如，从0-->1)，就会产生 readystatechange事件。 b, responseText: 获得服务器返回的文本 c, responseXML:获得服务器返回的xml数据 d, status:获得状态码 e, readyState:ajax对象在与服务器进行通讯时， 通过readyState属性值可以获取该对象的通讯的状态， 其属性有5个(0,1,2,3,4),当属性值为4时，表示ajax 对象已经获得了服务器返回的所有的数据。 (3)ajax编程的基本步骤 step1, 先获得ajax对象 var xhr = getXhr(); step2, 发送请求 xhr.open(请求方式,请求地址,异步还是同步); 请求方式: get/post 请求地址:如果是get请求，请求参数要添加到 请求地址的后面。 true表示异步请求 ：ajax对象发请求的同时，用户 可以对当前页面做其它的操作。 false表示同步请求:ajax对象发请求的同时,浏览器 会锁订当前页面，用户需要等待处理完成之后才 能做下一步操作。 方式一：get请求 xhr.open('get', 'check_username.do?username=zs',true); xhr.onreadystatechange=f1; xhr.send(null); 方式二：post请求 xhr.open('post'); step3,编写服务器端的代码，服务器端一般不需要 返回完整的页面，只需要返回部分的数据，比如一个 简单的字符串。 step4, 编写监听器 function f1(){ if(xhr.readyState == 4){ //获得服务器返回的数据 var txt = xhr.responseText; //dom操作 } }
1、ajax编程中的编码问题 (1)发送get请求: ie浏览器内置的ajax对象，对中文参数使用gbk编码， 而其它浏览器(firefox,chrome)使用utf8编码。 服务器端默认使用iso-8859-1去解码。 解决方案: step1,让服务器对get请求中的参数使用指定的编码 格式进行解码。 比如，对于tomcat，可以修改 conf/server.xml URIEncoding="utf-8" step2,对请求地址，使用encodeURI函数进行统一的 编码(utf-8) (2)发送post 所有浏览器内置的ajax对象都会使用utf-8进行编码。 解决方案: request.setCharacterEncoding("utf-8"); 2、发送post请求 xhr.open('post','check_username.do',true); xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded'); xhr.onreadystatechange=f1; xhr.send('username=' + $F('username')); 注意： 因为按照http协议的要求，如果发送的post请求， 请求数据包里面，应该有一个消息头 content-type。 但是，ajax对象默认没有，所以，需要调用 setRequestHeader方法。
转载请标明出处