1、ajax是什么?
(asynchronous javascript and xml 异步的javascript和xml)ajax是一种用来改善用户体验的技术，其实质是利用浏览器提供的一个特殊的对象(XMLHttpRequest对象，一般称之为ajax对象)异步地(当ajax对象向服务器发请求时，浏览器不会销毁当前页面，用户仍然可以对当前页面做其它的操作)向服务器发送请求。服务器返回的数据不再是一个完整的新的页面，而是部分数据，利用这些数据，更新当前页面。整个过程，页面无刷新，不打断用户的操作。
2、如何获得ajax对象?
XMLHttpRequest没有标准化，要区分浏览器。function getXhr(){
var xhr = null;
if(window.XMLHttpRequest){
//非ie浏览器
xhr = new XMLHttpRequest();
}else{
//ie浏览器
xhr = new ActiveXObject('MicroSoft.XMLHttp');
}
return xhr;
}@H_502_16@
3、ajax对象的重要的属性
1)onreadystatechange:绑订事件处理函数,当ajax对象的readyState值发生了改变，就会产生readystatechange事件。
2)responseText:获得服务器返回的文本。
3)responseXML:获得服务器返回的xml文档。
4)status:状态码
5)readyState:有5个值，分别是0,1,2,3,4,表示ajax对象与服务器通信的状态。比如,当值为4时，表示ajax对象获得了服务器返回的所有的数据。
4、编程步骤
step1,获得ajax对象。
比如:
var xhr = getXhr();
step2,使用ajax对象发请求。
1)发送get请求
xhr.open('get','check_username.do?username=tom',true);
xhr.onreadystatechange=f1;
xhr.send(null);
2)发送post请求
xhr.open('post','check_username.do',true);
xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
xhr.onreadystatechange=f1;
xhr.send('username=tom');
注意:
因为按照http协议要求，发送post请求必须添加一个content_type消息头。ajax对象默认不会添加这个消息，所需要调用setRequestHeader方法的添加一个"content-type"消息头。
true:发送异步请求(ajax对象发请求时，浏览器不会销毁当前页面，用户仍然可以做其它操作)。
false:发送同步请求(ajax对象发请求时，浏览器不会销毁当前页面,浏览器会锁定当前页面，用户不能操作当前页面)。
step3,编写服务器端的处理代码，一般不再需要返回一个完整的页面，只需要返回部分数据。
step4,编写事件处理函数
function f1(){
if(xhr.readyState == 4){
var txt = xhr.responseText;
更新当前页面
}
}
5、实例（分别使用get请求和post请求方式，验证用户名是否存在）
项目结构图：
准备工作（使用prototype.js和自定义的my.js）
prototype.js:在对常用的JavaScript语句进行封装的框架，可简化代码。在这里下载。
my.js:用户获取ajax对象，通用性代码提取到一个js文件中
/*获得ajax对象*/
function getXhr() {
var xhr = null;
if (window.XMLHttpRequest) {
// 非ie浏览器
xhr = new XMLHttpRequest();
} else {
// ie浏览器
xhr = new ActiveXObject('MicroSoft.XMLHttp');
}
return xhr;
}@H_502_16@
register.jsp:
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
.tips {
color: red;
}
</style>
<script type="text/javascript" src="js/my.js"></script>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript">
function check_username() {
//1、获得ajax对象
var xhr = getXhr();
//2、发请求
var url = 'check_username.do?username=' + $F('username');
xhr.open('get',encodeURI(url),true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {//服务器正常处理了请求
//必须要等到ajax对象获取到了服务器返回的所有数据时才执行
var txt = xhr.responseText;
//alert(txt);
//利用服务器返回的数据更新当前页面
$('username_msg').innerHTML = txt;
} else {
$('username_msg').innerHTML = '验证出错..';
}
}
};
$('username_msg').innerHTML = "正在检查...";
xhr.send(null);
}
function check_username_post() {
//1、获得ajax对象
var xhr = getXhr();
//2、发请求
xhr.open('post',true);
xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
var txt = xhr.responseText;
$('username_msg').innerHTML = txt;
}
};
xhr.send('username=' + $F('username'));
}
</script>
</head>
<body>
<form action="regist.do" method="post">
<fieldset>
<legend>注册</legend>
用户名：<input id="username" name="username" onblur="check_username_post();" /><span
class="tips" id="username_msg"></span><br />
真实姓名：<input name="name" /><br />
<input type="submit" value="提交">
</fieldset>
</form>
</body>
</html>@H_502_16@
ActionServlet.java:处理类
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 {
private static final long serialVersionUID = 1L;
private PrintWriter out;
protected void service(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException {
response.setCharacterEncoding("utf-8");
out = response.getWriter();
String uri = request.getRequestURI();
String action = uri.substring(uri.lastIndexOf("/"),uri.lastIndexOf("."));
if ("/check_username".equals(action)) {
String username = request.getParameter("username");
// 省略数据库查找并对比逻辑
if (username.equals("zs")) {
out.println("用户名已存在");
} else {
out.println("用户名可用");
}
}
out.close();
}
}
@H_502_16@
web.xml中配置:
<servlet>
<servlet-name>ActionServlet</servlet-name>
<servlet-class>web.ActionServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>ActionServlet</servlet-name>
<url-pattern>*.do</url-pattern>
</servlet-mapping>@H_502_16@
发布并访问http://localhost:8080/AjaxTest/register.jsp，运行效果如下：（用户名输入zs失去焦点后弹出“用户名已存在”，输入其他内容失去焦点后显示“用户名可用”）
6、编码问题
1)发送get请求
ie浏览器提供的ajax对象会对中文按照gbk进行编码，其它浏览器会对中文按照utf-8进行编码。容器(比如tomcat)默认情况下会使用iso-8859-1去解码。
解决方式:
step1,让容器按照指定的字符集去解码。修改tomcat的配置文件(conf/server.xml)
<Connector URIEncoding="utf-8">
以上配置的作用是，容器对所有的get请求中的参数使用utf-8进行编码。（仅对get请求有效）
step2,使用encodeURI函数对中文进行编码。
2)发送post请求
所有浏览器内置的ajax对象都会使用utf-8进行编码。容器(比如tomcat)默认情况下会使用iso-8859-1去解码。
解决方式：
request.setCharacterEncoding("utf-8");
7、ajax编程中遇到的问题
1)缓存问题
当使用IE浏览器时，ajax对象会检查请求地址，如果地址没有变化，不会向服务器发请求。
解决方式：
在请求地址后面加一个随机数，比如：
xhr.open('get','getNumber.do?'+Math.random(),true);
或者，也可以改为用post方式发请求。
2)当服务器进行一个比较耗时的操作，可以在 send方法执行前添加一个提示：
比如:
$('spanId').innerHTML = '正在验证...';
3)当服务器执行时，出现了异常。
可以通过读取状态码来获知服务器是否出现了异常。
比如:
if(xhr.status == 200){
正确
}else{
错误处理...
}
4)同步请求（扩展）
a.什么是同步请求？
当ajax对象再向服务器发送请求时，浏览器会锁定当前页面，用户不能对当前页面做其他操作，必须等服务器的响应发送回来，浏览器才会向下继续执行。
b.如何发送同步请求？
xhr.open('get/post','...do',false);
8、ajax的优点
(1)不打断用户的操作，页面无刷新。
(2)按照需要获取数据，浏览器与服务器之间数据传输量大大减少，性能会提高。
(3)是一种标准化的技术，不需要浏览器下载任何的插件(比如,Flex需要下载插件)。
转载请注明出处：
原文链接：https://www.f2er.com/ajax/162263.html
