XmlHttp - Ajax技术
原创
©著作权归作者所有：来自51CTO博客作者wx62eb7326068f3的原创作品，请联系作者获取转载授权，否则将追究法律责任
XmlHttp是什么？
最通用的定义为：XmlHttp是一套可以在Javascript、VbScript、Jscript等脚本语言中通过http协议传送或从接收XML及其他数据的一套API。XmlHttp最大的用处是可以更新网页的部分内容而不需要刷新整个页面。
来自MSDN的解释：XmlHttp提供客户端同http服务器通讯的协议。客户端可以通过XmlHttp对象(MSXML2.XMLHTTP.3.0)向http服务器发送请求并使用微软XML文档对象模型Microsoft® XML Document Object Model (DOM)处理回应。
现在的绝对多数浏览器都增加了对XmlHttp的支持，IE中使用ActiveXObject方式创建XmlHttp对象，其他浏览器如：Firefox、Opera等通过window.XMLHttpRequest来创建xmlhttp对象。
XmlHttp对象参考：
属性：
onreadystatechange*
| 指定当readyState属性改变时的事件处理句柄。只写
|
readyState
| 返回当前请求的状态，只读.
|
responseBody
| 将回应信息正文以unsigned byte数组形式返回.只读
|
responseStream
| 以Ado Stream对象的形式返回响应信息。只读
|
responseText
| 将响应信息作为字符串返回.只读
|
responseXML
| 将响应信息格式化为Xml Document对象并返回，只读
|
status
| 返回当前请求的http状态码.只读
|
statusText
| 返回当前请求的响应行状态，只读
|
* 表示此属性是W3C文档对象模型的扩展.
方法：
abort
| 取消当前请求
|
getAllResponseHeaders
| 获取响应的所有http头
|
getResponseHeader
| 从响应信息中获取指定的http头
|
open
| 创建一个新的http请求，并指定此请求的方法、URL以及验证信息(用户名/密码)
|
send
| 发送请求到http服务器并接收回应
|
setRequestHeader
| 单独指定请求的某个http头
|
下面是实例，一个是get方式，另一个是post方式，最后一个是将其整理为一个类来调用，如果使用jQuery有不满意的地方，可以自己写底层一点的代码
先上servlet代码，因为都一样的：
public class AjaxServlet extends HttpServlet{
private static final long serialVersionUID = 1L;
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String name = req.getParameter("name");
resp.getWriter().println("doGet:"+name);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String name = req.getParameter("name");
resp.getWriter().println("doPost:"+name);
}
}1.get方式：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html >
<html>
<head>
<script type="text/javascript">
function checkName(obj){
var name = obj.value;//先获取到输入框中的内容
//1.创建Ajax对象
var ajax = null;
if(window.XMLHttpRequest){//高版本 - 现在一般是这个
ajax = new XMLHttpRequest();
}else{//低版本 - 早期IE之类的，现在的IE也改了
ajax = new ActiveXObject();
}
//2.设置通讯方式
var url = "<c:url value='/AjaxServlet'/>"+"?name="+name;
//method, url, async
//使用什么方法、路径是什么、是否异步(既然使用了Ajax，一般都默认异步)
ajax.open("GET", url, true);
//3.设置回调函数
ajax.onreadystatechange = function(){
/* readyState：
0 (未初始化) 对象已建立，但是尚未初始化（尚未调用open方法）
1 (初始化) 对象已建立，尚未调用send方法
2 (发送数据) send方法已调用，但是当前的状态及http头未知
3 (数据传送中) 已接收部分数据，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误，
4 (完成) 数据接收完毕,此时可以通过通过responseBody和responseText获取完整的回应数据
*/
if(ajax.readyState==4){//完成了才调用，没完成调用也没意思
if(ajax.status==200){//http状态码 - 成功时调用这个函数
success(ajax.responseText);
}else{//其余状态码认为是失败的，调用error函数
error(ajax.status);
}
}
};
//4.触发发送动作
ajax.send();
}
//成功
function success(res){
sp.innerHTML=res;
}
//错误信息
function error(st){
alert(st);
}
</script>
</head>
<body>
<h2>Ajax-Get方式</h2><hr>
<!-- 光标焦点离开这个text的时候触发函数checkName(this) -->
<input type="text" name="name" onchange="checkName(this)"/>
<!-- Ajax成功执行之后在这添加信息 -->
<span id="sp"></span>
</body>
</html>
2.post方式，其实差不了多少，所以注释我都写不一样的地方
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html >
<html>
<head>
<script type="text/javascript">
function checkName(obj){
var name = obj.value;
var data = "name="+name;
//1.创建Ajax对象
var ajax = null;
if(window.XMLHttpRequest){
ajax = new XMLHttpRequest();
}else{
ajax = new ActiveXObject();
}
//2.设置通讯方式@@@@不一样的地方1：不使用url传参@@@@
var url = "<c:url value='/AjaxServlet'/>";
ajax.open("POST", url, true);
//3.设置回调函数
ajax.onreadystatechange = function(){
if(ajax.readyState==4){
if(ajax.status==200){
success(ajax.responseText);
}else{
error(ajax.status);
}
}
};
//@@@@不一样的地方2：POST方式独有的一句，必须设置请求头，否则出BUG，可以在post表单提交的时候监听到
ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//4.触发发送动作@@@@不一样的地方3：在send( )函数传输数据
ajax.send(data);//前面定义了，数据格式为："name="+name+"&age=20"
}
function success(res){
sp.innerHTML=res;
}
function error(st){
alert(st);
}
</script>
</head>
<body>
<h2>Ajax-Post方式</h2><hr>
<!-- 光标焦点离开这个text的时候触发函数checkName(this) -->
<input type="text" name="name" onchange="checkName(this)"/>
<!-- Ajax成功执行之后在这添加信息 -->
<span id="sp"></span>
</body>
</html>
3.最后是将其封装，方便调用，但我这个只是支持text传输的，其他的暂时还没学到
(1)工具
//Ajax相当于一个类了，可以调用里面的get,post
function Ajax(){
//1.get方式
this.get = function(url,success,error){
var ajax = null;
if(window.XMLHttpRequest){
ajax = new XMLHttpRequest();
}else{
ajax = new ActiveXObject();
}
ajax.open("GET", url, true);
ajax.onreadystatechange = function(){
if(ajax.readyState==4){
if(ajax.status==200){
success(ajax.responseText);
}else{
error(ajax.status);
}
}
};
ajax.send();
}
//2.post方式
this.post = function(url,data,success,error){
var ajax = null;
if(window.XMLHttpRequest){
ajax = new XMLHttpRequest();
}else{
ajax = new ActiveXObject();
}
ajax.open("POST", url, true);
ajax.onreadystatechange = function(){
if(ajax.readyState==4){
if(ajax.status==200){
success(ajax.responseText);
}else{
error(ajax.status);
}
}
};
ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
ajax.send(data);
}
}
(2)调用
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html >
<html>
<head>
<!-- 引入js -->
<script type="text/javascript" src="<c:url value='/js/Ajax.js'/>"></script>
<!-- 自己的函数 -->
<script type="text/javascript">
/GET//
function checkName1(obj){
var ajax = new Ajax();
var name = obj.value;
var url = "<c:url value='/AjaxServlet'/>"+"?name="+name;
ajax.get(url,success1,error1);
}
function success1(res){
sp1.innerHTML=res;
}
function error1(st){
alert(st);
}
/POST//
function checkName2(obj){
var ajax = new Ajax();
var name = obj.value;
var url = "<c:url value='/AjaxServlet'/>";
var name = obj.value;
var data = "name="+name;
ajax.post(url,data,success2,error2);
}
function success2(res){
sp2.innerHTML=res;
}
function error2(st){
alert(st);
}
</script>
</head>
<body>
<h2>Ajax-Get方式</h2>
<input type="text" name="name" onchange="checkName1(this)"/>
<span id="sp1"></span>
<hr>
<h2>Ajax-Post方式</h2>
<input type="text" name="name" onchange="checkName2(this)"/>
<span id="sp2"></span>
</body>
</html>
(3)结果，还是一样的。
