目录
1、Ajax简介、异步与同步
- asynchronous javascript and xml ：异步的js和xml，能使用js访问服务器，并且是异步访问；
- 服务器给客户端的响应一般是整个页面：一个html完整页面，但在ajax中因为是局部刷新，那么服务器就不再响应整个页面，而只是数据
返回的数据可以是text纯文本和xml和json
- 异步交互和同步交互
同步：发一个请求，就要等待服务器的响应结束，然后才能发第二个请求，刷新的是整个页面；
异步：发一个请求后，无须等待服务器的响应，就可以发第二个请求，可以使用js接收服务器的响应，然后使用js来局部刷新；
- 局部刷新
<head>
<script type="text/javascript">
window.onload = function(){//在文档加载完成后马上执行，实际为监听器
//得到btn元素
var btn = docunment.getElementById("btn");
//给btn的click事件注册监听
btn.onclock = function(){//在按钮被点击时执行
//获取h1元素对应的DOM对象
var h1 = document,getElementById("h1");
// 给h1添加内容
h1.innerHTML = "Hello JS!!!";
}
};
</script>
</head>
<body>
<button id="btn">点击这里</button>
<h1 id='h1'></h1>
</body>
2、Ajax的应用场景和优缺点
- 搜索框的联想下拉列表
- 注册页面检测
- Ajax优缺点：
优点：
1、异步交互，增强了用户体验；
2、性能：因为服务器无需再响应整个页面，只需响应部分内容，服务器压力减轻了；
缺点：
1、不能应用在所有场景；
2、增加了服务器响应次数。
3、Ajax发送异步请求（四步操作）
第一步，得到XMLHttpRequest
- ajax只需要学习一个对象：XMLHttpRequest
- 得到XMLHttpRequest
//大多数浏览器都支持：
var xmlHttp = new XMLHttpRequest();
//IE6.0
var xmlHttp = new ActiveXObject("Msxml12.XMLHTTP");
//IE5.5及更早版本的IE
var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
- 编写创建XMLHttpRequest对象的函数
function createXMLHttpRequest() {
try{
return new XMLHttpRequest();
} catch(e) {
try {
return new ActiveXObject("Msxml12.XMLHTTP");
} catch(e) {
try {
return new ActiveXObject("Microsoft.XMLHTTP");
} catch(e) {
alert("创建XMLHttpRequest对象失败");
throw e;
}
}
}
}
第二步、打开与服务器的连接
- xmlHttp.open()用来打开与服务器的连接，需要三个参数：
请求的方式：可以是GET或POST
请求的URL：指定服务器端资源
请求是否为异步，如果为true表示发送异步请求，否则同步请求。
eg. xmlHttp.open(“GET”,“资源URL”,true);
第三步、发送请求
- xmlHttp.send(null); 如果不给参数可能造成部分浏览器无法发送。
参数：就是请求体内容
如果是GET请求，必须给出null
PSOT请求，xmlHttp.send(“username=zhangsan&password=123”);
第四步、响应请求
- 在xmlHttp对象的一个事件上注册监听器：onreadystatechange
xmlHttp对象一共有五个状态：
0状态：初始化，没有调用open()方法；
1状态：请求开始，调用了open()方法，但还没有调用send()方法；
2状态：调用完了send()方法；
3状态：服务器已经开始响应，但不表示响应结束了；
4状态：服务器响应结束。
通常只关注4状态。
- 得到xmlHttp对象的状态：
var state = xmlHttp.readyState;//可能是0、1、2、3、4
- 得到服务器响应的状态码
var status = xmlHttp.status; //例如200、404、500
- 得到服务器响应的内容
var content = xmlHttp.responseText;//得到服务器的响应的文本格式的内容
var content = xmlHttp.responseXML;//得到服务器的响应的xml格式的内容，它是Document对象了
- 示例
xmlHttp.onreadystatechange = function() {//xmlHttp的5种状态都会调用本方法
if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {//双重判断：判断是否为4状态，而且还要判断是否为200
//获取服务器的响应内容
var text = xmlHttp.responseText;
}
}
Ajax第一例：helloworld
- Servlet
import java.io.IOException;
public class AServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throw ServletException, IOException{
System.out.println("Hello Ajax!");
response.getWriter().print("Hello Ajax!!!");
}
}
- ajax.jsp
<head>
<script type="text/javascript">
//创建异步对象
function createXMLHttpRequest() {
try{
return new XMLHttpRequest();//大多数浏览器
} catch(e) {
try {
return new ActiveXObject("Msxml12.XMLHTTP");//IE6.0
} catch(e) {
try {
return new ActiveXObject("Microsoft.XMLHTTP");//IE5.5及更早版本
} catch(e) {
alert("创建XMLHttpRequest对象失败");
throw e;
}
}
}
}
window.onload = function(){//在文档加载完成后马上执行，实际为监听器
//得到btn元素
var btn = docunment.getElementById("btn");
//给btn的click事件注册监听
btn.onclock = function(){//给按钮的点击事件注册监听，在按钮被点击时执行
/*
ajax四步操作，得到服务器响应，把响应结果显示到h1元素中
*/
// 1、得到异步对象
var xmlHttp = createXMLHttpRequest();
/* 2、打开与服务器的连接
* 指定请求方式
* 指定请求的url
* 指定是否为异步请求
*/
xmlHttp.open("GET","<c:url value='/AServlet/'>",true);
// 3、发送请求
xmlHttp.send(null);//GET请求没有请求体，但也要给出null
// 4、给异步对象的onreadystatechange事件注册监听器
xmlHttp.onreadtstatechange = function() {//当xmlHttp的状态发生变化时执行
//双重判断：xmlHttp的状态为4，以及服务器响应的状态码为200
if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
//获取服务器的响应内容
var text = xmlHttp.responseText;
//获取h1元素对应的DOM对象
var h1 = document,getElementById("h1");
// 给h1添加内容
h1.innerHTML = text;
}
}
}
};
</script>
</head>
<body>
<button id="btn">点击这里</button>
<h1 id='h1'></h1>
</body>
Ajax第二例：发送POST请求
Ajax第三例：用户名是否已被注册
Ajax第四例：响应内容为xml
Ajax第五例：省市联动
4、XStream（可把JavaBean转换成XML的小工具）
5、JSON的概述
6、json-lib的应用
7、打包ajax生成小工具
