BCSP-玄子Java开发之Java Web编程CH011_Ajax交互扩展

最新推荐文章于 2024-05-21 23:21:19 发布

玄子Share

最新推荐文章于 2024-05-21 23:21:19 发布

阅读量806

点赞数

分类专栏： # JSP + Servlet 文章标签：前端 ajax java spring javascript servlet

本文链接：https://blog.csdn.net/qq_62283694/article/details/131388108

版权

JSP + Servlet 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

BCSP-玄子Java开发之Java Web编程CH011_Ajax交互扩展

jQuery灵活的Ajax实现

$.ajax(
)$.get()
$.post()
$.getJSON()
.load()
……

$.get()方法

$.get(url[,data][,success][,dataType]);

常用参数

参数	类型	说明
url	String	必选，发送请求的地址
data	PlainObject 或 String	发送到服务器的数据
success	Function(PlainObject result, String textStatus, jqXHR jqxhr)	请求成功后调用的函数参数result：可选，服务器返回的数据
dataType	String	预期服务器返回的数据类型，包括：XML、HTML、Script、JSON、JSONP、text

$.get()方法的用法

使用$.get()方法实现Ajax异步验证注册手机号是否被使用的功能

function checkUserTelExist(imgobj,textobj){
    $.get("/microblog/control/register","opr=checkUser&userTel="
             +$("#userTel").val(), callBack); //发送请求
    //响应成功时的回调函数
    function callBack(data) { 
        // data参数表示响应结果
        ...//省略部分代码
    }
}

使用$.get()方法与在$.ajax()方法中指定参数type的值为GET是等价的

$.post()方法

$.post(url[,data][,success][,dataType]);

常用参数

参数	类型	说明
url	String	必选，发送请求的地址
data	PlainObject 或 String	发送到服务器的数据
success	Function(PlainObject result, String textStatus, jqXHR jqxhr)	请求成功后调用的函数参数result：可选，服务器返回的数据
dataType	String	预期服务器返回的数据类型，包括：XML、HTML、Script、JSON、JSONP、text

$.post()方法的用法

使用$.post()方法实现Ajax异步验证注册手机号是否被使用的功能

function checkUserTelExist(imgobj,textobj){
    $.post("/microblog/control/register","opr=checkUser&userTel="
             +$("#userTel").val(), callBack); //发送请求
    //响应成功时的回调函数
    function callBack(data) { 
        // data参数表示响应结果
        ...//省略部分代码
    }
}

使用$.post()方法与在$.ajax()方法中指定参数type的值为POST是等价的

$.getJSON()方法

$.getJSON()方法是$.get()方法的简写方式，默认指定了参数"dataType"的值为"json"

$.getJSON(url[,data][,success]);

常用参数

参数	类型	说明
url	String	必选，发送请求的地址
data	PlainObject 或 String	发送到服务器的数据
success	Function(PlainObject result, String textStatus, jqXHR jqxhr)	请求成功后调用的函数参数result：可选，服务器返回的数据

$. getJSON()方法的用法

使用$.getJSON()方法获取列表

function initBlogList(pageIndex){
	$.getJSON("../control/blog",
	"opr=allBlogList&keyword="+$("#keyword").val()+"&pageIndex="
              + pageIndex, processBlogsList);
}
function processBlogsList(data) {
    // data参数表示响应结果
  ...//省略将JSON数据展示到页面的代码
}

$.getJSON()方法只能以GET方式发送请求

使用jQuery处理表单数据

修改表单中的提交按钮，不再通过传统提交方式提交表单

<form id="form1" name="form1" method="post" action="">
    ...//省略表单元素
    <input name="button" type="button" class="btn" id="button" 
    value="保存" onclick="updateAccount()"/>
</form>

使用jQuery提取表单数据并发送Ajax请求

function updateAccount(){
  if(checkForm()){
       //获取所有表单元素
      var $updateUserInputs = $("#container").find(":input");  
	var paramsArray = $updateUserInputs.serializeArray();
      // 检查表单元素有效性转换格式
      var queryString = $.param(paramsArray); 
      // 将数据序列化成请求字符串
      $.post("../control/updateUser",
           "opr=updateAccount&"+queryString,
           function updateSuccess(data){ alert(data.message); },
           "JSON");
}}

