BCSP-玄子Java开发之Java Web编程CH010_使用Ajax和jQuery实现异步请求
AJAX
什么是AJAX
Ajax：异步刷新技术
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-t0FtiPM2-1687707912698)(./assets/image-20230625220113781.png)]
为什么使用AJAX
无刷新的情况下更新页面内容
只更新部分页面，有效利用带宽提供连续的用户体验提供类似C/S的交互效果，操作更方便其他功能不受影响提供连续的用户体验页面内容实时变化操作方便局部刷新，降低网络消耗
传统Web与Ajax的差异
发送请求方式不同
传统Web：浏览器发送同步请求Ajax技术：异步引擎对象发送请求
服务器响应不同
传统Web ：响应内容是一个完整页面Ajax技术：响应内容只是需要的数据
客户端处理方式不同
传统Web ：需等待服务器响应完成并重新加载整个页面后才能继续操Ajax技术：可以动态更新页面中的部分内容，不影响其他操作
Ajax工作流程
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qor4lmsM-1687707912699)(./assets/image-20230625220235907.png)]
XMLHttpRequest
Ajax技术的核心，用于与服务器进行交互，提供异步发送请求的能力
方法名称说明open(String method, String url, boolean async, String user, String password)创建一个新的HTTP请求send(String data)发送请求到服务器端abort()取消当前请求setRequestHeader( String header, String value)设置请求的某个HTTP头信息getResponseHeader(String header)获取响应的指定HTTP头信息getAllResponseHeader()获取响应的所有HTTP头信息
XMLHttpRequest对象的常用属性
属性名称说明onreadystatechange设置回调函数，作为readyState属性值改变时的事件处理程序readyStateXMLHttpRequest的状态码0：XMLHttpRequest对象未完成初始化1：XMLHttpRequest对象开始发送请求2：XMLHttpRequest对象的请求发送完成3 ：XMLHttpRequest对象开始读取响应4：XMLHttpRequest对象读取响应结束status当前请求的HTTP状态码200：正确返回404：找不到访问对象status返回当前请求的HTTP状态码statusText返回当前请求的响应状态responseText以文本形式获得响应的内容responseXML将XML格式的响应内容解析成 DOM对象返回
使用Ajax发送GET请求
当“手机”文本框失去焦点时，验证此手机号是否被注册过，以页面无刷新的方式给出提示
为文本框绑定onBlur事件，实现失去焦点时调用检查手机号的JavaScript方法，校验手机号格式的合法性性手机号格式校验通过后，创建XMLHttpRequest对象，发送异步请求到服务器端进行验证
创建XMLHttpRequest对象
var xmlHttpRequest;
if (window.XMLHttpRequest) {
xmlHttpRequest = new XMLHttpRequest();
} else {
xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
// 兼容老版本IE浏览器（IE 5和IE 6）
}
设置回调函数
xmlHttpRequest.onreadystatechange = callBack;
初始化XMLHttpRequest对象
var tel = $("#userTel").val();
//服务器端URL地址，tel为用户注册的手机号
var url = "/microblog/control/register?opr=checkUser&userTel="+tel;
xmlHttpRequest.open("GET", url, true);
发送Ajax请求
xmlHttpRequest.send(null);
function callBack() {
//回调函数callBack()中处理服务器响应的关键代码
if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) {
var data = xmlHttpRequest.responseText;
if (data == "true") {
$("#userTeltip").html("手机号已被注册！");
userTeltip.style.visibility = "visible";
textobj.style.backgroundColor = "#B9E3AB";//设置出错背景色
imgobj.src = "../images/err.png";//设置出错状态图
telExist = true;
return false;
} else {
userTeltip.style.visibility = "hidden";
textobj.style.backgroundColor = "#fff";
imgobj.src = "../images/ok.png";
telExist = false;
return true;
} } }
Servlet接收XMLHttpRequest对象发送的GET请求
@WebServlet(name="RegisterServlet", urlPatterns = "/control/register")
public class RegisterServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String userTel = request.getParameter("userTel").trim();
UserService userService = new UserServiceImpl();
try{
boolean used = userService.findUser(userTel);
PrintWriter out = response.getWriter();
out.print(used);
out.flush();
out.close();
// 将结果写回到前端
}catch(Exception e){ e.printStackTrace(); }
}
}
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aotVUIOk-1687707912699)(./assets/image-20230625220703687.png)]
使用Ajax发送POST请求
创建XMLHttpRequest对象
var xmlHttpRequest;
if (window.XMLHttpRequest) {
xmlHttpRequest = new XMLHttpRequest();
} else {
xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
// 兼容老版本IE浏览器（IE 5和IE 6）
}
设置回调函数
xmlHttpRequest.onreadystatechange = callBack;
初始化XMLHttpRequest对象发送Ajax请求
var url = "/microblog/control/register"; //服务器端URL地址
xmlHttpRequest.open("POST", url, true);
xmlHttpRequest.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
发送Ajax请求
var tel = $("#userTel").val();
var data = "opr=checkUser&userTel="+tel; //需要发送的数据信息
xmlHttpRequest.send(data);
function callBack() {
// 回调函数
if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) {
var data = xmlHttpRequest.responseText;
// 省略根据服务器返回的文本数据进行相应的页面设置的代码
} }
GET请求和POST请求的区别
不同步骤请求方式实现代码初始化XMLHttpRequest对象GETxmlHttpRequest.open(“GET”, url, true);POSTxmlHttpRequest.open(“POST”, url, true);xmlHttpRequest.setRequestHeader( “Content-Type”, “application/x-www-form-urlencoded”);发送Ajax请求GETxmlHttpRequest.send(null);POSTxmlHttpRequest.send(“name=xxx&age=20”);
jQuery简化Ajax
传统方式实现Ajax的不足
步骤繁琐方法、属性、常用值较多难以记忆不便于处理XML格式等复杂结构的响应数据存在浏览器兼容问题
jQuery将Ajax相关操作都进行了封装
$.ajax([settings]);
settings是一组用于配置Ajax请求的键值对集合
settings参数常见属性
参数类型说明urlString发送请求的地址，默认为当前页地址typeString请求方式，默认为GETdataPlainObject或 String或 Array发送到服务器的数据dataTypeString预期服务器返回的数据类型，包括：XML、HTML、Script、JSON、JSONP、texttimeoutNumber设置请求超时时间globalBoolean表示是否触发全局Ajax事件，默认为truebeforeSendFunction (jqXHR jqxhr, PlainObject settings)发送请求前调用的函数successFunction( 任意类型 result, String textStatus, jqXHR jqxhr)请求成功后调用的函数参数result：可选，由服务器返回的数据errorFunction (jqXHR jqxhr, String textStatus, String errorThrown)请求失败时调用的函数completeFunction (jqXHR jqxhr, String textStatus)请求完成后（无论成功还是失败）调用的函数
使用jQuery的$.ajax()方法发送异步请求
$.ajax( {
"url": "/microblog/control/register",
"type": "POST",
"data": "opr=checkUser&userTel="+$("#userTel").val(),
"dataType": "text",
"success": callBack,
"error": function() {
alert("手机号验证时出现错误，请稍后再试！");
}
} );
url：要请求的URL路径type：发送请求的方式data：要发送到服务器的数据dataType：指定响应的数据格式success：响应成功后执行的代码error：请求失败后执行的代码
设置回调函数
function callBack(data) {
//参数表示响应结果
if (data == "true") {
//省略页面设置的代码
} else {
//省略页面设置的代码
}
}
beforeSend参数
发送请求前调用的函数
请求耗时较长，结果返回之前，显示“请求中”提示信息
"beforeSend" ：function() {
$("#loading").show();
// #loading为带有提示信息的div元素
}
禁用“提交”按钮，杜绝用户重复操作
"beforeSend" ：function() {
$("#loading").show();
// 显示提示信息
$("#submit").attr("disabled", "disabled");
// 禁用“提交”按钮
}
complete参数
请求完成后（无论成功还是失败）调用的函数
响应结束后，无论是否成功，都要隐藏“请求中”提示将“提交”按钮恢复可用
"complete" ：function() {
$("#loading").hide();
// 隐藏提示
$("#submit").removeAttr("disabled");
// 恢复按钮可用
}
JSON数据格式
JSON（JavaScript Object Notation）
一种轻量级的数据交换格式采用独立于语言的文本格式通常用于在客户端和服务器之间传递数据
JSON的优点
轻量级交互语言结构简单易于解析
使用JSON数据格式定义对象
整个表达式放在{ }中数据以名/值对的格式存在，并使用:连接多个名/值对之间用,隔开
var JSON对象 = { name:value, name:value, … };
使用JSON格式定义学生对象
var student = {"name":"张亮", "age":18, "email":"zl@yahoo.com", "dept":"数学系"};
使用JSON数据格式定义对象数组
多个JSON对象放在“[ ]”中
var JSON对象数组 = [{ name:value, name:value, … }， {}， {}， …];
使用JSON格式定义学生对象数组
var students = [
{"name":"张亮", "age":18, "email":"zl@yahoo.com", "dept":"数学系"},
{"name":"王小慧", "age":18, "email":"xh@yahoo.com", "dept":"生命科学系"}
];
使用JSON格式定义和展示数据
定义JSON格式的Book对象
var book = {"title":"逗逗镇的成语故事","price":150,
"publisher":"湖北少年儿童出版社"};
定义字符串数组
var strArray = ["北京","天津","上海","广州"];
定义JSON格式的对象数组
var books = [
{"title":"逗逗镇的成语故事","price":150,"publisher":"湖北少年儿童出版社"},
{"title":"贫穷的本质","price":36,"publisher":"中信出版集团"},
{"title":"国家宝藏","price":49,"publisher":"吉林美术出版社"}];
定义div容器，用于内容展示JSON数据展示Book对象
1. Book对象
2. 城市列表
3. 书籍列表
| 书名 | 价格 | 出版社 |
展示Book对象
$("#objDiv").append("title:" + book.title + "")
.append("price:"+ book.price +"")
.append("publisher:" + book.publisher +"");
展示城市列表
$(strArray).each(function(){
$("#cityList").append("");
})
展示书籍列表
$(books).each(function(){
$("#objectArray").append("
+ this.price +"
})
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Gf3P5eCj-1687707912700)(./assets/image-20230625222457839.png)]
参考链接
您阅读本篇文章共花了：
发表评论