Ajax(Asynchronous Javascript And Xml):异步交互的 Javascript和XML
异步交互和同步交互:
>同步交互则是当发送一个请求时,需要等待服务器响应结束以后才能继续发送一个请求。
(当点击页面中的某个事件时会整个页面都刷新)
>异步交互则是发送一个请求时,无需等待服务器响应就可以继续发送另一个请求。
(使用Javascript语言与服务器进行异步交互,传输的数据为XML)
和服务器异步交互,浏览器页面局部刷新
Ajax发送异步请求:
>得到XMLHttpRequest
创建XMLHttpRequest
function createXMLHttpRequest(){
try{
return new XMLHttpRequest();
}catch(e){
try{
return new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
return new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
throw e
}
}
}
}
>打开与服务器的连接
xmlHttp.open():打开和服务器的连接,并且需要三个参数
请求方式:GET /POST
请求的URL:指定服务器端资源
请求是否为异步:如果为ture则发送异步请求
>发送请求
xmlHttp.send(null):如果不写null则可能会造成部分浏览器不发送请求。
send中的参数是请求体内容,GET请求中没有请求体,因此传入null;
>在xmlHttp对象的一个事件上注册监听器:onreadystatechange
xmlHttp对象中总共有五个状态:
0:创建xmlHttpRequest对象,但并未连接(open)
1:连接,但未发送请求(send)
2: 调用send结束
3:服务器已经响应,但并不代表结束
4:服务器响应结束
得到xmlHttp对象的状态:var state = xmlHttp.readyState;
得到服务器响应的状态码: var status = xmlHttp.status;
得到服务器响应的内容
>var content = xmlHttp.responseText;//得到服务器的响应的文本格式的内容
>var content = xmlHttp.responseXML;//得到服务器的响应的xml响应的内容,也就是Document对象
一 发送GET请求示例
package cn.itcast.web.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 Aservlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
System.out.println("Hello AJAX!");
response.getWriter().print("Hello AJAX!");
}
}
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP 'ajax1.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript">
function createXMLHttpRequest(){
// 适用于大多数浏览器,以及IE7和IE更高版本
try{
return new XMLHttpRequest();
} catch (e) {
// 适用于IE6
try {
return new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
// 适用于IE5.5,以及IE更早版本
try{
return new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
throw e;
}
}
}
}
window.onload = function(){//文档加载完毕后执行
var btn = document.getElementById("btn");
btn.onclick = function(){//给按钮的点击事件注册监听
/*
ajax的四步操作,得到服务器的响应
将相应结果显示到h1元素中
*/
var xmlHttp = createXMLHttpRequest();
xmlHttp.open("GET","<c:url value='/Aservlet'/>",true);
xmlHttp.send(null);
xmlHttp.onreadystatechange = function(){//当xmlHttp的状态发生变化时执行
if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
//获取服务器响应结果
var text = xmlHttp.responseText;
var h1 = document.getElementById("h1");
h1.innerHTML = text;
}
};
};
};
</script>
</head>
<body>
<button id="btn">点击这里</button>
<h1 id="h1"></h1>
</body>
</html>
二 发送POST请求示例
>xmlHttp.open()中需要改为参数POST
>设置ContentType:xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
>发送请求时指定请求体:xmlHttp.send();
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
System.out.println(request.getParameter("b"));
System.out.println("Hello AJAX!");
response.getWriter().print("Hello AJAX!");
}
<script type="text/javascript">
function createXMLHttpRequest() {
try {
return new XMLHttpRequest();//大多数浏览器
} catch (e) {
try {
return new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
return new ActiveXObject("Microsoft.XMLHTTP");
}
}
}
function send() {
var xmlHttp = createXMLHttpRequest();
xmlHttp.onreadystatechange = function() {
if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
var div = document.getElementById("div1");
div.innerHTML = xmlHttp.responseText;
}
};
xmlHttp.open("POST", "/ajaxdemo1/AServlet?a=A", true);
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlHttp.send("b=B");
}
</script>
<h1>AJAX2</h1>
<button onclick="send()">测试</button>
<div id="div1"></div>
❤示例:省市联动