當(dāng)前位置：首頁(yè) > 前端技术 > javascript >内容正文

javascript

前端基础之Html、CSS、JavaScript、JQuery、Ajax

發(fā)布時(shí)間：2023/12/20 javascript 27 豆豆

生活随笔收集整理的這篇文章主要介紹了前端基础之Html、CSS、JavaScript、JQuery、Ajax 小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

前端

1.HTML

XML：可擴(kuò)展標(biāo)記語(yǔ)言
XHTML：可擴(kuò)展的超文本標(biāo)記語(yǔ)言

1. HTML 概述

HTML：超文本標(biāo)記語(yǔ)言

網(wǎng)頁(yè)組成：文字 + 圖片 + 表格 + 表單 + 鏈接 + 視頻 + 音頻

網(wǎng)頁(yè)文件的格式：htm ，html

網(wǎng)頁(yè)的注釋：

html 結(jié)構(gòu)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>頭部標(biāo)題</title></head><body>網(wǎng)頁(yè)內(nèi)容所在位置</body> </html>

2. 標(biāo)記

標(biāo)記的語(yǔ)法

<起始標(biāo)簽屬性名="值" ......> 被標(biāo)記的內(nèi)容</結(jié)束標(biāo)簽>

注意：

不區(qū)分大小寫(xiě)（個(gè)別瀏覽器區(qū)分）

一般標(biāo)記都是成對(duì)出現(xiàn)，極少數(shù)單獨(dú)出現(xiàn)

標(biāo)簽可以相互嵌套，但不可交叉嵌套（屬性如果其沖突，就近原則）

標(biāo)簽分類：

塊級(jí)標(biāo)簽：有換行，有寬高，外邊距正常，塊級(jí)標(biāo)簽和行級(jí)標(biāo)簽都可以放

行內(nèi)標(biāo)簽：沒(méi)有換行，寬高無(wú)效，上下外邊距無(wú)效，只能放文字和行級(jí)標(biāo)簽，不能放塊級(jí)標(biāo)簽

如果要給服務(wù)端提交數(shù)據(jù)，表單中的組件必須有 name 和 value 屬性。用于給服務(wù)端獲取數(shù)據(jù)方便

特殊字符

  空格 > > < < " " & & © 版權(quán)? ® 注冊(cè)?

標(biāo)記

常用標(biāo)記

標(biāo)題：<hn="1...6" align="left|center|right" ></hn> 段落：<p align="left|center|right"></p> 字體：<font size="1-7" color="顏色" face="字體風(fēng)格[黑體]"></font><i>斜體</i> <em>斜體</em><b>加粗</b> <strong>加粗</strong><u>下劃線</u> <ins>下劃線</ins><s>刪除線(貫穿線)</s><del>刪除線</del><sub>下標(biāo)標(biāo)識(shí)</sub><sup>上部標(biāo)識(shí)</sup>換行：<br/> 居中：<center></center> 元信息：<meta /> 預(yù)定義：<pre></pre> 地址：<address></address> 音頻：<embed src=""></embed> 水平線：<hr size="粗細(xì)" color="顏色" width="長(zhǎng)度" align="center|left|right" noshade(3D 凹凸效果)/> 滾動(dòng)：<marquee direction="left|right|down|up" scrollamount="滾動(dòng)速度"behavior="scroll(重復(fù))|slide(不重復(fù))|alternate(來(lái)回滾動(dòng))" loop="滾動(dòng)次數(shù)-1" scrolldelay="兩次之間的有延遲值越大越明顯的停頓"> </marquee> 頁(yè)面排版：<div> </div>

圖片標(biāo)記：img

鏈接標(biāo)記：a

文本鏈接

圖片鏈接：可做圖片按鈕

錨連接：一般用于當(dāng)前頁(yè)面位置的跳轉(zhuǎn)

<a name="錨名字" href="">首頁(yè)</a> <a href="#錨名字">跳轉(zhuǎn)到首頁(yè)</a>

表格

完整版

屬性

table 表格

border: 邊框粗細(xì) bordercolor:邊框顏色 width: 寬度 height: 高度 bgcolor: 背景顏色 background: 背景圖片 cellspacing:單元格與單元格之間的距離 cellpadding:單元格與數(shù)據(jù)之間的距離

tr 行

align:left|center|right 水平位置 valign:middle 中|top 上|bottom 下垂直位置 height: width: bgcolor: background:背景圖片

td|th 列（th 列屬于首列，自動(dòng)居中加粗）

align:left|center|right 水平位置 valign:middle 中|top 上|bottom 下垂直位置 height: width: bgcolor: background: 背景圖片 rowspan: 合并行 colspan: 合并列 # 合并行列：數(shù)格子,數(shù)過(guò)的格子不能再數(shù)

列表

有序列表

無(wú)序列表

自定義列表

表單 form、input、select、textarea

表單：是頁(yè)面提供客戶端輸入信息的元素的統(tǒng)稱，包括表單和表單元素

如果要給服務(wù)端提交數(shù)據(jù)，表單中的組件必須有 name 和 value 屬性，用于給服務(wù)端獲取數(shù)據(jù)方便

<form action="url 提交地址" method="get|post" name="formname"><fieldset><legend>基本信息</legend>文本框:<input type="text" name="" size="" maxlength="" value="默認(rèn)值"/>密碼框:<input type="password" name="" size="" maxlength="" value="默認(rèn)值"/>單選框:<input type="radio" name="sex" value="" checked="checked"/>提示符多選框:<input type="checkbox" name="" value="" checked="checked"/> 提示文字隱藏文本:<input type="hidden" name="" value=""/>上傳文件:<input type="file" name=""/></fieldset>下拉列表：<select name="" size="顯示個(gè)數(shù)"><optgroup lable="四川省"><option value="成都">成都</option> <option value="南充" selected="selected">南充</option></optgroup></select>文本域:<textarea name="" rows="" cols="" readonly="readonly"></textarea>提交按鈕:<input type="submit" value=""/>重置按鈕:<input type="reset" value=""/>普通按鈕:<input type="button" value=""/>圖片按鈕：<input type="image" src="" alt="圖片加載失敗"/>按鈕圖片：<button type="submit"><img src="" alt="" title="提交"/></button> </form>

頁(yè)面框架

框架一般用于寫(xiě)后臺(tái)頁(yè)面的時(shí)候用

定義框架