.serializeArray()

serializeArray()

检测一组表单元素中的有效控件
- 没有被禁用
- 必须有name属性
- 选中的checkbox或radio
- 只有触发提交事件的submit按钮才是有效的
- file元素不会被序列化
将有效控件序列化为JSON对象数组
- 包含name和value两个属性

{
	{
		name:"nickname",
		value:"安琪虾"
	}, 
 	{
		name:"email",
		value:"anqi@126.com"
	}, 
	{
		name:"sign",
		value:"缝缝补补又是一年"
	}
}

$.param()

$.param()将由. serializeArray()生成的对象数组序列化成请求字符串的形式

nickname=安琪虾&email=anqi@126.com&sign=缝缝补补又是一年

jQuery提供了.serialize()方法

用于简化获取表单内容 + 序列化请求字符串实现方案
.serialize()方法内部使用$.param()方法对.serializeArray()方法进行了包装，可以更简便地完成表单数据的序列化

使用.serialize()方法序列化表单数据

var queryString = $updateUserInputs.serialize();

.load()方法

.load()方法可以简化通过Ajax请求加载HTML内容的操作

通过发送Ajax请求从服务器加载数据，并把响应的数据直接添加到调用该方法的元素中

$(selector).load(url[,data][,complete]);

常用参数

参数	类型	说明
url	String	必选，发送请求的地址
data	PlainObject 或 String	发送到服务器的数据
complete	Function(String responseText, String textStatus, jqXHR jqxhr)	对每个匹配的元素设置完内容后都会触发该函数responseText：服务器返回的数据

. load()方法的用法

function initUserInfo(){
    $("#ul1").load("../control/userInfo");
}

.load()方法默认使用GET方式请求，当data参数是一个对象时，则使用POST请求方式

.load()方法可以通过url参数的特殊语法对加载的HTML内容进行筛选

$("#result").load("article.html #target");

使用jQuery选择器，从.load()方法返回的HTML内容中筛选出id为target的元素，并插入到id为result的元素中

FastJSON简介

一个Java实现的JSON解析器和生成器

将Java对象序列化成JSON字符串
将JSON字符串反序列化为Java对象
性能好

阿里巴巴的开源库

下载地址：https://github.com/alibaba/fastjson/releases

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

FastJSON核心API

入口类：com.alibaba.fastjson.JSON

参数	说明
public static String toJSONString ( Object object )	将Java对象序列化成JSON字符串
public static String toJSONString ( Object object, boolean prettyFormat )	prettyFormat为true时生成带格式的JSON字符串
public static String toJSONString ( Object object, SerializerFeature… features )	可以通过参数features指定更多序列化规则
public static String toJSONStringWithDateFormat ( Object object, String dateFormat, SerializerFeature… features )	可以通过参数dateFormat指定日期类型的输出格式

枚举类型 SerializerFeature 定义了多种序列化属性

参数	说明
QuoteFieldNames	输出JSON的字段名时使用双引号，默认即使用
WriteMapNullValue	输出值为null的字段，默认不输出
WriteNullListAsEmpty	将值为null的List字段输出为[ ]
WriteNullStringAsEmpty	将值为null的String字段输出为""
WriteNullNumberAsZero	将值为null的数值字段输出为0
WriteNullBooleanAsFalse	将值为null的Boolean字段输出为false
SkipTransientField	忽略transient字段，默认即忽略
PrettyFormat	格式化JSON字符串，默认不格式化

String messageJson = JSONObject.toJSONString(message);
System.out.println(messageJson);

Promise对象

异步编程的一种解决方案

保存着某个未来才会结束的事件的结果，可以理解为一个容器

特点

对象的状态不受外界影响，只有异步操作的结果可以决定当前状态
- 三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）
一旦状态改变，就不会再变，任何时候都可以得到这个结果

缺点

无法取消Promise，一旦新建就会立即执行，无法中途取消
如果不设置回调函数，Promise内部抛出的错误将不会反映到外部
当处于pending状态时，无法得知目前的进展到哪一个阶段

