Java基础之《Ajax+JQuery（JavaEE开发进阶Ⅱ）》—Ajax

csj50

已于 2022-09-26 15:20:14 修改

阅读量359

点赞数

分类专栏：前端基础文章标签： ajax java jquery

于 2020-02-25 10:58:34 首次发布

本文链接：https://blog.csdn.net/csj50/article/details/104492508

版权

前端基础专栏收录该内容

55 篇文章 0 订阅

订阅专栏

一、认识Ajax
1、Ajax概念
Ajax全称为“Asynchronous JavaScript and XML”（异步JavaScript和XML）
Ajax并不是一门新的语言或技术，它实际上是几项技术按一定的方式组合在一起，在共同的协作中发挥各自的作用
2、Ajax所使用的技术包括
使用XHTML和CSS标准化呈现
HTML标签描述网页的结构，CSS对结构进行定位、修饰
使用DOM实现动态显示和交互
把服务器端传过来的数据，通过DOM放到指定的元素当中显示
使用XML和XSLT进行数据交换与处理
交互的格式还可以是json
使用XMLHttpRequest进行异步数据读取
使用JavaScript绑定和处理所有数据

2、使用Ajax
不需要安装插件支持
通过适当的AJAX应用达到更好的用户体验
不刷新整个页面达到数据刷新
减轻服务器和贷款的负担
工作原理是在用户和服务器端加了一个中间层，我们称为ajax引擎

3、什么是异步交互
Ajax的异步交互使得页面能够同时处理多件事物，它的出现，揭开了无刷新更新页面的新时代
同步请求

异步请求

1）浏览器请求ajax引擎
2）ajax引擎自己处理
3）或者ajax引擎代理向服务器端请求
4）此时浏览器可以做自己的事情，数据异步返回
5）ajax引擎使用dom对页面做局部更新

4、Ajax工作原理
Ajax的工作原理相当于在用户和服务器之间加了一个中间层，使用户操作与服务器响应异步化

传统模式：是返回整个网页
ajax模式：表单验证交给ajax引擎来处理

二、XMLHttpRequest对象实现异步交互
1、XMLHttpRequest对象
Ajax的一个最大特点是无需刷新页面便可向服务器传输或读写数据，这一点得益于XMLHTTP组件XMLHttpRequest
XMLHttpRequest就是实现异步交互的核心对象
2、如何创建XMLHttpRequest对象
IE7.0以下是以ActiveXObject的方式引入XMLHttpRequest对象的，创建方式如下：
//IE5.0, IE6.0
xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
其他浏览器比如IE7.0+、firefox、chrome等都支持原生的XMLHttpRequest对象，创建方式如下：
xmlHttpReq = new XMLHttpRequest();
兼容的写法
var xmlHttp; //声明一个保存XMLHttpRequest的变量
function createXHR() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); //IE5.0, IE6.0
} else {
xmlHttp = new XMLHttpRequest(); //IE7.0+以及其他浏览器
}
}
3、创建好XHR对象后准备启动一个请求
xhr.open(method, url, asynchronous);
method参数：设置请求类型，主要有get和post请求
url参数：请求地址，可以是相对地址，也可以是绝对地址
asynchronous参数：默认true为异步，false为同步
4、设置请求头信息
不同的浏览器实际发送的头部信息会有所不同，但一些基本的请求头都会发送的，比如：Accept，Accept-Charset等，我们也可以设置自定义头信息发送给服务器端，方法如下：
xhr.setRequestHeader(key, value); //可以设置多个头信息
5、发送GET请求
GET请求直接将输入的数据放入到异步请求的URL地址中，而send方法不发送任何数据。发送示例如下：
var querystr = "name=jack&age=30";
var url = "login.jsp?" + querystr + "&stamptime=" + new Date().getTime();
xhr.open("GET", url); //准备请求方式
xhr.send(null); //发送请求
6、发送POST请求
如果是POST请求则将数据统一放在send()方法中发送，请求地址没有任何信息（通过请求实体发送，而不是请求地址）
必须设置请求头信息来设置以表单的形式来提交内容信息
var querystr = "name=jack&age=30";
var url = "login.jsp?" + "stamptime=" + new Date().getTime();
xhr.open("POST", url); //准备请求方式
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send(querystr); //发送请求
提示：GET和POST都可以发送异步请求，一般数据不多时采用GET请求，数据量大时采用POST请求
7、注册回调事件处理函数
当XMLHttpRequest对象的readyState属性值被改变时，会激发一个readystatchange事件，我们可以使用onreadystatechange属性来注册该回调事件处理函数
xhr.onreadystatechange = RequestCallBack; //设置回调函数
readyState属性值如下：
0：未初始化。尚未调用open()方法
1：启动。已经调用open()方法
2：发送。已经调用send()方法，但尚未接收到响应
3：接受。已经接收到部分数据，服务器端已响应，只是还没有完全响应完毕
4：完成。已经接收到全部响应数据，而且已经可以在客户端使用了
提示：只要readyState属性值改变一次，都会触发一次readystatechange事件。通常我们只对readyState值为4的阶段感兴趣，因为这个时候所有的数据都已经就绪
8、处理服务端响应的内容
在收到服务器端响应后，响应的数据会自动填充到XHR对象的属性中，常用的属性如下：
responseText：作为响应主体被返回的文本
responseXML：如果服务端响应的内容类型是“text/xml”或“application/xml”那就返回包含的XML内容，否则返回null
status：响应HTTP状态，200代表响应成功
statusText：HTTP状态说明
9、请求的完整过程

