ajax
1.ajax简介
asynchronous javascript and xml :异步的js和xml
它能使用js访问服务器，而且是异步访问。
服务器端给客户端的响应一般是整个页面，一个html完整页面。
但在ajax中因为是局部刷新，那么服务器就不用了再响应整个页面，而只是数据。
响应可以是text纯文本，也可以是xml，也可以是json
json是js提供的数据交互格式。
异步交互和同步交互：
同步：发送一个请求，就要等待服务器的响应结束，才能发送第二个请求，刷新的是整个页面。
异步：发送一个请求，无需等待服务器的响应，就可以发送第二个请求。
可以使用js接收服务器的响应，然后使用Js来局部刷新。
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript">
window.onload = function() {
//得到btn元素
var btn = document.getElementById("btn");
btn.onclick = function(){
//获取h1元素对应的DOM对象
var h1 = document.getElementById("h1");
h1.innerHTML = "Hello JS!!!"
};
}
</script>
</head>
<body>
<button id = "btn">点击这里</button>
<h1 id= "h1"> </h1>
</body>
</html>2.ajax的应用场景
百度的搜索框，输入内容时，出现的一些提示的其他类似内容
在注册账户输入用户名时，把光标移到其他表单项上时，浏览器会使用Ajax技术向服务器发送请求，服务器会查询名为zhangsan的用户是否存在，最终服务器返回true表明名为zhangsan的用户已经存在了，浏览器在得到结果后显示“用户名已经注册”。
ajax的优缺点：
优点：
异步交互：增强了用户体验
性能：因为服务器无需在响应整个页面，只需要响应部分内容，所以服务器的压力减轻了。
缺点：
ajax不能应用在所有场景，无端的增多了对服务器的访问次数，给服务器带来加压力。
3.ajax发送异步请求
1.第一步(得到XMLHttpRequest)
ajax其实只需要学习一个对象：XMLHttpRequest
得到XMLHttpRequest，大多数浏览器都支持：
var xmlHttp = new XMLHttpRuquest(); IE6.0
var xmlHttp = new ActiveXObject("Msxml12.XMLHTTP");IE5.5更早版本
var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP")；编写创建XMLHttpRequest对象的函数
function createXMLHttpRequest() {
try {
return new XMLHttpRequest() ;
} catch (e){
try{
return ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
return ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
alert("你用的浏览器我实在没办法搞");
throw e;
}
}
}
}2.打开与服务器的链接
xmlHttp.open():用来打开与服务器的连接，它需要三个参数：
请求方式，可以是GET或POST
请求URL，指定服务器端资源/test1/AServlet
请求是否为异步，如果为true表示发送异步请求，否则同步请求
xmlHttp.open("GET","/test1/AServlet",true);
- 发送请求
xmlHttp.send(null):如果不给可能会造成部分浏览器无法发送。
- 第四步得到响应
在xmlHttp对象的一个事件上注册监听器：onreadystatechange
xmlHttp对象一共有五个状态：
0：刚创建，还为调用open方法
1：请求已经开始，已经调用了open方法，还没有调用send()方法
2：调用完了send()方法
3：服务器已经开始响应，但不表示响应结束了
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响应的内容
xmlHttp.onreadystatechange = function() {
if(xmlHttp.readyState == 4 && xmlHttp.status == 200){ //双重判断：判断是否为4状态，而且判断是否为200
//获取服务器的响应内容
var text = xmlHttp.responseText;
}
}4.用ajax发送Hello
servlet
package com.forcoldplay.servlet;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class ZServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
public ZServlet() {
super();
// TODO Auto-generated constructor stub
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
//response.getWriter().append("Served at: ").append(request.getContextPath());
System.out.println("Hello AJAX!");
response.getWriter().print("Hello ajax");
}
}
jsp
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ajax</title>
<script type="text/javascript">
//创建异步对象
function createXMLHttpRequest() {
try {
return new XMLHttpRequest() ;
} catch (e){
try{
return ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
return ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
alert("你用的浏览器我实在没办法搞");
throw e;
}
}
}
}
window.onload = function() { //文档加载完毕后执行
//得到btn
var btn = document.getElementById("btn");
//给按钮的点击事件注册监听
btn.onclick = function(){
//1得到异步对象
var xmlHttp = createXMLHttpRequest();
//打开与服务器的链接
//指定请求方式
//指定请求的URL
//指定是否为异步请求
xmlHttp.open("GET","/test1/ZServlet",true);
//发送请求,GET请求没有请求体，但也要给出null,不然有可能不发送
xmlHttp.send(null);
//给异步对象的onreadstatechange时间注册监听器
xmlHttp.onreadystatechange = function() {
alert(xmlHttp.readyState);
alert(xmlHttp.status);
if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
//获取服务器的响应结果
var text = xmlHttp.responseText;
//获取h1元素
var h1 = document.getElementById("h1");
h1.innerHTML = text ;
}
};
};
};
</script>
</head>
<body>
<button id = "btn">点击这里</button>
<h1 id= "h1"> </h1>
</body>
</html>