标签：
Ajax介绍：
w3school链接：http://www.w3school.com.cn/xmldom/dom_http.asp
AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。
AJAX = 异步 JavaScript和XML（标准通用标记语言的子集）。
AJAX 是一种用于创建快速动态网页的技术
使用ajax目的是为了提高用户的感受，带来用户体验改变，是web优化一种主要手段
Ajax是什么？
传统web交互模型：浏览器直接将请求发送给服务器，服务器返回响应，直接发给浏览器，
Ajax交互模型：浏览器首先将请求发送 Ajax引擎（以XMLHttpRequest为核心），AJax引擎再将请求发送给服务器；
服务器回送响应先发给Ajax引擎，再由引擎传给浏览器显示
1、同步交互模式，客户端提交请求，等待，在响应回到客户端前，客户端无法进行其他操作
2、异步交互模型，客户端将请求提交给Ajax引擎，客户端可以继续操作，由Ajax引擎来完成与服务武器端通信，当响应回来后，Ajax引擎会更新客户页面，在客户端提交请求后，用户可以继续操作，而无需等待 。
Ajax快速入门：
1. 创建XMLHttpRequest对象
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp=new XMLHttpRequest();
} else if (window.ActiveXObject) {
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
2.注册回调函数
xmlhttp.onreadystatechange=function(){ };
3.使用open方法建立与服务器的连接：只是用于设置请求方式 以及url,它不发送请求.
xmlhttp.open(method, url, async, username, password); //请求法师，资源路径，后面3个可以省略
注：GET请求的参数一般加在url后面
4.向服务器端发送数据：它是用于发送请求的。
xmlhttp.send(null);
// null代表没有参数
// 如果有参数可以写成:"username=tom&password=123" (一般写POST请求的参数)
注意:如果是post请求方式，还需要设置一个http请求头。
xmlhttp.setRequestHeader("content-type","application/x-www-form-urlencoded");
例：
xmlhttp.open(method, url);
xmlhttp.setRequestHeader("content-type","application/x-www-form-urlencoded");
xmlhttp.send(null);
5.在回调函数中处理数据
(1) XMLHttpRequest对象属性 : readyState
它代表的是XMLHttpRequest对象的状态。
0.代表XMLHttpRequest对象创建
1.open操作
2.send操作
3.接收到了响应数据，但是只有响应头，正文还没有接收。
4.所有http响应接收完成
(2)XMLHttpRequest对象属性 : status
由服务器返回的 HTTP 状态代码，如 200 表示成功
(3)通过XMLHttpRequest对象获取数据
1.responseText
2.responseXML
JSON插件：
是一种javascript轻量级数据交互格式，主要应用于Ajax编程。在java中，可以通过jsonlib插件，在java对象与json之间做转换。
案例：
1.验证用户名是否可以使用
<html>
<head>
<title>ajax验证用户名是否可用</title>
<script type="text/javascript">
window.onload=function(){
var reg = document.getElementById("username");
reg.onblur=function(){
//获取XMLHttpRequest对象
var xmlhttp;
if (window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest();
}else if (window.ActiveXObject){
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("myspan").innerHTML=xmlhttp.responseText;
}
};
xmlhttp.open("GET", "${ pageContext.request.contextPath }/registerservlet?username="+reg.value);
xmlhttp.send(null);
};
};
</script>
</head>
<body>
<input type="text" name="username" id="username" ><span id="myspan"></span>
<br>
<input type="button" value="注册">
</body>
</html>
public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html;charset=utf-8");
String username = request.getParameter("username");
if("lihaotian".equals(username)){ response.getWriter().print("<font color=‘red‘>用户名已被注册</font>"); }else{ response.getWriter().print("<font color=‘blue‘>用户名可以使用</font>"); } }
2.显示商品信息
标签：
原文地址：http://www.cnblogs.com/gudanjava/p/ajax.html
