Ajax,异步javascript与xml,是使用客户端脚本与web服务器交互数据的web应用开发方法。俗称-----Ajax异步提交。
异步即相对于同步而言,同步就像是大家军训时走正步一样,大家要整齐划一,统一进行。而异步就是平时大家日常生活自己做自己的事一样,可以毫无关联,当然偶尔打声招呼,说声hello!也是必要的,那就是异步之间的通信了。闲话少说,步入正题。
使用Ajax,其中最主要的就是XMLHttpRequest这个对象。由它封装好客户端的请求信息,提交至服务器。然后带回服务器的返回数据(数据与内容大家区别一下,数据就是某个单纯的值,而内容夹杂了很多修饰信息,如html,css等等)。这还是web的请求响应模式,只是变成异步罢了。下面举几个例子。
一: helloworld
(1)新建ajax.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript">
var xmlrequest;//定义全局异步请求变量
function createxmlRequest() {
if (window.ActiveObject) {
xmlrequest = new ActiveXObject();
} else if (window.XMLHttpRequest) {
xmlrequest = new XMLHttpRequest();
}
}// 创建异步请求对象的函数(由于微软搞特殊所以要判断一下是IE还是其他浏览器)
function sendmessage() {
createxmlRequest();//创建异步对象
var url = "/Ajax/servlet/Test?text=helloworld";
xmlrequest.open("post", url, true);//建立一个请求,准备向服务器发送,true 表示异步发送(准备发送)
xmlrequest.send(null);//发送请求,该函数里的参数表示请求参数一般放到url即可(真正发送)
xmlrequest.onreadystatechange = function() {//onreadystatechange状态变化时的事件控制对象
if (xmlrequest.readyState == 4 && xmlrequest.status == 200) {//readyState 发送请求的状态 4 表示服务器端已经传回所有信息 status服务器回应的HTTP状态码 200表示页面正确
document.getElementById("message").innerHTML = xmlrequest.responseText;
}
}
}(回调函数)
</script>
</head>
<body>
<input type="button" value="提交" οnclick="sendmessage()">
<div id="message"></div>
</body>
</html>
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class Test extends HttpServlet {
private static final long serialVersionUID = 1L;
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
PrintWriter out = response.getWriter();
String t=request.getParameter("text");
out.println(t);
}
}
(3)配置web.xml
(4)完成
二:页面局部更新
(1)新建index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ajax.html</title>
<script type="text/javascript">
var xmlrequest;
function createxmlRequest() {
if (window.ActiveObject) {
xmlrequest = new ActiveXObject();
} else if (window.XMLHttpRequest) {
xmlrequest = new XMLHttpRequest();
}
}
function sendmessage(url) {
createxmlRequest();
xmlrequest.open("post", url, true);
xmlrequest.send(null);
xmlrequest.onreadystatechange = function() {//onreadystatechange状态变化时的事件控制对象
if (xmlrequest.readyState == 4 && xmlrequest.status == 200) {
document.getElementById('message').innerHTML = xmlrequest.responseText;
}
}
}
</script>
</head>
<body>
<div>
<a href="#" οnclick="sendmessage('text.jsp');return false;">word</a>
<a href="#" οnclick="sendmessage('img.jsp');return false;">img</a>
</div>
<br>
<div id="message" align="right"></div>
</body>
</html>
(2)新建 img.jsp ,text.jsp
1.text.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!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=UTF-8">
<title>Insert title here</title>
</head>
<body>
<div align="center"> hello!</div>
</body>
</html>
2.img.jsp
<img alt="" src="images/1top.jpg">//自己修改内容
3.完成