BCSP-玄子Java開發(fā)之Java Web編程CH011_Ajax交互擴展

jQuery靈活的Ajax實現(xiàn)

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

$.get()方法

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

常用參數(shù)

$.get()方法的用法

使用$.get()方法實現(xiàn)Ajax異步驗證注冊手機號是否被使用的功能

function checkUserTelExist(imgobj,textobj){
    $.get("/microblog/control/register","opr=checkUser&userTel="
             +$("#userTel").val(), callBack); //發(fā)送請求
    //響應成功時的回調(diào)函數(shù)
    function callBack(data) { 
        // data參數(shù)表示響應結(jié)果
        ...//省略部分代碼
    }
}

使用$.get()方法與在$.ajax()方法中指定參數(shù)type的值為GET是等價的

$.post()方法

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

常用參數(shù)

$.post()方法的用法

使用$.post()方法實現(xiàn)Ajax異步驗證注冊手機號是否被使用的功能

function checkUserTelExist(imgobj,textobj){
    $.post("/microblog/control/register","opr=checkUser&userTel="
             +$("#userTel").val(), callBack); //發(fā)送請求
    //響應成功時的回調(diào)函數(shù)
    function callBack(data) { 
        // data參數(shù)表示響應結(jié)果
        ...//省略部分代碼
    }
}

使用$.post()方法與在$.ajax()方法中指定參數(shù)type的值為POST是等價的

$.getJSON()方法

$.getJSON()方法是$.get()方法的簡寫方式，默認指定了參數(shù)"dataType"的值為"json"

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

常用參數(shù)

$. getJSON()方法的用法

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

function initBlogList(pageIndex){
	$.getJSON("../control/blog",
	"opr=allBlogList&keyword="+$("#keyword").val()+"&pageIndex="
              + pageIndex, processBlogsList);
}
function processBlogsList(data) {
    // data參數(shù)表示響應結(jié)果
  ...//省略將JSON數(shù)據(jù)展示到頁面的代碼
}

$.getJSON()方法只能以GET方式發(fā)送請求

使用jQuery處理表單數(shù)據(jù)

修改表單中的提交按鈕，不再通過傳統(tǒng)提交方式提交表單

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

使用jQuery提取表單數(shù)據(jù)并發(fā)送Ajax請求

function updateAccount(){
  if(checkForm()){
       //獲取所有表單元素
      var $updateUserInputs = $("#container").find(":input");  
	var paramsArray = $updateUserInputs.serializeArray();
      // 檢查表單元素有效性轉(zhuǎn)換格式
      var queryString = $.param(paramsArray); 
      // 將數(shù)據(jù)序列化成請求字符串
      $.post("../control/updateUser",
           "opr=updateAccount&"+queryString,
           function updateSuccess(data){ alert(data.message); },
           "JSON");
}}

.serializeArray()

serializeArray()

• 檢測一組表單元素中的有效控件
  • 沒有被禁用
  • 必須有name屬性
  • 選中的checkbox或radio
  • 只有觸發(fā)提交事件的submit按鈕才是有效的
  • file元素不會被序列化
• 將有效控件序列化為JSON對象數(shù)組
  • 包含name和value兩個屬性

{
	{
		name:"nickname",
		value:"安琪蝦"
	}, 
 	{
		name:"email",
		value:"anqi@126.com"
	}, 
	{
		name:"sign",
		value:"縫縫補補又是一年"
	}
}

$.param()

$.param()將由. serializeArray()生成的對象數(shù)組序列化成請求字符串的形式

nickname=安琪蝦&email=anqi@126.com&sign=縫縫補補又是一年

jQuery提供了.serialize()方法

• 用于簡化獲取表單內(nèi)容 + 序列化請求字符串實現(xiàn)方案
• .serialize()方法內(nèi)部使用$.param()方法對.serializeArray()方法進行了包裝，可以更簡便地完成表單數(shù)據(jù)的序列化

使用.serialize()方法序列化表單數(shù)據(jù)

var queryString = $updateUserInputs.serialize();

.load()方法

.load()方法可以簡化通過Ajax請求加載HTML內(nèi)容的操作

通過發(fā)送Ajax請求從服務器加載數(shù)據(jù)，并把響應的數(shù)據(jù)直接添加到調(diào)用該方法的元素中

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

常用參數(shù)

. load()方法的用法

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

