JavaWEB開發(fā)14——ajax

yearsj 發(fā)布于2019-08-16 13:52 / 1466人閱讀

摘要：一概述什么是同步，什么是異步同步現(xiàn)象客戶端發(fā)送請求到服務器端，當服務器返回響應之前，客戶端都處于等待卡死狀態(tài)異步現(xiàn)象客戶端發(fā)送請求到服務器端，無論服務器是否返回響應，客戶端都可以隨意做其他事情，不會被卡死的運行原理頁面發(fā)起請求，會將請求發(fā)送

一、Ajax概述
1．什么是同步，什么是異步
同步現(xiàn)象：客戶端發(fā)送請求到服務器端，當服務器返回響應之前，客戶端都處于等待卡死狀態(tài)
異步現(xiàn)象：客戶端發(fā)送請求到服務器端，無論服務器是否返回響應，客戶端都可以隨意做其他事情，不會被卡死

2．Ajax的運行原理
頁面發(fā)起請求，會將請求發(fā)送給瀏覽器內(nèi)核中的Ajax引擎，Ajax引擎會提交請求到服務器端，在這段時間里，客戶端可以任意進行任意操作，直到服務器端將數(shù)據(jù)返回給Ajax引擎后，會觸發(fā)你設置的事件，從而執(zhí)行自定義的js邏輯代碼完成某種頁面1 功能。

二、js原生的Ajax技術(shù)（了解）
js原生的Ajax其實就是圍繞瀏覽器內(nèi)內(nèi)置的Ajax引擎對象進行學習的，要使用js原生的Ajax完成異步操作，有如下幾個步驟：
1）創(chuàng)建Ajax引擎對象
2）為Ajax引擎對象綁定監(jiān)聽（監(jiān)聽服務器已將數(shù)據(jù)響應給引擎）
3）綁定提交地址
4）發(fā)送請求
5）接受響應數(shù)據(jù)

注意：如果是post提交
在發(fā)送請求之前設置一個頭
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

總結(jié)：
所用異步訪問都是ajax引擎

三、Json數(shù)據(jù)格式（重要）

json是一種與語言無關的數(shù)據(jù)交換的格式，作用：
使用ajax進行前后臺數(shù)據(jù)交換
移動端與服務端的數(shù)據(jù)交換

1．Json的格式與解析
json有兩種格式：
1）對象格式：{"key1":obj,"key2":obj,"key3":obj...}
2）數(shù)組/集合格式：[obj,obj,obj...]

例如：user對象用json數(shù)據(jù)格式表示
{"username":"zhangsan","age":28,"password":"123","addr":"北京"}

List 用json數(shù)據(jù)格式表示
[{"pid":"10","pname":"小米4C"},{},{}]

注意：對象格式和數(shù)組格式可以互相嵌套

注意：json的key是字符串 jaon的value是Object

json的解析：
json是js的原生內(nèi)容，也就意味著js可以直接取出json對象中的數(shù)據(jù)

2．Json的轉(zhuǎn)換插件

將java的對象或集合轉(zhuǎn)成json形式字符串

json的轉(zhuǎn)換插件是通過java的一些工具，直接將java對象或集合轉(zhuǎn)換成json字符串。
常用的json轉(zhuǎn)換工具有如下幾種：
1）jsonlib
2）Gson：google
3）fastjson：阿里巴巴

四、Jquery的Ajax技術(shù)（重點）
jquery是一個優(yōu)秀的js框架，自然對js原生的ajax進行了封裝，封裝后的ajax的操作方法更簡潔，功能更強大，與ajax操作相關的jquery方法有如下幾種，但開發(fā)中經(jīng)常使用的有三種

1）$.get(url, [data], [callback], [type])
2）$.post(url, [data], [callback], [type])

其中：
url：代表請求的服務器端地址
data：代表請求服務器端的數(shù)據(jù)（可以是key=value形式也可以是json格式）
callback：表示服務器端成功響應所觸發(fā)的函數(shù)（只有正常成功返回才執(zhí)行）
type：表示服務器端返回的數(shù)據(jù)類型（jquery會根據(jù)指定的類型自動類型轉(zhuǎn)換）
常用的返回類型：text、json、html等

3）$.ajax( { option1:value1,option2:value2... } ); ---- 以后在掌握
常用的option有如下：
async：是否異步，默認是true代表異步
data：發(fā)送到服務器的參數(shù)，建議使用json格式
dataType：服務器端返回的數(shù)據(jù)類型，常用text和json
success：成功響應執(zhí)行的函數(shù)，對應的類型是function類型
type：請求方式，POST/GET
url：請求服務器端地址

GPU云服務器云服務器 so文件javaweb開發(fā) javaweb自動數(shù)據(jù)庫開發(fā) AJAX應用程序開發(fā) 14.04

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/72466.html

兩年了，我寫了這些干貨！

摘要：開公眾號差不多兩年了，有不少原創(chuàng)教程，當原創(chuàng)越來越多時，大家搜索起來就很不方便，因此做了一個索引幫助大家快速找到需要的文章系列處理登錄請求前后端分離一使用完美處理權(quán)限問題前后端分離二使用完美處理權(quán)限問題前后端分離三中密碼加鹽與中異常統(tǒng)一處理開公眾號差不多兩年了，有不少原創(chuàng)教程，當原創(chuàng)越來越多時，大家搜索起來就很不方便，因此做了一個索引幫助大家快速找到需要的文章！ Spring Boo...

huayeluoliuhen 2019-06-26 18:00 評論0 收藏0
javaweb服務端跨域支持

摘要：跨域是瀏覽器攔截了服務器端返回的相應，不是攔截了請求。通過來實現(xiàn)跨域使用來實現(xiàn)跨域可以解決下不能跨域的問題，僅僅支持請求服務端多加一個參數(shù)，在返回數(shù)據(jù)時用把具體的數(shù)據(jù)包裹起來，傳回前端。項目開發(fā)為了支持web瀏覽器ajax的直接請求，涉及到了跨域的需求，通過學習對跨域有了更深入的認識，現(xiàn)在總結(jié)一下： 1.跨域說明跨域指請求和服務的域不一致，瀏覽器和H5的ajax請求有影響，而對服務...

kycool 2019-08-20 17:41 評論0 收藏0
javaweb服務端跨域支持

摘要：跨域是瀏覽器攔截了服務器端返回的相應，不是攔截了請求。通過來實現(xiàn)跨域使用來實現(xiàn)跨域可以解決下不能跨域的問題，僅僅支持請求服務端多加一個參數(shù)，在返回數(shù)據(jù)時用把具體的數(shù)據(jù)包裹起來，傳回前端。項目開發(fā)為了支持web瀏覽器ajax的直接請求，涉及到了跨域的需求，通過學習對跨域有了更深入的認識，現(xiàn)在總結(jié)一下： 1.跨域說明跨域指請求和服務的域不一致，瀏覽器和H5的ajax請求有影響，而對服務...

dadong 2019-08-15 10:38 評論0 收藏0
基于javaweb+jsp的學生成績管理系統(tǒng)

基于javaweb+jsp的學生成績管理系統(tǒng) JavaWeb JavaBean JSP MVC MySQL Tomcat JavaScript idea eclipse MyEclipse Servlet SSM Maven … 部分代碼實現(xiàn)JSP let editIndex = layedit.build('LAY_demo_editor'); ...

番茄西紅柿 2021-11-23 09:51 評論0 收藏2637