<frameset rows="20%,*"> 縱向 <frame src="頁(yè)面路徑" noresize="noresize" frameborder="0" scrolling=""/><frame src="頁(yè)面路徑" name="right"/> </frameset> <frameset cols="30%,60%,*"> 橫向 </frameset> <noframes><body>瀏覽器不支持</body> </noframes>left.html: <a href="right2.html" target="right">美女</a> right是右側(cè)框架的名稱

導(dǎo)入框架

3. GET、POST

GET 請(qǐng)求和 POST 請(qǐng)求的區(qū)別：

在客服端的區(qū)別

區(qū)別GETPOST

是否顯示	提交的信息都顯示在地址欄中	提交的信息不顯示地址欄中
封裝位置	將信息封裝到了請(qǐng)求消息的請(qǐng)求行中	將信息封裝到了請(qǐng)求體中
安全性	對(duì)于敏感的數(shù)據(jù)信息不安全	對(duì)于敏感信息安全
數(shù)據(jù)體積	對(duì)于大數(shù)據(jù)不行，因?yàn)榈刂窓诖鎯?chǔ)體積有限，大小不超過(guò)4KB	可以提交大體積數(shù)據(jù)
速度	相對(duì)較快	相對(duì)較慢

在服務(wù)端的區(qū)別（亂碼處理方式）

如果提交中文到 tomcat 服務(wù)器會(huì)出現(xiàn)亂碼，服務(wù)器默認(rèn)會(huì)用 iso-8859-1 進(jìn)行解碼，解決方法：

對(duì) get 提交和 post 提交都有效

通過(guò) iso-8859-1 進(jìn)行編碼，再用指定的中文碼表解碼即可

用 URLDecoder.decode(user,“utf-8”)

修改 tomcat 的配置文件 server.xml：加上 URIEncoding="UTF-8"

對(duì)于 post 提交，還有另一種解決辦法，就是直接使用服務(wù)端一個(gè) request 對(duì)象

request 對(duì)象的 setCharacterEncoding 方法直接設(shè)置指定的中文碼表就可以將中文數(shù)據(jù)解析出來(lái)。這個(gè)方法只對(duì)請(qǐng)求體中的數(shù)據(jù)進(jìn)行解碼

// 在獲取數(shù)據(jù)之前，設(shè)置請(qǐng)求的字符編碼集 request.setCharacterEncoding("UTF-8");

和服務(wù)端交互的三種方式

位置請(qǐng)求方式

地址欄輸入 url 地址	get
超鏈接	get
表單	get 和 post

數(shù)據(jù)校驗(yàn)

客服端校驗(yàn)服務(wù)端校驗(yàn)

是否校驗(yàn)	如果在客戶端進(jìn)行增強(qiáng)型的校驗(yàn) (只要有一個(gè)組件內(nèi)容是錯(cuò)誤，是無(wú)法繼續(xù)提交的, 只有全對(duì)才可以提交)	服務(wù)端收到數(shù)據(jù)后，也還需要校驗(yàn)
校驗(yàn)?zāi)康?/td>	提高用戶的上網(wǎng)體驗(yàn)效果，減輕服務(wù)器端的壓力	為了安全性

2. CSS

CSS：層疊樣式表。 HTML 定義網(wǎng)頁(yè)的內(nèi)容，CSS 定義內(nèi)容的樣式

CSS 的注釋：/* 注釋內(nèi)容 */

1. 樣式

行內(nèi)樣式 style

內(nèi)嵌樣式

外聯(lián)樣式 link

2. 選擇器

優(yōu)先級(jí)：id 選擇器 > 類選擇器 > 標(biāo)簽選擇器

id 選擇器 #

#name{ background-color:red; width:500px; }

class 選擇器 .

.name1{ 樣式屬性 }

標(biāo)簽選擇器

h1{ font-size:36px;color:red;} /*頁(yè)面所有的 h1 標(biāo)記里的字體大小為 36px,顏色為紅色*/

組合選擇器

h1 a li{ font-size:36px;color:red; } /*所有h1下的a下的li里的字體大小為36px,顏色為紅色*/

通配符選擇器

*{樣式屬性} /* 整個(gè)頁(yè)面所有的內(nèi)容都具有的樣式 */

3. 布局

漂浮 float

定位 position

定位的原則：先相對(duì)定位，再絕對(duì)定位

position:relative; 相對(duì)定位，不脫離文檔流 position:absolute; 絕對(duì)定位，脫離文檔流具體位置設(shè)置：top,left,right,bottom z-index:數(shù)值越大，越在上層

4. 樣式屬性

標(biāo)簽轉(zhuǎn)換

display:block; 行轉(zhuǎn) 塊 display:inline; 塊轉(zhuǎn) 行 display:none; 隱藏

尺寸、溢出、鼠標(biāo)變手型

width:100px;固定寬 min-width:100px;最小寬度 max-width:100px;最大寬度cursor:pointer;鼠標(biāo)變手型 overflow:hidden/visible/scroll/auto;隱藏/顯示/始終出現(xiàn)滾動(dòng)條/需要時(shí)才出現(xiàn)滾動(dòng)條

字體/文本

Font-style:normal/italic(斜體) Font-size:24px; Font-family:宋體/楷體 Font-weight:bold/bolder/lighter Color:字體顏色Line-height:行高 Letter-spacing:字間距 word-spacing:詞間距 Text-decoration:none/underline/overline/line-through;無(wú)修飾/下劃線/上劃線/貫穿線 Text-transform:uppercase/lowercase/capitalize; 大寫(xiě)/小寫(xiě)/首字母大寫(xiě) Text-indent:文本縮進(jìn) Text-align:left/right/center

背景 transparent：透明

Background-color:背景顏色透明 transparent Background-image:背景圖片 Background-repeat:repeat|no-repeat|repeat-x|repeat-y 重復(fù) Background-position:背景位置

邊框

樣式：border-style:solid; 顏色：border-color:red; 寬度：border-width:2px; 簡(jiǎn)寫(xiě)：border:2px solid red;border-top-width:3px; border-top-style:dashed; border-top-color:#000;border-width:2px; 一值(四邊) 兩值(上下左右) 三個(gè)值(上左右下) 四個(gè)值(上右下左)

邊距 Margin、Padding

內(nèi)邊距:當(dāng)前標(biāo)記和當(dāng)前標(biāo)記里的內(nèi)容區(qū)域之間的距離Padding 兩值(上下左右) 三個(gè)值(上左右下) 四個(gè)值(上右下左)Padding-top:Padding-left:Padding-right:Paddding-bottom: 外邊距:當(dāng)前標(biāo)記與該標(biāo)記之外的內(nèi)容的區(qū)域之間的距離Margin

