Ajax用于与服务器进行异步交互，实现页面的动态局部刷新，Ajax有一个关键对象XMLHttpRequest，学习Ajax关键是掌握XMLHttpRequest的操作方法
Ajax的使用步骤
1.创建XMLHttpRequest对象
Ajax有一个关键的对象XMLHttpRequest，不同浏览器对该对象的创建方式不一样
//一般浏览器支持下面这种方式var xhr = new XMLHttpRequest();//IE6,IE5支持下面这种方式var xhr = new ActiveXObject("Microsoft.XMLHTTP");在JavaScript中可以对此创建方法进行封装，代码如下：
function getXhr(){ ???if(window.XMLHttpRequest){ ???????return new XMLHttpRequest(); ???}else{ ???????return new ActiveXObject("Microsoft.XMLHTTP"); ???}}还有另一种方式
function getXhr(){ ???try{ ???????return new XMLHttpRequest(); ???}catch(e){ ???????try{ ???????????return new ActiveXObject("Msxml2.XMLHTTP"); ???????}catch(e){ ???????????try{ ???????????????return new ActiveXObject("Microsoft.XMLHTTP"); ???????????}catch(e){ ???????????throw e; ???????????} ???????} ???}}2.与服务器建立连接
创建对象之后，要使用xhr.open(method, url, asyc)打开与服务器的连接，
open这个方法有三个参数：
1.第一个参数是请求方式：可以是"GET"或"POST"，注意是字符串形式
2.第二个参数是请求的url：可以是servlet的地址
3.第三个参数是是否异步请求：true代表异步请求，false代表非异步请求
注意：当请求方式为为“POST”时，要设置请求头
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")3.向服务器发送请求
建立连接之后，使用xhr.send(context)向服务器发送请求，参数为请求体
不同的请求方式，会send的参数会有所不同。
1.当请求方式是“GET”时，参数应该写“null”，即
xhr.send(null);
2.当请求方式是“POST”时，参数是请求体。当用户登陆时，可以用下面这种方式发送用户信息
xhr.send("username=example&passwd=123456677")4.获取请求结果
此时要监听XMLHttpRequest的onreadystatechange事件，然后执行一些响应事件
这一步还要知道三个XMLHttpRequest的四个属性：
1.readyState
XMLHttpRequest对象存在五个状态，具体请看http://www.w3school.com.cn/ajax/ajax_xmlhttprequest_onreadystatechange.asp
五个状态分别对应数字0，1，2，3，4。具体应用中只需要关心4这个状态，代表着请求已完成，且响应已就绪
2.status
这个属性代表服务器的响应状态码，常见的状态码有200，404，500。
使用给属性时一般使用200这个状态码，代表着服务器响应完成
3.responseText
通过它得到服务器响应的文本内容
4.responseXML
通过它得到服务器响应的xml内容
代码实例：
//得到xmlHttp对象的状态：var state = xhr.readyState;//得到服务器响应的状态码：var status = xhr.status;//得到服务器响应的内容var content = xhr.responseText; //得到服务器响应的文本内容var content = xhr.responseXML; //得到服务器响应的xml内容
Ajax应用实例
首先编写一个AjaxServlet，这里使用doGet方法处理请求，返回“ajax test”文本内容
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { ???????response.getWriter().print("ajax test");
}再编写一个ajaxtest.jsp页面
<%@ page language="java" contentType="text/html; charset=ISO-8859-1" ???pageEncoding="ISO-8859-1"%><%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Insert title here</title></head><script type="text/javascript">//创建XMLHttpRequest对象function getXhr(){ ???????if(window.XMLHttpRequest){ ???????????return new XMLHttpRequest(); ???????}else{ ???????????return new ActiveXObject("Microsoft.XMLHTTP"); ???????} ???}//文档加载完毕时执行以下内容window.onload = function(){ ???var butt = document.getElementById("button"); ???butt.onclick = function(){ ???????var xmlHttp = getXmlHttp(); ???????xmlHttp.open("GET","<c:url value=‘/AjaxServlet‘/>",true); ???????xmlHttp.send(null); ???????xmlHttp.onreadystatechange = function(){ ???????????//readyState==4时，表示服务器响应结束；status==200时，表示服务器响应完成 ???????????if(xmlHttp.readyState == 4 && xmlHttp.status == 200){ ???????????????var content = xmlHttp.responseText; ???????????????var elem = document.getElementById("div"); ???????????????elem.innerHTML = content; ???????????} ???????}; ???};};</script><body> ???<button id="button">send request</button> ???<div id="div"></div></body></html>运行程序
点击按钮之后
下一篇记录对ajax的封装，JQuery的ajax()方法就对Ajax进行了很好的封装
Ajax笔记1
原文地址：http://www.cnblogs.com/songzj/p/7641986.html