因为考研，一段时间不摸键盘了，今天复习一下AJAX。写在51CTO，记录个人生活点滴。javascript
实例说明：经过一步刷新的方式，将页面输入的内容返回到页面并显示。固然js很容易实现。css
一：代码部分： html
html:部分java
<html>ajax
<head>浏览器
<title>测试界面</title>服务器
<meta http-equiv="pragma" content="no-cache">app
<meta http-equiv="cache-control" content="no-cache">异步
<meta http-equiv="expires" content="0"> ide
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<linkrel="stylesheet" type="text/css" href="styles.css">
-->
</head>
<body>
<div id="data">
<label for="username">用户名：</label>
<input type="text"id="username" size="10"name="username" />
<br />
<label for="psw">密码：</label>
<input type="password"id="psw" size="10"name="psw" />
<br/>
<input type="submit"id="submit" name="submit"alt="提交" onclick="javascript:submit()"/>
</div>
<div id="show">
数据显示区
</div>
</script>
</body>
</html>
2.js脚本部分
<script type="text/javascript">
var xmlHttp = null;
function submit() {
if(window.ActiveXObject){
xmlHttp = new window.ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest){
xmlHttp = new window.XMLHttpRequest();
}
var userName = document.getElementById("username").value;
var psw = document.getElementById("psw").value;
alert(userName);
alert(psw);
xmlHttp.onreadystatechange= dealData;
xmlHttp.open("post","./servlet/first",true);
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlHttp.send("username="+userName+"&psw="+psw);
}
function dealData(){
if(xmlHttp.readyState == 4){
if(xmlHttp.status == 200){
alert("已经进入200");
var datass = xmlHttp.responseText;
document.getElementById("show").innerHTML = datass;
}
else{
alert("错误");
}
}
else{
alert("round");
}
</script>
3.servlet部分
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;
publicclassFirst extendsHttpServlet{
/**
*
*/
privatestaticfinallongserialVersionUID= 1L;
@Override
protectedvoiddoPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException,IOException {
process(req, resp);
}
@Override
protectedvoiddoGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException,IOException {
process(req, resp);
}
protectedvoidprocess(HttpServletRequest req, HttpServletResponse resp)
throws ServletException,IOException {
String userName = req.getParameter("username");
String psw = req.getParameter("psw");
System.out.println("usename:"+userName);
PrintWriter pw = resp.getWriter();
pw.write("username:"+userName+";psw="+psw);
pw.flush();
}
}
2、解释：
XMLHttpRequest对象是ajax异步实现的精髓，XmlHttpRequest使你可使用JavaScript向服务器提出请求并处理响应，而不阻塞用户，使页面不刷新便可实现更新；
2. 由于各公司对其实现不同，主要分微软IE和非微软IE浏览器（尤为是早期的IE5,IE6，IE5 和 IE6 使用 ActiveXObject）
首先，这些对象都是内嵌在浏览器中，属于window所属，因此在获取时应对其进行获取，固然获取时先进行IE版本的判断
Var xmlHttp =null;
<!—进行IE5,ie6的判断--->
If(window.ActiveXObject){//如果该版本，则
XmlHttp = newwindow.ActiveXObject(“Microsoft.XMLHTTP”);
}
Else if(window.XMLHttpRequest){//如果非IE5,IE6版本
xmlHttp = newwindow.XMLHttpRequest();
}
Else{
Alert(“您的浏览器暂不支持ajax技术，请升级”);
}
3. 获取完成，固然是使用了，先设置好所需属性，例：
返回处理的函数（回调函数），以及须要访问的url，传值方式，以及所传值的获取等。
正如上述：
<!—获取所需传到后台的参数-->
Var username = document.getElementById(“username”).value;
Var password = document.getElementById(“psw”).value;
<!—设置回调函数--->
xmlHttp.onreadystatechange = 回调函数（注意：不带括号）;
<!—设置传值方式以及url-->
调用xmlHttp对象去访问地址，或后台内容获取数据
首先，设置get方式传值：
Var url = “./servlet/first?username =”+userName+“&password=”+password;
xmlHttp.open(“get”,url,true);
//发送参数值：固然get方式自己将参数拼接到url后面了，因此此处设置为null便可
xmlHttp.send(null);
设置为POST传值方式：
Var url = “./servlet/first”;
xmlHttp.open(“post”,url,true);
可是还比get方式多了一步操做:设置http数据报文的头部格式:即http报文中得属性，根据须要设置便可
XmlHttp.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”);
Post方式须要经过send(进行传值)，因此须要将属性值放入send()中：
Var value =”username=”+username+”&password=”+password;
xmlHttp.send(value);
4: 编写回调函数：XMLHttpRequest函数返回类型有几种：responseText,responseXML,responseUrl.
下面章节会分类讲解，如今主要演示responseText:以帮助读者理解ajax的整个处理过程
XMLHttpRequest类拥有一个显示XMLHttpRequest对象状态的属性，即：readyState:
When：
XMLHttpRequest.readyState = 0: 表示“XMLHttpRequest”对象的一种未初始化状态，即：已经建立了它的对象，但未进行初始化
XMLHttpRequest.readyState = 1: 表示一种“未发送”状态：即：XMLHttpRequest.open()方法已经调用，但还未发送。而且XMLHttpRequest已经准备好把一个请求发送到服务器
XMLHttpRequest.readyState =2: 表示一种“已发送”状态，即：XMLHttpRequest.send()方法
已经调用，而且已经经过send()方法把一个请求发送到服务器端，可是尚未收到一个响应。
XMLHttpRequest.readyState=3: 表示一种“正在接收，未解析完”的状态，即：浏览器已经接收完目标服务器发来的HTTP报文的相应头部部分，但HTTP报文的消息体部分还未接收加载完
XMLHttpRequest.readyState= 4: 表示一种“已接收而且解析加载完”的状态，可是此时因为服务器会在返回的HTTP响应报文中 添“响应码”以代表请求资源当前的状态，因此这种状况下须要再分类进行解析
单独解析XMLHttpRequest.readyState= 4时的各类状况
根据XMLHttpRequest.status属性进行解析：
When:
XMLHttpRequest.status = 404:说明请求资源不存在
XMLHttpRequest.status = 200：表示已经顺利完成访问服务器后，顺利返回未发生异常
其余响应码表明的含义：请参见http协议
代码书写：
function dealMethod(){
if(xmlHttp.readyState == 4){
if(xmlHttp.status == 200){
var responseData = xmlHttp.responseText；
<!—对前台进行操做 -->
document.getElementById(“show”).innerHTML = responseData;
}
}
}
小弟排版不大好，请见谅哈。