列表

list-style-image; list-style-position; list-style-type：disc/circle/square/decimal/none; list-style：none;取消列表樣式

5. 偽類

a:link{當(dāng)連接被訪問(wèn)之前的樣式} a:visited{當(dāng)連接被訪問(wèn)之后的樣式} a:hover{當(dāng)鼠標(biāo)懸浮在連接之上時(shí)的樣式} a:active{當(dāng)連接點(diǎn)擊與釋放的瞬間的樣式} a:focus{獲得焦點(diǎn)}

3. JavaScript

1. JavaScript 概述

JavaScript 是基于對(duì)象和事件驅(qū)動(dòng)的腳本語(yǔ)言，主要應(yīng)用在客戶端

javascript 是由上到下解析的，瀏覽器會(huì)按照編寫(xiě)的順序執(zhí)行每條語(yǔ)句

JS注釋：// 單行注釋、/**/ 多行注釋

特點(diǎn)：

交互性(它可以做的就是信息的動(dòng)態(tài)交互)

安全性(不允許直接訪問(wèn)本地硬盤(pán))

跨平臺(tái)性(只要是可以解釋 Js 的瀏覽器都可以執(zhí)行，和平臺(tái)無(wú)關(guān))

JavaScript 與 Java 不同

Js 是基于對(duì)象，Java 是面向?qū)ο?/li>

Js 只需解釋就可以執(zhí)行，Java 需要先編譯成字節(jié)碼文件，再執(zhí)行

Js 是弱類型，Java 是強(qiáng)類型

JavaScript 可以做什么？

寫(xiě)入 html 輸出（把 html 標(biāo)簽寫(xiě)入 html 頁(yè)面）

對(duì)事件做出反應(yīng)

改變 html 內(nèi)容

改變 html 圖像

改變 html 樣式

驗(yàn)證輸入

Js 和 HTML 相結(jié)合的方式

將 javascript 代碼封裝到<script>標(biāo)簽中

將 javascript 代碼封裝到 js 文件中，并通過(guò)<script>中的 src 屬性進(jìn)行導(dǎo)入

注意：如果<script>標(biāo)簽中使用 src 屬性，那么該標(biāo)簽中封裝的 javascript 代碼不會(huì)被執(zhí)行，
所以通常導(dǎo)入 js 文件都是用單獨(dú)<script>來(lái)完成。格式：

2. JavaScript 語(yǔ)法

1. 變量

變量的命名規(guī)則：

變量通常以字母開(kāi)頭

變量也能以$和符號(hào)開(kāi)頭（不推薦這么做）

變量名對(duì)大小寫(xiě)敏感（y 和 Y 是兩個(gè)不同的變量）

變量（數(shù)據(jù)類型）：Number、Boolean、String、Object、Array、Object、null、undefined

全局變量：在<script></script>標(biāo)簽中直接聲明的變量
局部變量：在方法中聲明的變量

javascript 擁有動(dòng)態(tài)類型，即是相同的變量可用作不同的類型（弱數(shù)據(jù)類型）,由等號(hào)右邊的值來(lái)決定變量的數(shù)據(jù)類型。

例如: var x; // 此時(shí) x 是 Undefined 數(shù)據(jù)類型。 var x = 6; // x 是數(shù)字類型 var x = "bochy"; // x 是 String 類型

注意：

js 中定義變量，使用 var 關(guān)鍵字

如果把值賦給尚未聲明的變量(沒(méi)用 var 聲明)，該變量將自動(dòng)作為全局變量聲明，即使他在函數(shù)內(nèi)

undefined：未定義，其實(shí)它是一個(gè)常量

typeof ：判斷具體的值的數(shù)據(jù)類型

2. 運(yùn)算符

類型運(yùn)算符

算術(shù)運(yùn)算符	+ - * / % ++ –
賦值運(yùn)算符	= += -= *= /= %=
比較運(yùn)算符	> < >= <= != == ===(全等)
邏輯運(yùn)算符	&&(與) \|\|(或) ! (非)
位運(yùn)算符	& (與) \|(或) ^(異或) >>(右移) <<(左移) >>>(無(wú)符號(hào)右移)
三元運(yùn)算符	? :

3. 語(yǔ)句

順序結(jié)構(gòu)

判斷結(jié)構(gòu)：if-else

選擇結(jié)構(gòu)：switch

循環(huán)結(jié)構(gòu)：for、while、do_while、for…in(用于數(shù)組或者對(duì)象)

