(一)ajax的运行原理
页面发起数据请求,浏览器会将请求发送给ajax引擎,让ajax引擎去向服务器请求数据,当服务器响应后将数据返回给ajax引擎,然后ajax引擎会触发响应的函数,在服务器响应请求返回数据的过程中,客户端可以执行任何操作,而不用等待,ajax相当于一个秘书,代替你去办你想办的事情,在此期间,你可以做自己的事情。
(二)同步和异步
(1)同步:客户端向服务器端请求数据,在服务器端响应返回数据之前,客户端处于等待卡死状态,不可进行其他操作,
前面学习的同步锁也有类似,有一种串行的意思。
(2)异步:客户端向服务器端发送请求,在服务器端响应返回数据之前,客户端可以进行其他的操作,可以随意做其他的事情而不会被卡死。
(三)Demo
(1)ajax.html页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function fn1(){
//所有操作都由ajax引擎来完成
//创建ajax引擎对象---所有操作都是通过引擎对象
var xmlHttp = new XMLHttpRequest();
//绑定监听,监听服务器是否已经返回数据,
xmlHttp.onreadystatechange = function(){
//接收数据
//引擎的状态有很多种,需要判断
/*
onreadystatechange 事件被触发 5 次(0 - 4),对应着 readyState 的每个变化
存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成,且响应已就绪
若不进行判断,alert(res)语句会多次打印空值
当 readyState 等于 4 且状态为 200 时,表示响应已就绪:
*/
if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
var res = xmlHttp.responseText;
alert(res);
}
}
//绑定地址
xmlHttp.open("GET","/AjaxDemo/ajaxServlet",true);
//参数一:请求方式,参数二:绑定地址,参数三:是否异步
//发送请求
xmlHttp.send();
//接受响应数据
}
</script>
</head>
<body>
<input type="button" value="异步访问" onclick = "fn1()">
</body>
</html>
(2)web.xml配置文件,可以在创建Servlet时进行路径映射书写,就不用后续的手动书写配置
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5">
<display-name>AjaxDemo</display-name>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
<welcome-file>index.htm</welcome-file>
<welcome-file>index.jsp</welcome-file>
<welcome-file>default.html</welcome-file>
<welcome-file>default.htm</welcome-file>
<welcome-file>default.jsp</welcome-file>
</welcome-file-list>
<servlet>
<description></description>
<display-name>AjaxServlet</display-name>
<servlet-name>AjaxServlet</servlet-name>
<servlet-class>com.shu.hj.AjaxServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>AjaxServlet</servlet-name>
<url-pattern>/ajaxServlet</url-pattern>
</servlet-mapping>
</web-app>
(3)AjaxServlet
package com.shu.hj;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* Servlet implementation class AjaxServlet
*/
public class AjaxServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//response.getWriter().append("Served at: ").append(request.getContextPath());
//ajax引擎访问我,我就将数据返回给ajax,书写一个简单的打印语句
response.getWriter().write("hong jie");
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}
(4)结果
(1)若不进行响应状态的判断,浏览器会打印3次空值,再打印两次语句
(2)若进行ajax引擎状态的判断,在输出时就不会打印空值
一个小demo 完成。