Promise对象的基本用法

const promise = new Promise( function(resolve, reject) {
    if (/* 异步操作成功 */){ resolve(value);
    } else { reject(error); }
});
promise.then( function(value) {/* success */}, function(error) {/* failure */});

resolve和reject是两个函数，由JavaScript引擎提供

resolve函数：异步请求成功时调用，将Promise对象的状态从“pending“变为“fulfilled“，将操作结果作为参数传递出去
reject函数：异步请求失败时调用，将Promise对象的状态从“pending”变为“rejected“，将报错信息作为参数传递出去

then()方法接受两个回调函数

作为参数可以指定fulfilled状态和rejected状态的回调函数
Promise实例创建成功后调用

使用Promise对象实现的 Ajax 操作

创建Promise对象

const getJSON = function(url) {
    const promise = new Promise(function(resolve, reject){
       const handler = function() {
            if (this.readyState !== 4) { return; }
            if (this.status === 200) { resolve(this.response);
            } else { reject( new Error(this.statusText)); }
        };
       const client = new XMLHttpRequest();
       client.open("GET", url);
    	client.onreadystatechange = handler;
    	client.responseType = "json";
    	client.setRequestHeader("Accept", "application");
    	client.send();
    });
    return promise; 
};

调用then()函数

getJSON("/posts.json").then(function(json) {
    // 要请求的URL地址
	console.log('请求成功');
}, function(error) {
	console.error('请求失败');
});

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

Promise对象方法

名称	说明
Promise.prototype.then( onFulfilled[,onRejected]):Promise	返回一个新的Promise实例
Promise.prototype.catch( onRejected):Promise	指定发生错误时的回调函数
Promise.prototype.finally( onFinally):Promise	无论Promise对象最后状态如何，都会执行的操作
Promise.all(iterable):Promise	用于将多个 Promise 实例，包装成一个新的 Promise 实例
Promise.race(iterable):Promise	类似于all()方法，返回获得结果最快的Promise实例

then()方法

使用then()方法返回一个Promise对象

getJSON("/post/1.json").then(function (post) {
	return getJSON(post.commentURL);
}).then(function funcA(comments) {
	console.log("resolved: ", comments);
}, function funcB(err) {
	console.log("rejected: ", err);
});

第一个then()方法指定的回调函数，返回一个Promise对象
第二个then()方法指定的回调函数，会等待这个新的Promise对象状态发生变化
- 如果变为fulfilled，调用funcA()
- 如果状态变为rejected，调用funcB()

catch()方法和finally()方法

catch()方法用于指定发生错误时的回调函数

getJSON('/posts.json').then(function (posts) {
	// ...
}).catch(function (error) {
  	console.log('发生错误！', error);
});

无论Promise对象最后状态如何，都会执行finally()方法

回调函数不接受任何参数
如果使用then()方法，同样的方法语句需要为成功和失败各写一次

Promise.resolve(2).then(() => { }, () => { });
// resolve 的值是 undefined
Promise.resolve(2).finally(() => { });
// resolve 的值是 2
Promise.reject(3).then(() => { }, () => { });	
// reject 的值是 undefined
Promise.reject(3).finally(() => { });	
// reject 的值是 3

all()方法

使用map()方法生成了一个包含6个Promise对象的数组

const promises = [2, 3, 5, 7, 11, 13].map(function (id) {
	// 生成一个Promise对象的数组
	return getJSON('/post/' + id + ".json");
});

使用all()方法将该数组包装成一个新的Promise实例

Promise.all(promises).then(function (posts) {
	// ...
}).catch(function (reason) { })

只有这 6 个对象的状态都变成fulfilled，或者其中有一个变为rejected，才会调用Promise.all()方法后面的回调函数

race()方法

使用race()方法返回获得结果最快的Promise实例

const p = Promise.race([
	fetch('/resource-that-may-take-a-while'),
	new Promise(function (resolve, reject) {
		setTimeout(() => reject(new Error('request timeout')), 5000)
	})
]);
p.then(console.log).catch(console.error);