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

方法名称	说明
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属性值改变时的事件处理程序
readyState	XMLHttpRequest的状态码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对象	GET	xmlHttpRequest.open(“GET”, url, true);
POST	xmlHttpRequest.open(“POST”, url, true);xmlHttpRequest.setRequestHeader( “Content-Type”, “application/x-www-form-urlencoded”);
发送Ajax请求	GET	xmlHttpRequest.send(null);
POST	xmlHttpRequest.send(“name=xxx&age=20”);

jQuery简化Ajax

传统方式实现Ajax的不足

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

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

$.ajax([settings]);

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

settings参数常见属性

参数	类型	说明
url	String	发送请求的地址，默认为当前页地址
type	String	请求方式，默认为GET
data	PlainObject或 String或 Array	发送到服务器的数据
dataType	String	预期服务器返回的数据类型，包括：XML、HTML、Script、JSON、JSONP、text
timeout	Number	设置请求超时时间
global	Boolean	表示是否触发全局Ajax事件，默认为true
beforeSend	Function (jqXHR jqxhr, PlainObject settings)	发送请求前调用的函数
success	Function( 任意类型 result, String textStatus, jqXHR jqxhr)	请求成功后调用的函数参数result：可选，由服务器返回的数据
error	Function (jqXHR jqxhr, String textStatus, String errorThrown)	请求失败时调用的函数
complete	Function (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对象<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)]