for(var 新變量 in 循環(huán)的變量){ //要執(zhí)行的循環(huán)語(yǔ)句 }

特有語(yǔ)句：with

異常語(yǔ)句：try/catch、throw

try{if(條件) throw "可能出現(xiàn)異常的代碼塊的具體異常"; }catch(e){ //處理異常的代碼 }

4. 對(duì)象

常用對(duì)象有：String、Array、Date、Math、Number、Global、自定義對(duì)象

Number 對(duì)象：javascript 只有一種數(shù)字類型，數(shù)字可以帶小數(shù)點(diǎn)，也可以不帶

定義方法

var a1 = 12; var a2 = 12.2; var a3 = new Number(12);

Boolean 對(duì)象

定義方法

var b1 = new Boolean(); // 默認(rèn)為false var b2 = new Boolean(true); //true var b3 = true;

String 對(duì)象

定義方法

var str1 = "hello"; var str2 = new String("hello"); var str3 = new String(); str3 = "hello";

屬性（constructor、length、prototype 原型屬性）

var str = "www.bochy.COM.cn"; var len = str.length;

方法（toString、valueOf）

toUpperCase(); // 轉(zhuǎn)成大寫(xiě) toLowerCase(); // 轉(zhuǎn)成小寫(xiě) charAt(index); // 下標(biāo)處的字符 indexOf("o"); // 首次出現(xiàn)的下標(biāo) substr(start,length); // 從start處截取length長(zhǎng)度的字串 substring(start,end); // 截取字串 [start,end) split("."); // 分割 valueOf(var) // 轉(zhuǎn)為字符串對(duì)象 test("正則表達(dá)式字符串"); // 使用正則表達(dá)式進(jìn)行校驗(yàn)

Array 對(duì)象

特點(diǎn)：1.長(zhǎng)度是可變的 2.元素類型是任意的，建議存儲(chǔ)同一類型的元素，操作起來(lái)比較方便

定義方法

var arr1 = new Array(); // 相當(dāng)于 Var arr = [] arr1[0] = "a1"; var arr2 = new Array(12,13,14,15); var arr3 = [12,13,14,15];

屬性（constructor、length、prototype）

方法

contact(); // 連接 join(); // 加入 pop(); // 刪除最后一個(gè) shift(); // 刪除第一個(gè) push(); // 添加 splice(); // 刪除并替換 unshift(); // 插入第一個(gè)

Object 對(duì)象

定義方法

var per1 = {"name":"李四","age":22}; var per2 = new Object(); per2.name = "張三"; //設(shè)置對(duì)象的屬性和值 per2.age = 20;

Date 對(duì)象

var d = new Date(); var year = d.getFullYear(); // 獲取年 var month = d.getMonth()+1; // 獲取月份 var date = d.getDate(); // 獲取日期 var hour = d.getHours(); // 獲取小時(shí) var minute = d.getMinutes(); // 獲取分鐘 var second = d.getSeconds(); // 獲取秒數(shù) var day = d.getDay(); // 獲取星期值 var ms = d.getMilliseconds(); // 獲取毫秒

Math 對(duì)象

Math 對(duì)象不能用 new 關(guān)鍵字創(chuàng)建，如果試圖這樣做會(huì)給出錯(cuò)誤。

該對(duì)象在裝載腳本引擎時(shí)，由該引擎創(chuàng)建。其方法和屬性在腳本中總是可用

ceil(); // 返回大于等于其數(shù)字參數(shù)的最小整數(shù)。 floor(); // 返回小于等于其數(shù)值參數(shù)的最大整數(shù)。 max();min(); // 求最大值，最小值 random(); // 隨機(jī)數(shù), [0,1)

Global 對(duì)象

方法

isNaN(); // 是否非法

自定義對(duì)象

5. 函數(shù)

分類：一般函數(shù)、匿名函數(shù)、動(dòng)態(tài)函數(shù)

函數(shù)：就是一個(gè)功能的封裝體

一般函數(shù)格式

function 函數(shù)名(參數(shù)列表){// 函數(shù)體：return 返回值; //如果沒(méi)有具體的返回值，return 語(yǔ)句可以省略不寫(xiě)。 }

函數(shù)細(xì)節(jié)：

只要使用函數(shù)名就是對(duì)函數(shù)的調(diào)用

函數(shù)中有一個(gè)數(shù)組arguments在對(duì)傳入的參數(shù)進(jìn)行存儲(chǔ)

動(dòng)態(tài)函數(shù)

動(dòng)態(tài)函數(shù)：使用 js 中的內(nèi)置對(duì)象 Function，用的不是很多。參數(shù)列表，函數(shù)體都是通過(guò)字符串動(dòng)態(tài)指定的

var add = new Function("x,y","var sum; sum=x+y; return sum;"); // 參數(shù)列表，函數(shù)體

匿名函數(shù)

匿名函數(shù)：沒(méi)有名字的函數(shù)，函數(shù)的簡(jiǎn)寫(xiě)形式

var add3 = function (a,b){return a+b;}

6. 事件

常用事件

onblur="" // 失去焦點(diǎn) onfocus="" // 獲取焦點(diǎn) onchange="" // 域的內(nèi)容被改變 onsubmit="" // 提交按鈕事件 onclick="" // 單擊事件 onmousemove="" // 進(jìn)入某個(gè)元素移動(dòng) onmouseover="" // 鼠標(biāo)懸停 onmousedown="" // 鼠標(biāo)按下 onmouseup="" // 鼠標(biāo)松開(kāi) onmouseout="" // 鼠標(biāo)移出某個(gè)元素

表單的屬性

類型屬性

文本	readonly=“readonly” 只讀
復(fù)選框/單選框	checked 是否選中 value 屬性值
下拉列表	value：獲取值 options：所有的值 selectedIndex：返回被選擇的選項(xiàng)的索引號(hào)，選中第一個(gè)返回 0，第二個(gè)返回 1

事件簡(jiǎn)單應(yīng)用

復(fù)選框

function func_checkbox(){var myform = document.forms["myform"]; // 通過(guò)表單的name獲得表單form對(duì)象var loves = myform.loves; // 通過(guò)form對(duì)象獲得loves屬性,返回的是數(shù)組alter(loves.length); // 使用彈窗，輸出數(shù)組的長(zhǎng)度 }

單選框

function func_radio(){var myform = document.forms["myform"]; // 通過(guò)表單的name獲得表單form對(duì)象var sex_value = myform.sex.value;// 通過(guò)form對(duì)象獲得被選中sex屬性值,返回的是字符串alter(sex_value); // 使用彈窗，輸出屬性值 }

7. JS 的 DOM 操作

document 是 html 文本對(duì)象

常用 DOM 操作

var img =document.getElementById("id 名"); // 根據(jù) id 獲取 html 節(jié)點(diǎn) var img =document.getElementsByName("屬性的name值"); // 根據(jù) name 獲取 html 節(jié)點(diǎn) var img =document.getElementsByTagName("標(biāo)簽名"); // 根據(jù)標(biāo)簽名獲取 html 節(jié)點(diǎn) document.getElementById("id 名").value; // 獲得 id 標(biāo)簽的值 document.getElementById("id 名").innerHTML; // 將內(nèi)容寫(xiě)入到 id 標(biāo)簽中 document.write("hello"); // 將 hello 寫(xiě)入到 html 頁(yè)面img.setAttribute("屬性名","屬性值");// 設(shè)置某個(gè)屬性的值 img.getAttribute("屬性名"); // 獲取某個(gè)屬性的值var p = document.createElement("p"); // 創(chuàng)建元素節(jié)點(diǎn) var m = document.createTextNode("段落里面的內(nèi)容"); // 創(chuàng)建文本內(nèi)容 p.appendChild(m); // 把文本內(nèi)容放到 p 標(biāo)簽中 p.removeChild(p1); // 刪除 p 的子節(jié)點(diǎn) document.body.appendChild(p); // 將 p 標(biāo)簽放入文檔中

使用 HTML DOM 來(lái)分配事件

window.onload=function(){document.getElementById("username").onfocus=function(){alert("請(qǐng)輸入名字");} }

8. JS 的 BOM 操作

瀏覽器對(duì)應(yīng)的對(duì)象就是 window 對(duì)象，內(nèi)置對(duì)象直接使用

window 對(duì)象的屬性

document 文檔對(duì)象（每個(gè)載入瀏覽器的 html 文檔都會(huì)成為 document 對(duì)象）

document.write("hello"); // 將 hello 寫(xiě)入到 html 頁(yè)面

location 地址對(duì)象（包含當(dāng)前 url）

window.location.herf = "url";

history 歷史對(duì)象（包含客戶訪問(wèn)過(guò)的 url 信息）

window.history.back(); // 退回到上一步

window 對(duì)象的方法

alert(); // 警告提示框 confirm(); // 選擇提示框 prompt(); // 輸入提示框 onload //加載就緒var ID = setInterval("函數(shù)名()",周期毫秒值); // 周期性 clearInterval(setInterval()返回的ID值); // 跳出周期性函數(shù) setTimeout,clearTimeout

3. BOM

BOM(Browser Object Model)： 瀏覽器對(duì)象模型，用于操作瀏覽器

瀏覽器對(duì)應(yīng)的對(duì)象就是 window 對(duì)象，可通過(guò)查閱 dhtml api 獲得

Window 對(duì)象常用方法：

alert(); // 彈窗 confirm(); // 彈窗確認(rèn) setTimeOut(); // 超時(shí)事件 setInterval(); clearInterval();

常用對(duì)象：

Location 對(duì)象

Document 對(duì)象

4. DOM

DOM(Document Object Model)：文檔對(duì)象模型，用來(lái)將標(biāo)記型文檔封裝成對(duì)象，并將標(biāo)記型文檔中的所有的內(nèi)容(標(biāo)簽，文本，屬性等)都封裝成對(duì)象。

封裝成對(duì)象的目的：是為了更加方便操作這些文檔以及文檔中的所有內(nèi)容。因?yàn)閷?duì)象的出現(xiàn)就可以有屬性和行為可被調(diào)用
常見(jiàn)的標(biāo)記型文檔：html xml

1. DOM 解析

只要是標(biāo)記型文檔，DOM 這種技術(shù)都可以對(duì)其進(jìn)行操作

要操作標(biāo)記型文檔必須對(duì)其進(jìn)行解析

解析方式：

DOM 解析方式

將標(biāo)記型文檔解析一棵 DOM 樹(shù)，并將樹(shù)中的內(nèi)容都封裝成節(jié)點(diǎn)對(duì)象

優(yōu)缺點(diǎn)：

優(yōu)點(diǎn)：可以對(duì)樹(shù)中的節(jié)點(diǎn)進(jìn)行任意操作，比如：增刪改查

缺點(diǎn)：要將整個(gè)標(biāo)記型文檔加載進(jìn)內(nèi)存，意味著若標(biāo)記型文檔的體積很大，較為浪費(fèi)內(nèi)存空間

SAX 解析方式

SAX：基于事件驅(qū)動(dòng)的解析

SAX 是由一些民間組織定義的解析方式，并不是 w3c 標(biāo)準(zhǔn)，而 DOM 是 W3C 的標(biāo)準(zhǔn)

優(yōu)缺點(diǎn)：獲取數(shù)據(jù)的速度很快，但是不能對(duì)標(biāo)記進(jìn)行增刪改。

2. DHTML

DHTML：動(dòng)態(tài)的 HTML，不是一門語(yǔ)言，是多項(xiàng)技術(shù)綜合體的簡(jiǎn)稱

DHTML中包含了 HTML，CSS，DOM，Javascript

HTML：負(fù)責(zé)提供標(biāo)簽，對(duì)數(shù)據(jù)進(jìn)行封裝，目的是便于對(duì)該標(biāo)簽中的數(shù)據(jù)進(jìn)行操作。

簡(jiǎn)單說(shuō)：用標(biāo)簽封裝數(shù)據(jù)。

CSS：負(fù)責(zé)提供樣式屬性，對(duì)標(biāo)簽中的數(shù)據(jù)進(jìn)行樣式的定義。

簡(jiǎn)單說(shuō)：對(duì)數(shù)據(jù)進(jìn)行樣式定義

DOM：負(fù)責(zé)將標(biāo)簽型文檔及文檔中的所有內(nèi)容進(jìn)行解析，并封裝成對(duì)象，在對(duì)象中定義了更多的屬性和行為，便于對(duì)對(duì)象操作。

簡(jiǎn)單說(shuō)：將文檔和標(biāo)簽以及其他內(nèi)容變成對(duì)象。

JS：負(fù)責(zé)提供程序設(shè)計(jì)語(yǔ)言，對(duì)頁(yè)面中的對(duì)象進(jìn)行邏輯操作。

簡(jiǎn)單說(shuō)：負(fù)責(zé)頁(yè)面的行為定義。就是頁(yè)面的動(dòng)態(tài)效果。

所以 javascript 是動(dòng)態(tài)效果的主力編程語(yǔ)言。

AJAX = DHTML + XMLhttpRequest

5. 正則表達(dá)式

常用的正則表達(dá)式:（/^是開(kāi)始標(biāo)記，$/是結(jié)束標(biāo)記）

1. 驗(yàn)證郵箱： /^[_a-z0-9]+@([_a-z0-9]+\.)+[a-z0-9]{2,3}$/ 2. 驗(yàn)證 IP 地址： /^(\d+)\.(\d+)\.(\d+)\.(\d+)$/g 注：g 只是正則選項(xiàng)，不屬于匹配內(nèi)容 3. 驗(yàn)證手機(jī)號(hào)碼： /^[1][3][0-9]{9}$/ 4. 驗(yàn)證帶區(qū)號(hào)的電話號(hào)碼: /^[0][1-9]{2,3}-[0-9]{5,10}$/ 5. 驗(yàn)證不帶區(qū)號(hào)的電話號(hào)碼: /^[1-9]{1}[0-9]{5,8}$/ 6. 驗(yàn)證是否是整數(shù): /^[-]{0,1}[0-9]{1,}$/ 7. 檢查輸入字符串是否是帶小數(shù)的數(shù)字格式,可以是負(fù)數(shù): /^[-]{0,1}(\d+)[\.]+(\d+)$/ 8. 檢查輸入字符串是否只由英文字母和數(shù)字和下劃線組成: /^[0-9a-zA-Z\_]+$/ 9. 驗(yàn)證年齡: /^[0-9]{1,3}$/ 10. 驗(yàn)證數(shù)字: /^\d*\.?\d+$/

簡(jiǎn)單應(yīng)用：

4. JQuery

1. JQuery 簡(jiǎn)介

JQuery 是一個(gè) JavaScript 的函數(shù)庫(kù)

JQuery 函數(shù)庫(kù)包含哪些特性？

html 元素選取

html 元素操作

css 操作（獲取和修改）

html 事件操作（各種事件，在 JQuery 里面做了封裝）

html DOM 操作

ajax

2. JQuery 語(yǔ)法

JQuery 語(yǔ)法是為 html 元素選取編制，可以對(duì)元素執(zhí)行某些操作

基礎(chǔ)語(yǔ)法：$：表示 JQuery

$(selector).action(); // selector 是選擇器，action 是動(dòng)作

文檔就緒函數(shù)：

作用：為了防止文檔在未完全加載之前運(yùn)行 JQuery 代碼

$(document).ready(function(){//JQuery 代碼 });簡(jiǎn)寫(xiě)形式： $((function(){//JQuery 代碼 });

JQuery 是為事件處理特別設(shè)計(jì)的函數(shù)庫(kù)，當(dāng)你遵循以下原則時(shí)，你寫(xiě)的代碼會(huì)更恰當(dāng)且更易于維護(hù)：

把所有的 jquery 代碼置于事件處理函數(shù)中

把所有事件處理函數(shù)都置于文檔就緒函數(shù)中

把 jquery 代碼置于單獨(dú)的 js 文件中

3. JQuery 選擇器

在 HTML DOM 中允許對(duì) DOM 元素組或者單個(gè)節(jié)點(diǎn)進(jìn)行操作，而在 JQuery 中有很多選擇器

元素選擇器

$("p"); // 選擇<p>元素 $("p.intro"); // 選取所有 class="intro"的所有 p 元素 $("p#demo"); // 選取 id="demo"的第一個(gè) p 元素

屬性選擇器

$("[href]"); // 選取所有帶有 href 屬性的元素 $("[href='#']"); // 選取所有帶有 href 屬性且 href 的值等于#的元素 $("[href!='#']"); // 選取所有帶有 href 屬性且 href 的值不等于#的元素 $("[href$='.jpg']"); // 選取所有 href 值以.jpg 結(jié)尾的元素

4. 事件/效果/CSS 函數(shù)

JQuery 事件

$(document).ready(function(){}); // 文檔的就緒事件 $(selector).click(function(){}); // 被選元素的單擊事件 $(selector).dblclick(function(){}); // 被選元素的雙擊事件 $(selector).focus(function(){}); // 被選元素的獲取焦點(diǎn)事件 $(selector).mouseover(function(){}); // 被選元素的鼠標(biāo)懸停事件

JQuery 效果

$(selector).hide(); // 隱藏被選元素 $(selector).show(); // 顯示被選元素 $(selector).toggle(); // 切換（在隱藏與顯示之間）被選元素 $(selector).slideDown(); // 向下滑動(dòng)（顯示）被選元素 $(selector).slideUp(); // 向上滑動(dòng)（隱藏）被選元素 $(selector).slideToggle(); // 切換（在隱藏與顯示之間）被選元素 $(selector).fadeIn(); // 淡入被選元素 $(selector).fadeOut(); // 淡出被選元素 $(selector).fadeToggle(); // 切換

JQuery CSS 函數(shù)

$(selector).css(name,value); // 為所有匹配元素的給定 css 屬性設(shè)置值。 $(selector).css(properties); // 為所有匹配元素的一系列 css 屬性設(shè)置值。 $(selector).css(name); // 返回指定的 css 的值 $(selector).width([val]); // 獲取/設(shè)置所有匹配元素的寬度 $(selector).height([val]); // 獲取/設(shè)置所有匹配元素的高度

5. JQuery 的 DOM 操作

類（Class 選擇器的 css 樣式）

addClass(類名); // 向匹配的元素添加指定的類名 removeClass(類名); // 刪除匹配元素的類 toggleClass(類名); // 沒(méi)有就添加類，有就刪除類

屬性

attr(); // 設(shè)置/獲取屬性 removeAttr(要?jiǎng)h除的屬性名); // 刪除匹配元素某一個(gè)屬性

內(nèi)容

append(); // 向匹配的元素內(nèi)部添加內(nèi)容 after(); // 向匹配的元素之后添加內(nèi)容 before(); // 向匹配的元素之前添加內(nèi)容

其他

remove(); // 刪除所有匹配的元素 html(); // 取得第一個(gè)匹配元素的 html 內(nèi)容 text(); // 取得所有匹配元素的內(nèi)容.結(jié)果是由所有匹配元素包含的文本內(nèi)容組合起來(lái)的文本 val(); // 獲取匹配元素的當(dāng)前值 empty(); // 刪除匹配的元素集合中所有的子節(jié)點(diǎn)。(包括文本節(jié)點(diǎn))

5. Ajax 異步交互

1. Ajax 概述

Ajax：不用刷新整個(gè)頁(yè)面便可與服務(wù)器通訊的辦法

傳統(tǒng) Web 與 Ajax 的差異

差異傳統(tǒng) WebAjax

發(fā)送請(qǐng)求方式	提交表單方式發(fā)送請(qǐng)求	異步引擎對(duì)象發(fā)送請(qǐng)求
服務(wù)器響應(yīng)	響應(yīng)內(nèi)容是一個(gè)完整頁(yè)面	響應(yīng)內(nèi)容只是需要的數(shù)據(jù)
客服端處理方式	需等待服務(wù)器響應(yīng)完成，并重新加載整個(gè)頁(yè)面后，用戶才能進(jìn)行操作	可以動(dòng)態(tài)更新頁(yè)面中的部分內(nèi)容，用戶可以不需等待請(qǐng)求的響應(yīng)

Ajax 執(zhí)行過(guò)程

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來(lái)直接上傳(img-EGnpELXS-1648561406717)(link-picture\image-20220114145756983.png)]

2. XMLHttpRequest 對(duì)象

XMLHttpRequest：Ajax 的核心對(duì)象

該對(duì)象是對(duì) JavaScript 的一個(gè)擴(kuò)展，可使網(wǎng)頁(yè)與服務(wù)器進(jìn)行通信，是創(chuàng)建 Ajax 應(yīng)用的最佳選擇。實(shí)際上通常把 Ajax 當(dāng)成 XMLHttpRequest 對(duì)象的代名詞

XMLHttpRequest 對(duì)象

XMLHttpRequest 的常用方法

// method為GET/POST,url為相對(duì)URL或絕對(duì)URL。第3個(gè)是可選參數(shù) open(“method”,”url”，...); // 建立對(duì)服務(wù)器的調(diào)用 send(content); // 向服務(wù)器發(fā)送請(qǐng)求 setRequestHeader("label", "value");// 設(shè)置請(qǐng)求頭的值，設(shè)置任何頭部之前必須先調(diào)用 open()

XMLHttpRequest 的常用屬性

onreadystatechange：事件處理函數(shù)

該事件處理函數(shù)由 ajax 框架觸發(fā)，而不是用戶在 Ajax 執(zhí)行過(guò)程中觸發(fā)，

觸發(fā)后，服務(wù)器會(huì)通知客戶端當(dāng)前的通信狀態(tài)，

這依靠更新 XMLHttpRequest 對(duì)象的 readyState 來(lái)實(shí)現(xiàn)。改變 readyState 屬性是服務(wù)器對(duì)客戶端連接操作的一種方式。

每次 readyState 屬性的改變都會(huì)觸發(fā) onreadystatechange 事件。

readyState：表示 Ajax 當(dāng)前的請(qǐng)求狀態(tài)

它的值用數(shù)字代表：

readyState 值含義

0	代表未初始化，還沒(méi)有調(diào)用 open 方法
1	代表正在加載，open 方法已被調(diào)用，但 send 方法還沒(méi)有被調(diào)用
2	代表已加載完畢，send 已被調(diào)用，請(qǐng)求已經(jīng)開(kāi)始
3	代表交互中，服務(wù)器正在發(fā)送響應(yīng)
4	代表響應(yīng)完成，響應(yīng)發(fā)送完畢

每次 readyState 值的改變，都會(huì)觸發(fā) onreadystatechange 事件。如果把 onreadystatechange 事件處理函數(shù)賦給一個(gè)函數(shù)，那么每次 readyState 值的改變都會(huì)引發(fā)該函數(shù)的執(zhí)行。readyState 值的變化會(huì)因?yàn)g覽器的不同而有所差異。但是，當(dāng)請(qǐng)求結(jié)束的時(shí)候，每個(gè)瀏覽器都會(huì)把 readyState 的值統(tǒng)一設(shè)為 4。

Status：狀態(tài)碼

服務(wù)器發(fā)送的每一個(gè)響應(yīng)也都帶有頭部信息。三位數(shù)的狀態(tài)碼是服務(wù)器發(fā)送的響應(yīng)中最重要的頭部信息，并且屬于超文本傳輸協(xié)議中的一部分。常用狀態(tài)碼及其含義：

狀態(tài)碼含義

200	一切正常(ok)
304	沒(méi)有被修改（服務(wù)器返回 304 狀態(tài)，表示源文件沒(méi)有被修改）
400	錯(cuò)誤請(qǐng)求，如語(yǔ)法錯(cuò)誤
403	禁止訪問(wèn)(forbidden)
404	沒(méi)找到頁(yè)面(not found)
500	內(nèi)部服務(wù)器出錯(cuò)(internal service error)

在 XMLHttpRequest 對(duì)象中，服務(wù)器發(fā)送的狀態(tài)碼都保存在 status 屬性里。通過(guò)把這個(gè)值和 200 或 304 比較，可以確保服務(wù)器是否已發(fā)送了一個(gè)成功的響應(yīng)。

statusText：返回當(dāng)前請(qǐng)求的響應(yīng)狀態(tài)

服務(wù)器的響應(yīng)內(nèi)容

responseText：從服務(wù)器返回的普通文本數(shù)據(jù)

responseXML：從服務(wù)器返回的是 XML。MIME 類型必須為 text/xml

它是一個(gè) HTML，XML 或普通文本，這取決于服務(wù)器發(fā)送的響應(yīng)內(nèi)容。

注意：

只有Ajax 的請(qǐng)求狀態(tài) readyState 值為 4 時(shí), responseText/responseXML 屬性才可用，表明 Ajax 請(qǐng)求已經(jīng)結(jié)束。

只有服務(wù)器發(fā)送了帶有正確頭部信息的數(shù)據(jù)(Status=200)時(shí)，responseText/responseXML 屬性才是可用的。

3. JavaScript 的 Ajax 異步交互

瀏覽器端

<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>JavaScript 的 Ajax 請(qǐng)求</title></head><body><label>用戶名:</label><input name="userName" id="userName" onblur="checkUserExist()"/><label id="NameMsg"></label><script type="text/javascript">var xmlHttpRequest; // 定義 XMLHttpRequest 對(duì)象function createXmlHttpRequest() { // 建立 XMLHttpRequest()對(duì)象if (window.ActiveXObject) { // 解決瀏覽器的兼容問(wèn)題return new ActiveXObject("Microsoft.XMLHTTP");} else if (window.XMLHttpRequest) {return new XMLHttpRequest();}}function checkUserExist(){ //發(fā)起 ajax 請(qǐng)求var userName = document.getElementById('userName');var NameMsg = document.getElementById('NameMsg');if(userName.value == null || userName.value == ''){NameMsg.innerHTML = '用戶名不能為空';userName.focus();return;}else{NameMsg.innerHTML = '';} // encodeURIComponent 是JQuery的方法var param = 'userName='+ encodeURIComponent(userName.value);var url = '${pageContext.request.contextPath}/servlet/UserServlet';// 1.創(chuàng)建 xmlhttprequest 對(duì)象xmlHttpRequest = createXmlHttpRequest(); // 2.設(shè)置回調(diào)函數(shù)xmlHttpRequest.onreadystatechange=callback;// 3.建立連接 openxmlHttpRequest.open('POST', url); // 4.設(shè)置請(qǐng)求頭xmlHttpRequest.setRequestHeader('Content-Type', "application/x-www-form-urlencoded");// 5.發(fā)送請(qǐng)求 sendxmlHttpRequest.send(param); }//處理 ajax 請(qǐng)求的結(jié)果function callback(){ if(xmlHttpRequest.readyState == 4){ //完成if(xmlHttpRequest.status == 200){ //成功var result = xmlHttpRequest.responseText; //響應(yīng)的返回值var NameMsg = document.getElementById('NameMsg');if("true" == result){ // 被占用NameMsg.innerHTML = '用戶名被占用';}else{NameMsg.innerHTML = '用戶名可用';}}}}</script></body> </html>

服務(wù)器端

獲取瀏覽器端發(fā)過(guò)來(lái)的參數(shù)并作出響應(yīng)

public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {String userName = request.getParameter("userName"); //參數(shù)是寫(xiě)在 uri 中的if(userName != null){//uri 默認(rèn)的編碼方式是 ISO8859-1userName = new String(userName.getBytes("ISO8859-1"),"UTF-8");}System.out.println(userName);response.setContentType("text/html;charset=utf-8");PrintWriter out = response.getWriter();if("jacky".equals(userName) || "張三".equals(userName)){out.print("true");}else{out.print("false");}out.flush();out.close(); }

4. JQuery 的 Ajax 異步交互

傳統(tǒng)方式 JavaScript 實(shí)現(xiàn) Ajax 的不足

方法、屬性、常用值較多，不易記憶

實(shí)現(xiàn)步驟繁瑣

還有瀏覽器兼容問(wèn)題

1. JQuery 的 Ajax

語(yǔ)法：

$.ajax([參數(shù)]);

常用參數(shù)

屬性名說(shuō)明

String url	發(fā)送請(qǐng)求的地址，默認(rèn)為當(dāng)前頁(yè)面地址
String type	請(qǐng)求方式：POST/POST，默認(rèn)GET
String headers	請(qǐng)求頭
String accepts	通過(guò)請(qǐng)求頭發(fā)送給服務(wù)器，告訴服務(wù)器當(dāng)前客戶端可接受的數(shù)據(jù)類型
String data或Object data	發(fā)送到服務(wù)器的數(shù)據(jù)
String contentType	發(fā)送信息至服務(wù)器的內(nèi)容編碼類型，默認(rèn)： “application/x-www-form-urlencoded; charset=UTF-8”
String dataType	將服務(wù)器端返回的數(shù)據(jù)轉(zhuǎn)換成指定類型，包括XML、HTML、Script、JSON、JSONP、text
Boolean async	是否異步，默認(rèn)為true
Boolean global	是否觸發(fā)全局Ajax事件，默認(rèn)為true
Number timeout	設(shè)置請(qǐng)求超時(shí)時(shí)間
function beforeSend(XMLHttpRequest xhr)	發(fā)送請(qǐng)求前的回調(diào)函數(shù)，參數(shù)可選
function complete(XMLHttpRequest xhr,String st)	請(qǐng)求完成后的回調(diào)函數(shù)，參數(shù)可選
function success(Object result,String st)	請(qǐng)求成功后的回調(diào)函數(shù)，參數(shù)可選
function error(XMLHttpRequest xhr,String st,Exception e)	請(qǐng)求失敗時(shí)的回調(diào)函數(shù)，參數(shù)可選

服務(wù)器端返回?cái)?shù)據(jù)后轉(zhuǎn)換類型（contentType）：

轉(zhuǎn)換后類型含義

xml	將服務(wù)器端返回的內(nèi)容轉(zhuǎn)換成 xml 格式
text	將服務(wù)器端返回的內(nèi)容轉(zhuǎn)換成普通文本格式
html	將服務(wù)器端返回的內(nèi)容轉(zhuǎn)換成普通文本格式，在插入 DOM 中時(shí)，如果包含 JavaScript 標(biāo)簽，則會(huì)嘗試去執(zhí)行
script	嘗試將返回值當(dāng)作 JavaScript 去執(zhí)行，然后再將服務(wù)器端返回的內(nèi)容轉(zhuǎn)換成普通文本格式
json	將服務(wù)器端返回的內(nèi)容轉(zhuǎn)換成相應(yīng)的 JavaScript 對(duì)象
jsonp	JSONP 格式使用 JSONP 形式調(diào)用函數(shù)時(shí)，如 “myurl?callback=?” ，jQuery 將自動(dòng)替換 ? 為正確的函數(shù)名，以執(zhí)行回調(diào)函數(shù)

常用方法

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

ajax：get、post都可以用 ajax 代替

$.ajax(url:url,type:"get", //1.9.0之后用methoddata:data,dataType:"txt",success:function(result){},error:function(){} );

load：加載函數(shù) 可用 get 代替

$("#nameDiv").load(url,data);等價(jià)于 $.get(url,data,function(result){$("#nameDiv").html(result); }) 等價(jià)于 $.ajax(url:url,type:"get",data:data,dataType:"txt",success:function(result){// 處理服務(wù)器返回來(lái)的數(shù)據(jù)} );

getJSON：可用 ajax 代替

$.getJSON(url,data,success(result){// 處理服務(wù)器返回來(lái)的數(shù)據(jù) });等價(jià)于 $.ajax(url:url,type:"get",data:data,dataType:"json",success:function(result){// 處理服務(wù)器返回來(lái)的數(shù)據(jù)} );

5. JSON 的 Ajax 異步交互

客服端的 JSON 的使用

客服端使用 JQuery 的 getJSON() 方法發(fā)起請(qǐng)求

$.getJSON(url,data,success(result){// 處理服務(wù)器返回來(lái)的數(shù)據(jù) });

服務(wù)端的 JSON 的使用

服務(wù)端使用 json-lib 類庫(kù)，將要返回的數(shù)據(jù)轉(zhuǎn)換成 JSON，或者反向轉(zhuǎn)換。

json-lib：是一個(gè) java 類庫(kù)，提供將 Java 對(duì)象(包括 bean,map,collection,array,XML等)轉(zhuǎn)換成 JSON，或者反向轉(zhuǎn)換的功能。

使用 json-lib ，執(zhí)行環(huán)境需要其他類庫(kù)支持

ajax 代替`

~~~js$.ajax(url:url,type:"get", //1.9.0之后用methoddata:data,dataType:"txt",success:function(result){},error:function(){});~~~

load：加載函數(shù) 可用 get 代替

getJSON：可用 ajax 代替

5. JSON 的 Ajax 異步交互

客服端的 JSON 的使用

客服端使用 JQuery 的 getJSON() 方法發(fā)起請(qǐng)求

$.getJSON(url,data,success(result){// 處理服務(wù)器返回來(lái)的數(shù)據(jù) });

服務(wù)端的 JSON 的使用

服務(wù)端使用 json-lib 類庫(kù)，將要返回的數(shù)據(jù)轉(zhuǎn)換成 JSON，或者反向轉(zhuǎn)換。

json-lib：是一個(gè) java 類庫(kù)，提供將 Java 對(duì)象(包括 bean,map,collection,array,XML等)轉(zhuǎn)換成 JSON，或者反向轉(zhuǎn)換的功能。

使用 json-lib ，執(zhí)行環(huán)境需要其他類庫(kù)支持

總結(jié)

以上是生活随笔為你收集整理的前端基础之Html、CSS、JavaScript、JQuery、Ajax的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇：下载安装SQL server2008的步
下一篇： gradle idea java ssm