目录
一、简介:
- Asynchronous JavaScript And XML(异步的 JavaScript 和 XML )
- Ajax 可在不刷新页面的前提下,进行页面局部更新。
- Ajax 不是新技术。
- Ajax 不是W3C的标准(是民间厂商提供的技术)。
二、Ajax 的使用流程:
- 创建 XMLHttpRequest对象。
- 通过XMLHttpRequest对象发送 Ajax 请求。
- 通过JavaScript 处理服务器响应。
1.创建 XMLHttpRequest对象:
- XMLHttpRequest 用于在后台与服务器交换数据,是 Ajax 的核心。
- 注意XMLHttpRequest并不是W3C的标准,不同浏览器的创建方式不同。
var xmlhttp;
if(window.XMLHttpRequest){
//可能是IE7+ 、Firefox、Chome、Opera、Safari等浏览器之一
xmlhttp = new XMLHttpRequest();
}else{
//可能是IE5、IE6等浏览器之一
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
2.发送 Ajax 请求:
- xmlhttp.open() 用于创建请求。
- xmlhttp.send() 用于发送请求。
//创建请求
xmlhttp.open("Get","http://localhost/test?name=admin",true); //参数1是请求方式 参数2是请求地址 参数3是同步还是异步(true是异步,false是同步)
//发送到服务器
xmlhttp.send();
3.处理服务器响应:
- xmlhttp.onreadystatechange() 事件用于监听Ajax的执行过程。
- xmlhttp.readyState 属性说明 XMLHttpRequest 当前状态。
readyState值 | 说明 |
readyState = 0 | 请求未初始化 |
readyState = 1 | 服务器连接已建立 |
readyState = 2 | 请求已被接收 |
readyState = 3 | 请求正在处理 |
readyState = 4(常用) | 响应文本已被接收 |
- xmlhttp.statue 属性表示服务器响应码(200:成功,404:未找到...)
xmlhttp.onreadystatechange=function(){
//响应已被接收且服务器处理成功才执行
if(xmlhttp.readyState==4&&xmlhttpstatus==200){
//获取响应体的文本
var responseText=xmlhttp.responseText;
//对服务器结果进行处理
...
}
}
例:
ContentServlet.java:
package com.ajax.servlet;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* Servlet implementation class ContentServlet
*/
@WebServlet("/content")
public class ContentServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public ContentServlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse
* response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.getWriter().println("<b style='color:red'>I'm Isebal!</b>");
}
}
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<input id="btnload" type="button" value="加载">
<div id="divContent"></div>
<script type="text/javascript">
document.getElementById("btnload").onclick = function() {
//1.创建XmlHttpRequest对象
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
console.log(xmlhttp);
//2.发送Ajax请求
xmlhttp.open("GET", "/Ajax/content", true);
xmlhttp.send();
//3.处理服务器响应
xmlhttp.onreadystatechange = function() {
//响应已被接收且服务器处理成功才执行
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
//获取响应体的文本
var x = xmlhttp.responseText;
//对服务器结果进行处理
alert(x);
document.getElementById("divContent").innerHTML = x; //innerHTML还会将HTML进行解释
}
}
}
</script>
</body>
</html>
注意若通过Ajax 进行前后端通信,Ajax发送请求时,Servlet中不再进行任何页面的跳转,而是直接提供用户需要的数据,数据通常用JSON格式。
三、利用Ajax实现新闻列表:
例:
News.java:
package com.ajax.servlet;
public class News {
private String title;
private String date;
private String source;
private String content;
public News(String title, String date, String source, String content) {
super();
this.title = title;
this.date = date;
this.source = source;
this.content = content;
}
public News() {
super();
}
public String getTitle() {
return title;
}
public void setTitle(String title) {
this.title = title;
}
public String getDate() {
return date;
}
public void setDate(String date) {
this.date = date;
}
public String getSource() {
return source;
}
public void setSource(String source) {
this.source = source;
}
public String getContent() {
return content;
}
public void setContent(String content) {
this.content = content;
}
}
NewsListServlet.java:
package com.ajax.servlet;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.alibaba.fastjson.JSON;
/**
* Servlet implementation class NewsListServlet
*/
@WebServlet("/newslist")
public class NewsListServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public NewsListServlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
List< News> list=new ArrayList<News>();
list.add(new News("第20金!卢云秀女子帆板RS:X级金牌", "2021-7-31", "百度新闻", "..."));
list.add(new News("东京奥运会第7个比赛日 中国代表团斩获4金3银2铜", "2021-7-31", "央视网", "..."));
list.add(new News("中国女排提前出局 创奥运最差战绩", "2021-7-31", "网易新闻", "..."));
list.add(new News("中国女篮战胜澳大利亚 提前晋级八强", "2021-7-31", "新浪新闻", "..."));
String json=JSON.toJSONString(list);
System.out.println(json);
response.setContentType("text/html;charset=UTF-8");
response.getWriter().println(json);
}
}
news.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<div id="container"></div>
<script>
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//2.发送Ajax请求
xmlhttp.open("GET", "/Ajax/newslist", true);
xmlhttp.send();
//3.处理服务器响应
xmlhttp.onreadystatechange = function() {
//响应已被接收且服务器处理成功才执行
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
//获取响应体的文本
var text = xmlhttp.responseText;
console.log(text);
var json = JSON.parse(text); //注意此JSON是JavaScript的内置对象
console.log(json);
var html = "";
for (var i = 0; i < json.length; i++) {
var news = json[i];
html = html + "<h1>" + news.title + "</h1>";
html = html + "<h2>" + news.date + " " + news.source
+ "</h2>";
html = html + "<hr>";
}
document.getElementById("container").innerHTML = html;
}
}
</script>
</body>
</html>
2点注意:
①在Servlet处理时,对原始数据(无论是使用list、set还是HashMap等),对外进行字符串序列化时,一律将其转换成JSON,这样能使数据得到有效描述。
②在客户端Web页面,通过Ajax方式将传递的字符串转换成JSON对象(此JSON是JavaScript的内置对象),再在当前页面中循环输出即可。
四、Ajax的同步和异步:
- 同步和异步决定了在发送数据时,程序是否继续向下执行。
- 同步:在数据发送过程中,代码不动,只有得到了结果,程序才会继续向下执行。
- 异步:在数据发送过程中,不会代码阻塞,程序继续向下执行。数据返回时是通过触发onreadystatechange事件来进行结果的获取和处理。
- true 代表异步执行,false 代表同步执行。
- Ajax默认是true。
五、jQuery对Ajax的支持:
- jQuery对Ajax进行封装,提供了 $.ajax() 方法。
- 语法:$.ajax( JSON对象 )
常用设置项 | 说明 |
url | 发送请求地址 |
type | 请求类型( get 或 post ) |
data | 向服务器传递的参数 |
dataType | 服务器响应的数据类型(text、json、xml、html、jsonp、script(解决跨域传输问题)) |
success | 接收响应时的处理函数 |
error | 请求失败时的处理函数 |
例:
NewsListServlet.java:
package com.ajax.servlet;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.alibaba.fastjson.JSON;
/**
* Servlet implementation class NewsListServlet
*/
@WebServlet("/newslist")
public class NewsListServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public NewsListServlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse
* response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String type = request.getParameter("t");
List<News> list = new ArrayList<News>();
if (type != null && type.equals("new")) {
list.add(new News("NEW:第20金!卢云秀女子帆板RS:X级金牌", "2021-7-31", "new", "..."));
list.add(new News("NEW:东京奥运会第7个比赛日 中国代表团斩获4金3银2铜", "2021-7-31", "new", "..."));
list.add(new News("NEW:中国女排提前出局 创奥运最差战绩", "2021-7-31", "new", "..."));
list.add(new News("NEW:中国女篮战胜澳大利亚 提前晋级八强", "2021-7-31", "new", "..."));
} else if (type == null || type.equals("111")) {
list.add(new News("第20金!卢云秀女子帆板RS:X级金牌", "2021-7-31", "百度新闻", "..."));
list.add(new News("东京奥运会第7个比赛日 中国代表团斩获4金3银2铜", "2021-7-31", "央视网", "..."));
list.add(new News("中国女排提前出局 创奥运最差战绩", "2021-7-31", "网易新闻", "..."));
list.add(new News("中国女篮战胜澳大利亚 提前晋级八强", "2021-7-31", "新浪新闻", "..."));
}
String json = JSON.toJSONString(list);
System.out.println(json);
response.setContentType("text/html;charset=UTF-8");
response.getWriter().println(json);
}
}
jQuery_news.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
<script type="text/javascript">
$(function() {
$.ajax({
"url" : "/Ajax/newslist",
"type" : "post",
"data" : "t=new",
//若有多个参数,则参数之间用&连接,参数名和参数值用=连接。
//"data" : "t=new&x=123&y=77",
//多个参数更推荐用json格式,可读性更好,力于维护
//"data" :{"t":"new","x":"123","y":"77"},
"dataType" : "json",
"success" : function(json) {
console.log(json);
for (var i = 0; i < json.length; i++) {
$("#container").append("<h1>" + json[i].title + "</h1>");
}
},
"error" : function(xmlhttp, errorText) {
console.log(xmlhttp);
console.log(errorText);
if (xmlhttp.status == "405") {
alert("无效的请求方式!")
} else if (xmlhttp.status == "404") {
alert("未找到URL资源!");
} else if (xmlhttp.status == "500") {
alert("服务器内部错误,请联系管理员!");
} else {
alert("产生异常,请联系管理员!");
}
}
})
})
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>
六、实现二级联动菜单:
Channel.java:
package com.ajax.servlet;
public class Channel {
private String code;
private String name;
public Channel() {
super();
}
public Channel(String code, String name) {
super();
this.code = code;
this.name = name;
}
public String getCode() {
return code;
}
public void setCode(String code) {
this.code = code;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}
ChannelServlet.java:
package com.ajax.servlet;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.alibaba.fastjson.JSON;
/**
* Servlet implementation class ChannelServlet
*/
@WebServlet("/channel")
public class ChannelServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public ChannelServlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String level=request.getParameter("level"); //几级频道
String parent=request.getParameter("parent"); //哪个频道
List<Channel> list=new ArrayList<Channel>();
if (level.equals("1")) {
list.add(new Channel("DaTong", "大同"));
list.add(new Channel("ChengDu", "成都"));
}else if (level.equals("2")) {
if (parent.equals("ChengDu")) {
list.add(new Channel("jinjiangqu", "锦江区"));
list.add(new Channel("handuqu", "郫都区"));
list.add(new Channel("shuagliuqu", "双流区"));
}else if (parent.equals("DaTong")) {
list.add(new Channel("chengqu","城区"));
list.add(new Channel("kuangqu","矿区"));
list.add(new Channel("yungangqu","云岗区"));
}
}
String json=JSON.toJSONString(list);
response.setContentType("text/html;charset=UTF-8");
response.getWriter().println(json);
}
}
Cascade_menu.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
<script type="text/javascript">
//第一步:加载第一级的数据
$(function() {
$.ajax({
"url" : "/Ajax/channel",
"data" : {"level" : "1"},
"type" : "get",
"dataType" : "json",
"success" : function(json) {
console.log(json);
for (var i = 0; i < json.length; i++) {
var x = json[i];
$("#lv1").append("<option value='" + x.code + "'>" + x.name+ "</option>")
}
}
})
})
//第二步:给第一级数据绑定第二级数据
$(function(){
$("#lv1").on("change",function(){
var parent=$(this).val();
$.ajax({
"url":"/Ajax/channel",
"data":{"level":"2","parent":parent},
"dataType":"json",
"type":"get",
"success":function(json){
console.log(json);
//移除所有lv2下的原始option选项
$("#lv2>option").remove();
for(var i=0;i<json.length;i++){
var x=json[i];
$("#lv2").append("<option value='"+x.code+"'>"+x.name+"</option>")
}
}
})
})
})
</script>
</head>
<body>
<select id="lv1" style="width: 200px; height: 30px">
<option selected="selected">请选择</option>
</select>
<select id="lv2" style="width: 200px; height: 30px"></select>
</body>
</html>