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" %>
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方法。
转载请标明出处