.load()方法默認使用GET方式請求，當data參數(shù)是一個對象時，則使用POST請求方式

.load()方法可以通過url參數(shù)的特殊語法對加載的HTML內(nèi)容進行篩選

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

使用jQuery選擇器，從.load()方法返回的HTML內(nèi)容中篩選出id為target的元素，并插入到id為result的元素中

FastJSON簡介

一個Java實現(xiàn)的JSON解析器和生成器

• 將Java對象序列化成JSON字符串
• 將JSON字符串反序列化為Java對象
• 性能好

阿里巴巴的開源庫

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

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-QWvTwjA5-1687708161068)(./assets/image-20230625224238615.png)]

FastJSON核心API

入口類：com.alibaba.fastjson.JSON

枚舉類型 SerializerFeature 定義了多種序列化屬性

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

Promise對象

異步編程的一種解決方案

• 保存著某個未來才會結(jié)束的事件的結(jié)果，可以理解為一個容器

特點

• 對象的狀態(tài)不受外界影響，只有異步操作的結(jié)果可以決定當前狀態(tài)
  • 三種狀態(tài)：pending（進行中）、fulfilled（已成功）和rejected（已失敗）
• 一旦狀態(tài)改變，就不會再變，任何時候都可以得到這個結(jié)果

缺點

• 無法取消Promise，一旦新建就會立即執(zhí)行，無法中途取消
• 如果不設置回調(diào)函數(shù)，Promise內(nèi)部拋出的錯誤將不會反映到外部
• 當處于pending狀態(tài)時，無法得知目前的進展到哪一個階段

Promise對象的基本用法

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

resolve和reject是兩個函數(shù)，由JavaScript引擎提供

• resolve函數(shù)：異步請求成功時調(diào)用，將Promise對象的狀態(tài)從“pending“變?yōu)椤癴ulfilled“，將操作結(jié)果作為參數(shù)傳遞出去
• reject函數(shù)：異步請求失敗時調(diào)用，將Promise對象的狀態(tài)從“pending”變?yōu)椤皉ejected“，將報錯信息作為參數(shù)傳遞出去

then()方法接受兩個回調(diào)函數(shù)

• 作為參數(shù)可以指定fulfilled狀態(tài)和rejected狀態(tài)的回調(diào)函數(shù)
• Promise實例創(chuàng)建成功后調(diào)用

使用Promise對象實現(xiàn)的 Ajax 操作

創(chuàng)建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; 
};

調(diào)用then()函數(shù)

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

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-CSHufEcE-1687708161069)(./assets/image-20230625224720246.png)]

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()方法指定的回調(diào)函數(shù)，返回一個Promise對象

• 第二個then()方法指定的回調(diào)函數(shù)，會等待這個新的Promise對象狀態(tài)發(fā)生變化

  • 如果變?yōu)閒ulfilled，調(diào)用funcA()

  • 如果狀態(tài)變?yōu)閞ejected，調(diào)用funcB()

catch()方法和finally()方法

catch()方法用于指定發(fā)生錯誤時的回調(diào)函數(shù)

getJSON('/posts.json').then(function (posts) {
	// ...
}).catch(function (error) {
  	console.log('發(fā)生錯誤！', error);
});

無論Promise對象最后狀態(tài)如何，都會執(zhí)行finally()方法

• 回調(diào)函數(shù)不接受任何參數(shù)
• 如果使用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對象的數(shù)組

const promises = [2, 3, 5, 7, 11, 13].map(function (id) {
	// 生成一個Promise對象的數(shù)組
	return getJSON('/post/' + id + ".json");
});

使用all()方法將該數(shù)組包裝成一個新的Promise實例

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

只有這 6 個對象的狀態(tài)都變成fulfilled，或者其中有一個變?yōu)閞ejected，才會調(diào)用Promise.all()方法后面的回調(diào)函數(shù)

race()方法

使用race()方法返回獲得結(jié)果最快的Promise實例文章來源地址http://www.zghlxwxcb.cn/news/detail-501318.html

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);

• 如果 5 秒之內(nèi)fetch()方法無法返回結(jié)果，變量p的狀態(tài)就會變?yōu)閞ejected，從而觸發(fā)catch()方法指定的回調(diào)函數(shù)
• reject()方法會返回一個狀態(tài)為rejected的Promise實例

到了這里，關于BCSP-玄子Java開發(fā)之Java Web編程CH011_Ajax交互擴展的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！