AJAX简介
异步刷新技术：
a:Asynchronous(异步)；
j:JavaScript；
A:And；
X:Xml；
实现原理
1、用户界面向Ajax引擎发送请求；
2、Ajax引擎通过XMLHttpRequest对象发送HTTP请求给服务器；
3、服务器处理请求之后封装成JSON数据格式返回给Ajax引擎；
4、通过DOM和CSS修改页面元素，改变样式，实现局部刷新。
实现步骤
1、编写Servlet
2、jsp页面利用JavaScript编写AJAX
<%@ 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>
<script type="text/javascript">
function getdata() {
//1、创建ajax对象
var oAjax = new XMLHttpRequest();
//2、设置服务器的地址和资源
oAjax.open("GET", "${pageContext.request.contextPath}/test/ajax",true);
//3、发送请求
oAjax.send();
//4、接收响应消息(当ajax对象的状态发生改变的时候，执行下面的方法)
oAjax.onreadystatechange = function(){
if(oAjax.readyState == 4){//表示响应的消息已经接收和解析完毕
if(oAjax.status == 200){//http状态码
//获取响应内容
var message = oAjax.responseText;
console.log(message);
document.getElementById("msg").innerHTML = "响应内容为：" + message;
}else{
//请求失败
document.getElementById("msg").innerHTML = "响应内容为：" + oAjax.status;
}
}
}
}
</script>
</head>
<body>
<p>需求：通过ajax技术从服务器上获取一个字符串，然后将次字符串显示在页面的指定位置</p>
<input type="button" id="btn" value="获取" onclick="getdata()">
<div id="msg">
在这显示数据：
</div>
</body>
</html>
3、完成异步刷新
总结
我自己的理解来说就是这个技术类似于一个监听器，当页面上的某些元素发生改变时，浏览器会向后台发送请求，然后经过一系列的操作之后完成异步刷新。这只是我个人的理解，仅供参考。
346
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