提示：当请求完成加载（readyState值为4）并且响应已经成功（status值为200）时，就可以处理服务端的返回结果了

三、例子程序
1、建立一个Dynamic Web Project项目

2、建立index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<script type="text/javascript">
	var xmlHttp;
	function createXmlHttpRequest() {
		if (window.ActiveXObject) {
			xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); //IE5.0, IE6.0
		} else {
			xmlHttp = new XMLHttpRequest(); //IE7.0+以及其他浏览器
		}
	}

	function createQueryString() {
		var userName = document.getElementById("userName").value;
		var userBirth = document.getElementById("userBirth").value;
		var queryString = "userName=" + userName + "&" + "userBirth="
				+ userBirth;
		return queryString;
	}

	/*
	回调函数
	当readyState属性发生改变的时候就会激活此函数来执行
	 */
	function handleStateChange() {
		if (xmlHttp.readyState == 4) {
			if (xmlHttp.status == 200) {
				var content = xmlHttp.responseText;
				document.getElementById("content").innerHTML = content;
			}
		}
	}

	function startGet() {
		createXmlHttpRequest();
		var url = "request.jsp?timestamp=" + new Date().getTime(); //发送get请求防止缓存
		xmlHttp.open("get", url + "&" + createQueryString());
		xmlHttp.send(null);
		xmlHttp.onreadystatechange = handleStateChange; //注册回调函数
	}

	function startPost() {
		createXmlHttpRequest();
		var url = "request.jsp?timestamp=" + new Date().getTime(); //发送post请求防止缓存
		xmlHttp.open("post", url);
		xmlHttp.setRequestHeader("Content-Type",
				"application/x-www-form-urlencoded");
		xmlHttp.send(createQueryString());
		xmlHttp.onreadystatechange = handleStateChange;
	}

	//网页加载完毕后立刻执行的操作
	window.onload = function() {
		document.getElementById("btnGet").onclick = startGet;
		document.getElementById("btnPost").onclick = startPost;
	}
</script>

</head>
<body>
	<h2>please input your name and birth</h2>
	<input type="text" name="userName" id="userName" />
	<br />
	<input type="text" name="userBirth" id="userBirth" />
	<br />
	<input type="button" name="btnGet" id="btnGet" value="get" />
	<br />
	<input type="button" name="btnPost" id="btnPost" value="post" />
	<br />
	<!-- 把服务器数据通过dom放到div标签，局部刷新显示 -->
	<div id="content"></div>
</body>
</html>

3、建立request.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%
	String userName = request.getParameter("userName");
	String userBirth = request.getParameter("userBirth");
	
	if (request.getMethod().equals("GET")) {
		out.println("Get:"+userName+", your birth is:"+userBirth);
	} else {
		out.println("Post:"+userName+", your birth is:"+userBirth);
	}
	
%>