ajax学习篇9
对ajax工作原理：
下面这段是来自一个网友的blog:
Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。要清楚这个过程和原理，我们必须对XMLHttpRequest有所了解。
XMLHttpRequest是ajax的核心机制，它是在IE5中首先引入的，是一种支持异步请求的技术。简单的说，也就是javascript可以及时向服务器提出请求和处理响应，而不阻塞用户。达到无刷新的效果。
所以我们先从XMLHttpRequest讲起，来看看它的工作原理。
首先，我们先来看看XMLHttpRequest这个对象的属性。
它的属性有：
onreadystatechange每次状态改变所触发事件的事件处理程序。
responseText从服务器进程返回数据的字符串形式。
responseXML 从服务器进程返回的DOM兼容的文档数据对象。
status从服务器返回的数字代码，比如常见的404（未找到）和200（已就绪）
status Text伴随状态码的字符串信息
readyState对象状态值
0 (未初始化)对象已建立，但是尚未初始化（尚未调用open方法）
1 (初始化)对象已建立，尚未调用send方法
2 (发送数据) send方法已调用，但是当前的状态及http头未知
3 (数据传送中)已接收部分数据，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误，
4 (完成)数据接收完毕,此时可以通过通过responseXml和responseText获取完整的回应数据
看了上面的一段话我们知道了，ajax的原理。
所以对于ajax开发步骤应该是：
1. 创建对象
2. 打开服务器
3. 发送数据
4. 接受服务器的数据相应。
下面做一个简单例子用get方式的实现和servlet的一个交互：这个是一个index.jsp
<%@ page language="java"import="java.util.*"pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPEHTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<basehref="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<scripttype="text/javascript"src="js/fish.js"></script>
</head>
<body>
<inputid="mybutton"type="button"value="加载数据"/>
</body>
</html>
第二个是fish.js
window.onload = function() {
function createXMLHttpRequest() {
var xmlhttp=null;//请求对象
try {//IE浏览器中创建此对象
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {//IE浏览器中创建此对象
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
try {
// Firefox, Chrome, Opera, Safari浏览器中创建此对象
xmlhttp = new XMLHttpRequest();
if (xmlhttp.overrideMimeType) {
xmlhttp.overrideMimeType("text/xml");
}
} catch (e) { alert("浏览器不支持xmlHttpRequest!");}
}
}
return xmlhttp;
}
document.getElementById("mybutton").onclick =function() {
//得到xmlhttprequest对象
var xmlreq=createXMLHttpRequest();
xmlreq.onreadystatechange=function(){//每次状态改变都会调用这个函数
alert(xmlreq.readyState);
alert(xmlreq.status);//如果返回200就说明请求成功了。
}
//打开与服务器的连接
xmlreq.open("get","servlet/MyServlet",true);//在第二个参数后可以跟着一些数据的。
//发送数据
xmlreq.send(null);//如果是get方式那么必须是null
}
}
3servlet代码
package com.fish;
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;
publicclassMyServlet extends HttpServlet {
publicvoid doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
PrintWriter out = response.getWriter();
System.out.println("**************");
// String a= request.getParameter("fish");
// System.out.println(a);
//
}
}
5. 这个是servlet在xml的配置
<?xmlversion="1.0"encoding="UTF-8"?>
<web-appversion="2.5"
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
<display-name></display-name>
<servlet>
<servlet-name>MyServlet</servlet-name>
<servlet-class>com.fish.MyServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>MyServlet</servlet-name>
<url-pattern>/servlet/MyServlet</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>