我們有了html超文本標(biāo)記語(yǔ)言實(shí)現(xiàn)了網(wǎng)站頁(yè)面展現(xiàn)，展現(xiàn)文字、表格、圖片、超鏈接等，有了css樣式表實(shí)現(xiàn)了頁(yè)面的美化，這些技術(shù)實(shí)現(xiàn)了靜態(tài)網(wǎng)頁(yè)。
日常展現(xiàn)是已經(jīng)足夠了，但是如果我們要做個(gè)注冊(cè)功能呢？如論壇，我們注冊(cè)個(gè)論壇來(lái)發(fā)文章，聊天。這就帶來(lái)一個(gè)問題，信息如何根據(jù)不同的使用者，展現(xiàn)不同的內(nèi)容呢？再如我注冊(cè)登錄和你注冊(cè)登錄，我們?cè)诰W(wǎng)站上顯示的登錄名稱就不同。這html+css就無(wú)能為力了，它們無(wú)法實(shí)現(xiàn)，那誰(shuí)能辦到呢？這時(shí)javascript就派上用場(chǎng)了。它能實(shí)現(xiàn)瀏覽器用戶和后臺(tái)服務(wù)器進(jìn)行交互。注冊(cè)、登錄、添加商品到購(gòu)物車、下訂單對(duì)它而言都是小菜一碟。有了javascript的加入，實(shí)現(xiàn)頁(yè)面和后臺(tái)系統(tǒng)的交互，實(shí)現(xiàn)用戶信息的注冊(cè)，實(shí)現(xiàn)用戶的登錄，實(shí)現(xiàn)個(gè)性化的數(shù)據(jù)展現(xiàn)，功能強(qiáng)大不老少。業(yè)界把這樣的網(wǎng)頁(yè)稱為動(dòng)態(tài)網(wǎng)頁(yè)，把這樣的網(wǎng)站稱為動(dòng)態(tài)網(wǎng)站。
簡(jiǎn)而言之，靜態(tài)網(wǎng)站只能看，不同瀏覽者看到內(nèi)容一致不能變化；動(dòng)態(tài)網(wǎng)站可以讀寫數(shù)據(jù)，內(nèi)容根據(jù)不同瀏覽者展示不同的信息。
動(dòng)態(tài)網(wǎng)站的軟件架構(gòu)是怎樣的呢？
用戶訪問頁(yè)面，頁(yè)面觸發(fā)事件創(chuàng)建XHR對(duì)象，進(jìn)行ajax請(qǐng)求，請(qǐng)求訪問服務(wù)器端，請(qǐng)求被web中間件攔截并進(jìn)行處理，由控制層框架springmvc中的controller進(jìn)行接收，controller請(qǐng)求業(yè)務(wù)層spring框架的service服務(wù)，service請(qǐng)求持久層mybatis框架的mapper映射，mapper訪問數(shù)據(jù)庫(kù)。操作完數(shù)據(jù)庫(kù)，返回結(jié)果，mybatis封裝成java對(duì)象傳回service，service把java對(duì)象傳回controller，controller把java對(duì)象又轉(zhuǎn)換為json字符串，然后傳回瀏覽器，瀏覽器傳回給調(diào)用者XHR，XHR調(diào)用回調(diào)方法callback，callback進(jìn)行json字符串的解析，從中拿到要展現(xiàn)的數(shù)據(jù)，通過javascript處理，最終回顯到頁(yè)面上。
可以看到這個(gè)調(diào)用過程是非常復(fù)雜的，跨越網(wǎng)絡(luò)，跨域多個(gè)服務(wù)器，很多技術(shù)應(yīng)用其中，而這一切的始作俑者是誰(shuí)呢？誰(shuí)讓這一切成為可能，它就是javascript，它實(shí)現(xiàn)了用戶的請(qǐng)求和響應(yīng)，實(shí)現(xiàn)了數(shù)據(jù)的動(dòng)態(tài)展現(xiàn)，使早期靜態(tài)的網(wǎng)站走向了動(dòng)態(tài)的網(wǎng)站。
JavaScript 是 web 前端開發(fā)者必學(xué)的三種語(yǔ)言之一：
JavaScript在1995年由Netscape公司的Brendan Eich，在網(wǎng)景導(dǎo)航者瀏覽器上首次設(shè)計(jì)實(shí)現(xiàn)而成。因?yàn)镹etscape與Sun合作，Netscape管理層希望它外觀看起來(lái)像Java，因此取名為JavaScript。但實(shí)際上它們根本沒有關(guān)系，java是強(qiáng)語(yǔ)言幾乎無(wú)所不能，而javascript是腳本語(yǔ)言，只局限于瀏覽器。
JavaScript遵循ECMA國(guó)際組織頒布的ECMAScript標(biāo)準(zhǔn)。截至 2012 年，所有瀏覽器都完整的支持ECMAScript 5.1，舊版本的瀏覽器至少支持ECMAScript 3 標(biāo)準(zhǔn)。2015年6月17日，ECMA國(guó)際組織發(fā)布了ECMAScript 的第六版，簡(jiǎn)稱為ES6。它的目標(biāo)是使得JavaScript語(yǔ)言可以用來(lái)編寫復(fù)雜的大型應(yīng)用程序，成為企業(yè)級(jí)開發(fā)語(yǔ)言。很多js相關(guān)技術(shù)都遵循這個(gè)標(biāo)準(zhǔn)，如目前最受歡迎的Vue。
微軟出了符合規(guī)范類似javascript的稱為js，但一般開發(fā)者忽略它們的差異，全稱就習(xí)慣叫javascript，簡(jiǎn)稱就習(xí)慣叫js。
全稱JavaScript，是一種弱類型語(yǔ)言，同其他語(yǔ)言一樣，有它自身的語(yǔ)法，數(shù)據(jù)類型，表達(dá)式，算術(shù)運(yùn)算符等。
JS是一門 基于對(duì)象 和 事件驅(qū)動(dòng) 的 腳本語(yǔ)言 ，通常用來(lái)提高網(wǎng)頁(yè)與用戶的交互性。
基于對(duì)象：它不僅可以創(chuàng)建對(duì)象,也能使用現(xiàn)有的對(duì)象。JS沒有類的概念，也沒有編譯的過程。是一邊解釋一邊執(zhí)行。
事件驅(qū)動(dòng)：在JS中，大部分情況下都是通過事件觸發(fā)驅(qū)動(dòng)函數(shù)執(zhí)行的，從而實(shí)現(xiàn)特定的功能。（比如點(diǎn)擊div將內(nèi)容替換為時(shí)間、當(dāng)鼠標(biāo)滑過元素，元素就有翻轉(zhuǎn)的動(dòng)態(tài)。）
腳本語(yǔ)言：在網(wǎng)絡(luò)前端開發(fā)環(huán)境下，用于嵌入在客戶端瀏覽器中的一段小程序。
特點(diǎn)：
(1)JS是一門直譯式的語(yǔ)言，直接執(zhí)行的就是源代碼.
是一邊解釋一邊執(zhí)行，沒有編譯的過程（不像Java需要提前編譯為class文件再運(yùn)行）.
(2)JS是一門弱類型的語(yǔ)言,沒有嚴(yán)格的數(shù)據(jù)類型.
優(yōu)勢(shì)：
(1)良好的交互性
(2)一定的安全性(JS被強(qiáng)制的要求,不能訪問瀏覽器以外的東西,只能訪問瀏覽器和瀏覽器內(nèi)部的資源)
(3)跨平臺(tái)性(Java語(yǔ)言具有跨平臺(tái)性,是因?yàn)橛刑摂M機(jī))
只要有瀏覽器的地方都能執(zhí)行JS
<head> <title>hello</title> <meta charset='utf-8'/> <script>/* JS代碼 */ alert(100); function fn(){ alert('111'); } </script> </head> <body> <a href='#' onclick='fn();'>鼠標(biāo)點(diǎn)擊事件...</a> </body>
<head> <meta charset='utf-8'/> <script>/* JS代碼 */ function fn(){ alert('JS的第1種引入方式'); } </script> </head> <body> <div id='div1' onclick='fn();'>Hello JavaScript</div> </body>
創(chuàng)建1.js文件
function fn(){
alert('JS的第2種引入方式');
}
在html中引入文件
<head> <meta charset='utf-8'/> <script src='1.js'> </script> </head> <body> <div id='div1' onclick='fn();'>Hello JavaScript</div> </body>
注意：不要同時(shí)通過一個(gè)script標(biāo)簽引入JS代碼和JS文件，會(huì)導(dǎo)致代碼不會(huì)執(zhí)行！比如：
<script src='demo1.js'>
alert('哈哈哈哈。。。');//代碼不會(huì)執(zhí)行！！
</script>
單行注釋： //注釋內(nèi)容
多行注釋： /* 注釋內(nèi)容 */
包括:number/string/boolean/null/undefined
(1) 數(shù)值類型-number
在JS中，數(shù)值類型只有一種，就是浮點(diǎn)型。
在JS中，需要時(shí)會(huì)自動(dòng)的進(jìn)行數(shù)據(jù)類型的轉(zhuǎn)換，比如：在顯示和處理的時(shí)候，浮點(diǎn)型和整型會(huì)自動(dòng)的轉(zhuǎn)換。
2.4+3.6=6;
Infinity ： 正無(wú)窮大
-Infinity ： 負(fù)無(wú)窮大
NaN : Not a Number 非數(shù)字， 和任何值都不相等，包括它本身
(2) 字符串類型-string
在JS中，字符串是基本數(shù)據(jù)類型。
在JS中，字符串直接量是通過單引號(hào)或者雙引號(hào)引起來(lái)。
var str1 = 'Hello…';
var str2 = 'CGB2103…';;
alert(str1);
(3) 布爾類型-boolean
值為true或者是false；
var s1 = false;
console.log(s1);
(4) undefined
值只有一個(gè)就是undefined。表示變量沒有初始化值。
比如：
a) var num; alert(num);//聲明了變量但是沒有為變量賦值，該變量的值就是undefined。
b) 或者訪問一個(gè)對(duì)象上不存在的屬性時(shí)，也是undefined。
c) 或者訪問數(shù)組中一個(gè)沒有的元素的位置時(shí)，該位置處的值也是undefined.
(5) null
值也只有一個(gè)，就是null。表示空值或者不存在的對(duì)象。
函數(shù)、數(shù)組、對(duì)象（自定義對(duì)象、內(nèi)置對(duì)象、DOM對(duì)象、BOM對(duì)象…）
js是弱類型語(yǔ)言，所有類型的變量都是用var關(guān)鍵字定義。并且參數(shù)的類型可以隨時(shí)轉(zhuǎn)換。
javascript沒有類似采用靜態(tài)語(yǔ)言類型，如java的變量類型是編譯期就確定的；而它采用了動(dòng)態(tài)類型，也就是說在編譯期類型不確定，運(yùn)行時(shí)會(huì)動(dòng)態(tài)根據(jù)變量的賦值來(lái)決定它的類型，這點(diǎn)比較靈活。這也是雙刃劍，編譯期就難以檢查出其賦值的錯(cuò)誤。
練習(xí):變量交換
(1) 在JS中是通過 var 關(guān)鍵字來(lái)聲明一個(gè)變量
var a=1; alert(a);
var x=true; alert(x);
var y=10.8; alert(y);
(2) 在JS中聲明的變量是不區(qū)分類型的， 可以指向任意的數(shù)據(jù)類型。
var a = 1; a=true; a=100; alert(a);//100 function x(){ var m = 10; alert('局部變量:'+m); alert('全局變量:'+a); } alert('局部變量2:'+m);//局部變量失效,報(bào)錯(cuò)
JS中的運(yùn)算符和Java中的運(yùn)算符大致相同
算術(shù)運(yùn)算符: +，-，*，/，%，++，–
賦值運(yùn)算符: =，+=，-=，*=，/=，%=
比較運(yùn)算符: ==，!=, =，!, > ，< ，>=，<=
位運(yùn)算符: & ， |
邏輯運(yùn)算符: &&，||
前置邏輯運(yùn)算符: ! (not)
三元運(yùn)算符: ? :
常見運(yùn)算符測(cè)試
var a = 3; var b = 1; console.log(a+b);//4 a+=4; console.log(a+b);//8 //a+=4; console.log(a==b); //true console.log(a==='3'); //false 如果兩邊比較的值不是同一種數(shù)據(jù)類型，===直接返回false，如果是同一種數(shù)據(jù)類型，==和===沒有區(qū)別！ console.log('1'=='1'); //true //由于JS中字符串是基本數(shù)據(jù)類型，比較字符串相等通過 == 進(jìn)行！ var a = 1; alert(a++);//1 alert(++a);//3 alert(++a+a+++a);//4+4+5 alert(a>3?10:8); var b = 10; alert(a>b?a:b);//求兩個(gè)數(shù)里的大數(shù) var c = 8; var d = a>b?(a>c?a:c):(b>c?b:c); alert(d);//三個(gè)數(shù)里的大值
typeof運(yùn)算符: 用于返回變量或者表達(dá)式 的數(shù)據(jù)類型
var i = 3; console.log(typeof i);//number i=true; console.log(typeof i);//boolean i='hello'; console.log(typeof i);//string console.log(typeof 123+'abc');//numberabc console.log(typeof (123+'abc'));//string
JS中的語(yǔ)句和Java中的語(yǔ)句用法也大致相同
var i = 3; if(i==4){ alert(“yes”); }else{ alert(“no”);//no } 例子: 接收用戶輸入的成績(jī)，判斷成績(jī)所屬的等級(jí) 80~100(包括80，也包括100) 優(yōu)秀 60~80(包括60，但不包括80) 中等 0~60(包括0，但不包括60) 不及格 其他值 輸入有誤 // prompt函數(shù)可以彈框提示用戶輸入成績(jī), 并返回用戶輸入的內(nèi)容 var score = prompt('請(qǐng)輸入您的成績(jī)：'); console.log( score ); if( score >= 80 && score <=100 ){ alert('您的成績(jī)屬于：優(yōu)秀！'); }else if( score >= 60 && score < 80 ){ alert('您的成績(jī)屬于：中等！'); }else if( score >= 0 && score < 60 ){ alert('您的成績(jī)屬于：不及格！'); }else{ alert('您輸入的成績(jī)不合法，請(qǐng)重新輸入！'); }
var day = 3; switch( day ){ case 1: alert('今天是星期一'); break; case 2: alert('今天是星期二'); break; case 3: alert('今天是星期三'); break; case 4: alert('今天是星期四'); break; case 5: alert('今天是星期五'); break; }
for(var i=0;i<5;i++){ alert( i ); console.log(i); } var i=0; while(i<5){ alert(i); i++; } var sum = 0; for( var i=1; i<=100; i++ ){ sum += i; //sum = sum+i; } console.log(sum ); //沒有增強(qiáng)for循環(huán)
注意： JS中的語(yǔ)句，判斷條件可以不是boolean類型，因?yàn)镴S中會(huì)自動(dòng)進(jìn)行數(shù)據(jù)類型的轉(zhuǎn)換。
JS數(shù)組用于在單個(gè)的變量中存儲(chǔ)多個(gè)值(其實(shí)就是一個(gè)容器)。
JS中的數(shù)組可以存儲(chǔ)例如：數(shù)值、字符串、布爾值、undefined、null、對(duì)象、函數(shù)等
var arr1 = new Array();//聲明一個(gè)空數(shù)組 var arr2 = new Array('abc', 'hello', true);//聲明一個(gè)具有初始值的數(shù)組 alert(arr2.length);//3 var arr4 = [];//聲明一個(gè)空數(shù)組 alert(arr4.length);//0 arr4 = ['abc', 'hello', true];//聲明一個(gè)具有初始值的數(shù)組 alert(arr4);
(1)JS數(shù)組中可以存放任意的數(shù)據(jù)類型
(2)JS中的數(shù)組長(zhǎng)度可以被改變
var arr1 = [];//聲明一個(gè)空數(shù)組 console.log( arr1.length ); //此時(shí)數(shù)組長(zhǎng)度為 0 arr1.length = 10; console.log( arr1.length ); //此時(shí)數(shù)組長(zhǎng)度為 10 arr1[99] = 'abc'; console.log( arr1.length ); //此時(shí)數(shù)組長(zhǎng)度為 100 arr1.length = 0; console.log( arr1.length ); //此時(shí)數(shù)組長(zhǎng)度為 0
length屬性 -- 獲取數(shù)組的長(zhǎng)度，還可以改變數(shù)組的長(zhǎng)度 var a = [1,2,3]; alert(a.length); var arr = [123, 'abc', false, new Object() ] //遍歷數(shù)組 for( var i=0; i< arr.length; i++ ){ console.log( arr[i] ); } //for..in for(var i in a){ console.log('i:::'+i); } //循環(huán)接收用戶輸入，將數(shù)據(jù)存儲(chǔ)在數(shù)組中，直至輸入'exit’結(jié)束 c(); function c(){ var a=[]; for(;;){ var x=prompt('請(qǐng)輸入整數(shù):'); a[a.length]=x; if(x=='exit'){ break; } } console.log(a); }
函數(shù)就是一個(gè)具有功能的代碼塊, 可以反復(fù)調(diào)用
函數(shù)就是包裹在花括號(hào)中的代碼塊，前面使用了關(guān)鍵詞 function
聲明：function 函數(shù)名稱([參數(shù)列表]){ 函數(shù)體 } 調(diào)用: 函數(shù)名稱([參數(shù)列表]); 案例： function a(){ //無(wú)參函數(shù)定義 var a = [1,2,3,4,5]; //定義數(shù)組 var sum =0; //定義變量 for (var i = 0; i <a.length; i++) { if(a[i]%2==0){ sum+=a[i]; } } alert(sum); } a();//函數(shù)調(diào)用 function b(x,y){//定義含參函數(shù) alert(x+y); } b(1,'2');//函數(shù)調(diào)用 b(1,2);//函數(shù)調(diào)用
聲明：var 函數(shù)名稱 = function([參數(shù)列表]){ 函數(shù)體 } 調(diào)用: 函數(shù)名稱([參數(shù)列表]); 案例： // fn2(); //這種方式定義的函數(shù)還未加載就調(diào)用,會(huì)報(bào)錯(cuò).方式1沒問題 var fn2 = function(){ //定義無(wú)參函數(shù) alert(100); } fn2(); //函數(shù)調(diào)用 var fn3 = function(x,y){ //定義含參函數(shù) alert(x*y); } fn3(0.32,100);//函數(shù)調(diào)用 fn2('王海濤');參數(shù)個(gè)數(shù)不匹配，王海濤undefined var e = function(x,y){ //定義有返回值含參函數(shù) return x-y; } alert('函數(shù)返回值:::'+ e(1.1,10.9) ); //函數(shù)調(diào)用
注意: 在JS中調(diào)用函數(shù)時(shí), 傳遞的參數(shù)個(gè)數(shù)如果與聲明的參數(shù)個(gè)數(shù)不相同, 也不會(huì)報(bào)錯(cuò)。
但是最好按聲明的個(gè)數(shù)來(lái)傳遞, 因?yàn)閭€(gè)數(shù)不符, 可能會(huì)引發(fā)一些問題！！！
利用function關(guān)鍵字聲明對(duì)象，用new關(guān)鍵字創(chuàng)建對(duì)象。
String/Array/Number/Math/JSON…
Window對(duì)象–代表瀏覽器中一個(gè)打開的窗口,了解一下即可，很多被UI替代
//String對(duì)象的功能 let a = 'javascript'; console.log( a.length ); //獲取字符串的長(zhǎng)度 console.log( a.toUpperCase() ); //全轉(zhuǎn)大寫 let b = a.substring(1,5); //截取字符串[1,5) console.log( b ); console.log( a.concat('hello ~') ); //拼串 //Math對(duì)象 console.log( Math.PI );//π的值 console.log( Math.random() ); //隨機(jī)數(shù)0~1 console.log( Math.random() * 10 ); console.log( Math.round(1.9) );//對(duì)小數(shù)的處理,round四舍五入 console.log( Math.round(1.1) );//對(duì)小數(shù)的處理,round四舍五入 //Array對(duì)象 let c = [3,21,4,5,2]; console.log( c ); console.log( c.toString() );//打印數(shù)組里的數(shù)據(jù) console.log( c.sort() ); //對(duì)數(shù)組排序 //window對(duì)象--可以省略 window.alert(100);//彈出框 window.prompt(); //輸入框 window.confirm() ;//確認(rèn)框
Document對(duì)象–代表整個(gè)HTML文檔，可用來(lái)訪問頁(yè)面中的所有元素
document.write() 動(dòng)態(tài)向頁(yè)面寫入內(nèi)容
document.getElementById(id) 獲得指定id值的元素
document.getElementsByName(name) 獲得指定Name值的元素
學(xué)會(huì)簡(jiǎn)單使用，后期被jQuery封裝，在后期被Vue框架封裝
(1)方式一：
/* 自定義對(duì)象*/ function Person(){ } /* 定義對(duì)象*/ var p1 = new Person(); /* 創(chuàng)建對(duì)象*/ p1.name='張三'; p1.age=20; console.log(p1); p1.say = function(){ /* 定義函數(shù)*/ console.log('haha'); } p1.say(); /* 函數(shù)調(diào)用*/ 上面展示了js的強(qiáng)大！js的牛掰之處就在于，它的屬性可以邊寫邊創(chuàng)建，非常靈活，而java不行，必須先定義。
上面展示了js的強(qiáng)大！js的牛掰之處就在于，它的屬性可以邊寫邊創(chuàng)建，非常靈活，而java不行，必須先定義。
(2)方式二:
var p2 = { 'pname':'李四', 'page':100, 'psay':function(){ /* this使用p2里定義的 */ console.log(this.pname+this.page); } } console.log(p2); p2.psay(); /* 函數(shù)調(diào)用*/
核心對(duì)象有：window瀏覽器窗口，navigator瀏覽器信息，location瀏覽器當(dāng)前地址信息，history瀏覽器歷史信息，screen用戶屏幕信息。
DOM非常重要，實(shí)際開發(fā)更多通過js操作DOM對(duì)象實(shí)現(xiàn)對(duì)html頁(yè)面的操作，BOM也用，比較少用。所以學(xué)習(xí)重點(diǎn)放在DOM上。
DOM 是一項(xiàng) W3C (World Wide Web Consortium) 標(biāo)準(zhǔn)，DOM（Document Object Model）文檔對(duì)象模型為JS操作html文檔所提供的一套API，通過這套API可以很方便的對(duì)html元素進(jìn)行訪問及增刪改查操作。
--獲取對(duì)象: window.document --調(diào)用方法: getElementById('元素的id的屬性的值')--返回1個(gè)元素 getElementsByName('元素的name屬性的值')--返回多個(gè)元素(用數(shù)組) getElementsByClassName('元素的class屬性的值')--返回多個(gè)元素(用數(shù)組) getElementsByTagName('元素的標(biāo)簽名的值')--返回多個(gè)元素(用數(shù)組) write()--向文檔寫 HTML 表達(dá)式 或 JavaScript 代碼 title--返回網(wǎng)頁(yè)的標(biāo)題 id--設(shè)置或返回元素的id innerHTML--設(shè)置或返回元素的內(nèi)容
<!DOCTYPE html> <html> <head> <meta charset='utf-8'> <title>DOM解析</title> <!-- js --> <script> function a(){ /* 按id獲取,返回1個(gè) */ var x = document.getElementById('div1'); x.innerHTML='<h1>你好div</h1>'; /* 按name屬性值獲取,返回多個(gè)*/ var y = document.getElementsByName('div2'); console.log(y);//NodeList y[0].innerHTML='hello js...'; /* 按class屬性值獲取,返回多個(gè)*/ var z = document.getElementsByClassName('span1'); console.log(z);//HTMLCollection z[0].innerText='<p>我變了</p>' /* 按照標(biāo)簽名獲取,返回多個(gè) */ var m = document.getElementsByTagName('div'); console.log(m);//HTMLCollection m[1].style.fontSize=30+'px'; } </script> </head> <body> <div id='div1' onclick='a();'>我是div1</div> <div name='div2' onclick='a();'>我是div2</div> <span class='span1'>我是span1</span> <span class='span1'>我是span2</span> <a name='div2' id='a1'>我是a</a> <!-- js事件: --> <a href='#' onclick='method();'>單擊觸發(fā)js</a> <a href='#' ondblclick='method2();'>雙擊觸發(fā)js</a> <a href='#' onmouseenter='method3();'>滑過觸發(fā)js</a> <a href='#' onmouseleave='method4();'>滑走觸發(fā)js</a> <button onkeydown='alert(1);'>點(diǎn)我</button> </body> </html>
獲取頁(yè)面元素的4種方式:
注：dom樹在描述標(biāo)簽時(shí)除id方式，其它都是以數(shù)組形式體現(xiàn)，哪怕是一個(gè)元素。
ajax往往要完整應(yīng)用還會(huì)配合一個(gè)技術(shù)：JSON，那什么是JSON呢？
JSON 指的是 JavaScript 對(duì)象表示法（JavaScript Object Notation）
JSON(JavaScript Object Notation，JS 對(duì)象簡(jiǎn)譜) 起名不咋地，非常拗口，我們就記住它是一種輕量級(jí)的數(shù)據(jù)交換格式即可。它基于 ECMAScript (js規(guī)范)的一個(gè)子集，采用完全獨(dú)立于編程語(yǔ)言的文本格式來(lái)存儲(chǔ)和表示數(shù)據(jù)。簡(jiǎn)潔和清晰的層次結(jié)構(gòu)使得 JSON 成為理想的數(shù)據(jù)交換語(yǔ)言。是xml的終結(jié)者，成為主流開發(fā)方式（ajax異步請(qǐng)求，json返回）。
JSON 是存儲(chǔ)和交換文本信息的語(yǔ)法。當(dāng)數(shù)據(jù)在瀏覽器與服務(wù)器之間進(jìn)行交換時(shí)，這些數(shù)據(jù)只能是文本。JSON 屬于文本，并且我們能夠把任何 JavaScript 對(duì)象轉(zhuǎn)換為 JSON，然后將 JSON 發(fā)送到服務(wù)器。我們也能把從服務(wù)器接收到的任何 JSON 轉(zhuǎn)換為 JavaScript 對(duì)象。以這樣的方式，我們能夠把數(shù)據(jù)作為 JavaScript 對(duì)象來(lái)處理，無(wú)需復(fù)雜的解析和轉(zhuǎn)譯。
JSON數(shù)據(jù):
var a =' 'firstName' : 'John' '
JSON 對(duì)象:
var a = '{ 'firstName':'John' , 'lastName':'Doe' }'
JSON 數(shù)組:
var a = '[{ 'firstName':'Bill' , 'lastName':'Gates' },{ 'firstName':'George' , 'lastName':'Bush' }]';
使用JS里的內(nèi)置對(duì)象JSON.用來(lái)把以 JSON 格式寫的字符串 和 原生 JavaScript 對(duì)象互轉(zhuǎn).
給服務(wù)器發(fā)送數(shù)據(jù): 將JS對(duì)象轉(zhuǎn)成JSON字符串 JSON.stringify(Js對(duì)象)
接受服務(wù)器的數(shù)據(jù): JSON字符串轉(zhuǎn)成JS對(duì)象 JSON.parse('json字符串')
<!DOCTYPE html> <html> <head> <meta charset='utf-8'> <title>json</title> <script> //json用來(lái)在瀏覽器和服務(wù)器之間做數(shù)據(jù)傳輸,輕量級(jí),格式簡(jiǎn)單明了. //JSON是js的內(nèi)置對(duì)象,用來(lái)把json類型的字符串和js對(duì)象互轉(zhuǎn) //json類型的字符串---{ 'k1':'v1', 'k2':'v2', 'k3':'v3' } function jschuan(){ var jsonchuan = '{ 'k1':'v1', 'k2':'v2', 'k3':'v3' }'; document.getElementById('h').innerHTML=jsonchuan; } function chuan2js(){ var text='{ 'k1':'v1', 'k2':'v2', 'k3':'v3' }'; console.log(text); //從服務(wù)器收到的數(shù)據(jù)都是字符串,轉(zhuǎn)成js對(duì)象,用js語(yǔ)法解析屬性/方法 var jsobj = JSON.parse(text);//串轉(zhuǎn)js對(duì)象,就可以寫js代碼解析數(shù)據(jù) console.log(jsobj); document.getElementById('d').innerHTML=jsobj.k2; } function js2chuan(){ var obj = {'k1':'v1', 'k2':'v2', 'k3':'v3'}; console.log(obj); //把瀏覽器的數(shù)據(jù)發(fā)給服務(wù)器,服務(wù)器只要json串 var text = JSON.stringify(obj);//js對(duì)象轉(zhuǎn)成串 document.getElementById('p1').innerHTML=text; console.log(text); console.log(text.length); } </script> </head> <body> <p id='p1' onclick='js2chuan();'>我是p</p> <div id='d' onclick='chuan2js();'>我是div</div> <h1 id='h' onclick='jschuan();'>我是h1哦</h1> </body> </html>
AJAX = Asynchronous JavaScript And XML. AJAX 并非編程語(yǔ)言。
Ajax 允許通過與場(chǎng)景后面的 Web 服務(wù)器交換數(shù)據(jù)來(lái)異步更新網(wǎng)頁(yè)。這意味著可以更新網(wǎng)頁(yè)的部分，而不需要重新加載整個(gè)頁(yè)面。
所有現(xiàn)代瀏覽器都支持 XMLHttpRequest 對(duì)象。
XMLHttpRequest 對(duì)象用于同幕后服務(wù)器交換數(shù)據(jù)。這意味著可以更新網(wǎng)頁(yè)的部分，而不需要重新加載整個(gè)頁(yè)面。
<!DOCTYPE html> <html> <head> <meta charset='utf-8'> <title>ajax-js版</title> <script> function change(){ // 1. 創(chuàng)建xhr對(duì)象,用于同幕后服務(wù)器交換數(shù)據(jù) var xhr = new XMLHttpRequest(); // 2. 定義當(dāng) readyState 屬性發(fā)生變化時(shí)被調(diào)用的函數(shù) xhr.onreadystatechange=function(){ //3. status是200表示請(qǐng)求成功,readyState是4表示請(qǐng)求已完成且響應(yīng)已就緒 if(this.status==200 && this.readyState==4){ // document.getElementById('d1').innerHTML='hi ajax'; //5.以字符串返回響應(yīng)數(shù)據(jù),并展示 document.getElementById('d1').innerHTML=this.responseText; } } //3.規(guī)定請(qǐng)求的類型(請(qǐng)求方式,文件位置,異步) xhr.open('get','1.json',true); //xhr.open('get','http://localhost:8080/car/get',true); //4.xhr將請(qǐng)求發(fā)送到服務(wù)器 xhr.send(); } </script> </head> <body> <!-- 點(diǎn)擊時(shí),使用ajax修改文字 --> <div id='d1' onclick='change()'>你好</div> </body> </html>
專業(yè)人用專業(yè)的工具，瀏覽器調(diào)試谷歌、火狐最佳，使用F12打開調(diào)試窗口。也可以快捷鍵打開：ctrl+shift+i。
以表格形式展現(xiàn)：
