BCSP-玄子Java开发之Java Web编程CH010_使用Ajax和jQuery实现异步请求

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技术的核心，用于与服务器进行交互，提供异步发送请求的能力

XMLHttpRequest对象的常用属性

使用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请求的区别

jQuery简化Ajax

传统方式实现Ajax的不足

• 步骤繁琐
• 方法、属性、常用值较多难以记忆
• 不便于处理XML格式等复杂结构的响应数据
• 存在浏览器兼容问题

jQuery将Ajax相关操作都进行了封装

$.ajax([settings]);复制

settings是一组用于配置Ajax请求的键值对集合

settings参数常见属性

使用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对象<div id="objDiv"></div></br>
2. 城市列表&nbsp;&nbsp;<select id="cityList"></select></br></br></br>
3. 书籍列表
<div>
	<table id="objectArray" border="1">
		<tr><td>书名</td><td>价格</td><td>出版社</td></tr>
	</table>
</div>复制

展示Book对象

$("#objDiv").append("title:" + book.title + "</br>")
    .append("price:"+ book.price +"</br>")
    .append("publisher:" + book.publisher +"</br>");复制

展示城市列表

$(strArray).each(function(){
        $("#cityList").append("<option>" + this + "</option>");
})复制

展示书籍列表

$(books).each(function(){
    $("#objectArray").append("<tr><td>" + this.title + "</td><td>"
            + this.price +"</td><td>" + this.publisher + "</td></tr>");
})复制

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Gf3P5eCj-1687707912700)(./assets/image-20230625222457839.png)]