文章目錄

一、XML與HTML
- 前言
- 簡介
- XML與HTML的區別
- 最重要的區別（自我認為）
二、官網的英文解釋：
三、JavaScript
四、jQuery
五、Ajax
六、JSON
七、總結

一、XML與HTML

前言

為什么我會突然學XML呢？我在學習用JSP寫Web后臺的時候，常常會看到“等價的XML陳述句”、“符合XML標準”等字眼，并且在我新建的JSP專案中也發現有很多的.xml檔案，我很想知道這些.xml檔案的作用以及與JSP（或者說是與Java）的聯系，就試著開始學習XML了，

簡介

XML的全稱為可擴展標記語言（eXtensible Markup Language），很多人應該都熟悉HTML（超文本標記語言， HyperText Markup Language），與HTML一樣，XML也是一種標記語言，是一種特殊的文本標記，兩者在形式上很相似，比如都有類似這樣的符號：字符，作用上也都能用來傳輸與顯示資料，下面是一個簡單的XML檔案：

<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>

XML與HTML的區別

1.在HTML中不區分大小寫，而XML對大小寫十分敏感，必須嚴格區分：

<message>This is correct<message>
<Message>This is incorrect</message>

2.在HTML中，有時不嚴格，如果背景關系清楚地顯示出段落或者串列在何處結尾，那么就可以省略</p>或者</li>之類的結束標簽：

<p>This is a paragraph.

<li>HTML
<li>XML

而在XML中，省略關閉標簽是非法的，所有元素都必須有關閉標簽，而像<br />這種擁有單個標簽而沒有匹配的結束標簽的必須用一個/字符作為結尾：

<p>This is a paragraph.</p>
<br />

3.在HTML中，常會看到沒有正確嵌套的元素：

<b><i>This text is bold and italic</b></i>

在XML中，所有元素都必須彼此正確地嵌套：

<b><i>This text is bold and italic</i></b>

PS：元素是指從（且包括）開始標簽直到（且包括）結束標簽的部分，

以上面的代碼為例，正確嵌套的即為由于<i>元素是在<b>元素內打開的，那么它必須在<b>元素內關閉，

4.在HTML中，引導屬性值的引號是可用可不用的，在XML中，屬性值必須被引號包圍：

<note date="12/11/2007">
<to>Tove</to>
<from>Jani</from>
</note>

5.HTML會把多個連續的空格字符合并為一個，在XML中，檔案中的空格不會被刪減，

6.XML檔案形成一種樹結構，XML 檔案必須有一個元素是所有其他元素的父元素，該元素稱為根元素，下面的代碼形成一種樹結構：

<root>
<child>
<subchild>.....</subchild>
</child>
</root>

7.HTML使用固有的標簽，而且都是預定義的，常見的標簽有：

基本標簽：<html>、<head>、<body>
文本標簽：<font>、<p>
串列標簽：<ol>、<ul>、<li>
表格標簽：<table>、<tr>、<td>

此外還有<img>（插入影像標簽）、<a>（超鏈接標簽）、<form>（表單標簽）等，
XML中并沒有固有的標簽，所有的標簽都是自定義的而且可擴展的（這也印證了XML名稱中的extensible），以上文簡介中的代碼為例：

<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>

<note>標簽告訴讀者這是一個便簽
<to>標簽告訴讀者便簽是寫給Tove
<from>標簽告訴讀者便簽是Jani寫的
<heading>標簽告訴讀者便簽的標題為Reminder（即便簽有提醒的作用）
<body>標簽告訴讀者便簽的內容

這些標簽都是作者在撰寫XML檔案的程序中根據要撰寫的資料的含義來定義的，

8.HTML和XML都有屬性，在XML中，屬性通常提供不屬于資料組成部分的資訊：

 <file type="gif">computer.gif</file>

這個例子中，檔案型別GIF與資料computer.gif無關，但卻告訴讀者要用處理GIF檔案的程式來處理computer.gif這個檔案，
下面是兩個不同的XML檔案：

<person sex="female">
<firstname>Anna</firstname>
<lastname>Smith</lastname>
</person>

<person>
<sex>female</sex>
<firstname>Anna</firstname>
<lastname>Smith</lastname>
</person>

它們的區別在于第一個檔案中sex為元素person的一個屬性，而第二個檔案中sex自身就是一個元素，它們都告訴讀者Anna Smith是一名女性，
很重要的提示：**不要濫用屬性！**請看下面一段代碼：

<note day="10" month="01" year="2008" to="Tove" 
from="Jani" heading="Reminder" body="Don't forget me this weekend!">
</note>

這并不是XML正確的使用方式！
還有一種情況就是針對元資料的屬性：

<messages>
<note id="501">
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>
<note id="502">
<to>Jani</to>
<from>Tove</from>
<heading>Re: Reminder</heading>
<body>I will not!</body>
</note>
</messages>

這里的屬性id僅僅是一個識別符號，用于標識不同的便簽note，它并不是便簽中資料的組成部分，
XML中并沒有明確規定什么時候該用元素，什么時候該用屬性，因此建議大家盡量避免使用屬性，如果需要存盤的資訊感覺起來很像資料，那么請使用元素，而那些元資料（有關資料的資料）則應當存盤為屬性，

最重要的區別（自我認為）

XML被設計用來存盤和傳輸資料，其焦點是資料的內容，
HTML被設計用來顯示資料，其焦點是資料的外觀，

通俗地說就是HTML旨在顯示資料，而XML旨在傳輸資料，
還是以上文簡介中的代碼為例：

<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>

想要單純地列舉出便簽寫給誰、便簽誰寫的、便簽的標題、便簽的內容這些資料，用HTML做一個無序串列就能實作：

<html>
<head>
<title>note</title>
</head>
<body>
<li>Tove</li>
<li>Jani</li>
<li>Reminder</li>
<li>Don't forget me this weekend!</li>
</body>
</html>

這段代碼運行起來是這樣的效果：

note.html運行效果圖

現在我想問，單看這張圖，能知道這個便簽是誰寫的嗎？是Tove還是Jani？或者可能這個便簽是寫給Tove和Jani兩個人的，也許只有檔案的作者自己知道，現實生活中還會有更復雜的例子，比如記錄家庭成員關系的檔案、記錄某件商品價格變動的檔案，如果用HTML做成無序串列一一列舉出來的話，就會出現一大串人名、一大串數字，沒有其他任何的解釋資訊，我想也只有作者能看懂這些檔案吧，
這就是HTML的作用，把資料顯示出來，怎么好看就怎么顯示，顯示的方式有很多種，例如用文本、串列、表格等，但顯示出的資料內容并沒有改變，只是外觀發生了改變，
但XML就不一樣，我們可以用XML撰寫出下面兩個檔案：

<family>
<grandfather>Jack</grandfather>
<grandmother>Betty</grandmother>
<father>Mike</father>
<mother>Jessie</mother>
<uncle>Felix</uncle>
<aunt>Anna</aunt>
<son>Tom</son>
<daughter>Amy</daughter>
<January></January>
</family>

<price>
<January>$35.00</January>
<February>$36.00</February>
<March>$35.60</March>
<April>$37.00</April>
<May>$38.00</May>
<June>$36.00</June>
</price>

通過以上兩個檔案，我們可以清楚地知道每個人名對應的人物關系、每個價格對應的月份，
這就是XML的作用，作者在撰寫XML檔案的程序中根據資料的含義定義和擴展標簽，這樣資料就和特定的標簽聯系起來并存盤，在傳輸的程序中讀者通過這些標簽能夠明白資料的含義，
肯定會有人有疑問：為什么不在HTML中使用類似的、這些標簽呢？很抱歉，HTML沒有預定義這些標簽，并且HTML中的標簽不能擴展，只能使用預定義好的標簽，
又有人會說，我也可以用HTML將資料的含義顯示出來呀，就像這樣：

<html>
<head>
<title>note</title>
</head>
<body>
<li>to:Tove</li>
<li>from:Jani</li>
<li>heading:Reminder</li>
<li>body:Don't forget me this weekend!</li>
</body>
</html>

這確實是個很不錯的方法，讀者也能看懂資料的含義，但如果撰寫檔案的目的只是方便用戶在需要的時候查看檔案中存盤的資料然后關閉的話，就沒有必要寫這么冗長、繁瑣的一段代碼了，利用XML撰寫，幾行代碼就能搞定，而且用記事本打開.xml檔案就能查看：

note.xml運行效果圖

這就是XML比HTML優秀的地方，代碼雖短，卻能完整、清楚地顯示出資料及其含義，同時又方便查看，可以跨平臺使用，

二、官網的英文解釋：

javascript和jQuery有點關系，js是一種腳本語言，主要用于客戶端，現在主要用于實作一些網頁效果，
jquery是js的一個庫，你可以認為是對js的補充，提供了很多方便易用的方法，兼容性也好很多，個人更喜歡用jquery，
AJAX全名是Asynchronous Javascript ***A***nd XML，意思是異步JavaScript和XML，是一種創建互動式網頁的技術，簡單點說就是能不通過后臺在網站前臺進行資料庫操作了，
json(JavaScript Object Notation) 是一種輕量級的資料交換格式，有點像xml，用于在不同平臺交換資料，不過json可以直接傳送物件，方便不少

三、JavaScript

JavaScript（簡稱js）是一種主要運行于瀏覽器中的弱型別的動態腳本語言，可以用來實作網頁上的一些高級功能，如資料驗證處理、頁面動態效果、定時任務、與用戶互動、發送/接收服務器端資料等等，

動態語言指的是程式運行時可以改變結構，主要體現在：

js中的變數在宣告的時候不需要指定型別，其實際型別由程式運行中的賦值決定，在運行程序中變數的型別也可以改變，注：這一點是動態語言的特征，并不是弱型別語言的特征，之前的回答有誤，
函式可變，js允許在運行程序中使用eval動態執行字串里的命令，也可以通過new Function等方式由字串動態建構式，函式可以被創建、修改、洗掉，可以從已有函式構造出新函式，等等，
物件的成員可變，可以動態添加、洗掉成員屬性或成員方法，

弱型別指的是js中的變數在參與運算的時候可以根據實際需要動態轉換型別，與之相對應的是強型別語言——變數一般不允許自動轉換型別（某些強型別語言的字串連接操作除外），如果參與運算、呼叫時不符合要求的型別，則會在編譯階段報錯，

js是1995年由Netscape公司的Brendan Eich為自家的瀏覽器Netscape Navigator開發的，當時意圖是用于網頁上的表單驗證，即驗證表單的各個輸入項是否符合預定規則，在驗證通過后才向服務器提交表單內容，減少頁面與服務器端不必要的頻繁互動，

js的最初版本只用了10天就開發完成，當然不是完全從無到有，而是借鑒了其他一些語言的特性來開發，如此倉促開發，js自然有一些先天不足，但同時也具備了基于弱型別動態語言的方便靈活、物件原型繼承、函式是一種特殊的物件等優秀特性，于是越來越得到廣泛應用，而語言自身也在標準化組織的推動下不斷發展進步，

在瀏覽器發展的早期，Microsoft仿造JavaScript推出了相似的腳本語言JScript，在IE瀏覽器中使用，Microsoft同時推出的還有VBScript，后來為了解決不同瀏覽器中腳本語言不兼容的問題，在ECMA（歐洲計算機制造商協會）成立了標準化小組，由各廠商參與，共同制定JavaScript的語言規范，規范化的這門語言被命名為ECMAScript，

js也可以在瀏覽器之外的其他場合使用，如服務器端的Node.js、java的Rhino、無界面瀏覽器PhantomJS等，

四、jQuery

jQuery是js的一個工具庫，由John Resig在2006年發布， j代表JavaScript，query是“查詢”的意思，也就是說，這個庫的意圖是基于JavaScript的查詢，查詢的目標是什么？答案是DOM（檔案物件模型）結構中的Node（節點），一個網頁就是一個html檔案，而網頁上的所有內容都是節點，包括檔案節點、元素節點、文本節點、注釋節點、屬性節點等等，而jQuery的查詢最主要針對的是元素節點，如段落（p）、錨點（a）、表格（table）等，只有少數方法可以處理文本節點與注釋節點，同時jQuery還可以用attr方法方便地對元素節點的屬性進行讀取/設定，

? 在jQuery出現之前，在js程式中獲取元素節點比較麻煩，例如獲取id為elem1的節點

document.getElementById('elem1')

或者是獲取頁面上的所有checkbox元素，首先需要獲取input型別的元素：

document.getElementsByTagName('input')

然后對獲得的元素串列進行for回圈處理，逐個判斷其型別是否為checkbox，如果有更多元化的查詢要求，則對應的js代碼也會相當復雜，雖然有一些庫可以解決這方面的需求，但強大程度、易用性等方面都不太理想，

? John Resig發現了一個盲點——css樣式應用到頁面上的元素時，是有一套規則的，即css選擇器，瀏覽器可以通過css選擇器找到匹配的元素并將指定的樣式應用到這些元素上，也就是說，通過css選擇器可以有效地進行元素查找定位，但它最初只被用于樣式領域，于是，John Resig根據css選擇器撰寫了jQuery選擇器，并對選擇器的規則進行了擴充，從而讓元素查找變得非常方便，例如，上面2個例子用jQuery可以寫為：

$('#elem1')

與

$(":checkbox")

同時，jQuery還有一個核心思想——鏈式操作，例如：

$('div.con')
    .height(100)
    .show();

這樣的連續呼叫可以讓代碼書寫更加簡潔，也就是jQuery自己的口號：write less, do more，

此外，jQuery還提供了瀏覽器兼容、樣式讀寫、事件系結與執行、影片等特性，后來又加入了ajax、promise等，再加上方便的插件撰寫機制，對整個js的生態圈產生了重大的影響，可以說是js歷史上影響力最大的一個庫，其中選擇器引擎后來被單獨剝離出來成為sizzle，供其他的js庫呼叫，這部分的作業還影響了官方，在jQuery成功之后，瀏覽器才有了querySelector與querySelectorAll方法，時至今日，雖然有了querySelector與querySelectorAll，但jQuery的選擇器仍然有少部分特性是前2者所無法替代的，

五、Ajax

ajax全稱Asynchronous JavaScript and XML（異步的JavaScript與XML），是網頁無需重繪頁面、使用js與服務器進行互動的一種技術，

有時候會有這樣一種需求：只希望更改頁面上的一個區域，然而在從前的技術框架內只能重繪整個頁面，帶來的后果是：①需要重新傳輸整個頁面，服務器端與客戶端的流量消耗都會比較大；②如果是動態頁，服務器端需要重新生成整個頁面，即使是那些客戶原本不想要重繪的區域，增大了服務器的負擔，

Google的Jesse James Garrett在2005年初發表了一篇文章，提供了解決這種需求的技術方案，也就是ajax，實際上這是一種實踐先行的技術，該方案的技術依賴之一XMLHTTP在1998年就已經被Microsoft開發出來了，而Google在若干年后使用這項技術開發Google Maps等產品之后，才發表了相應的文章并對其進行了命名，

ajax的基本流程可以概括為：頁面上js腳本實體化一個XMLHttpRequest物件，設定好服務器端的url、必要的查詢引數、回呼函式之后，向服務器發出請求，服務器在處理請求之后將處理結果回傳給頁面，觸發事先系結的回呼函式，這樣，頁面腳本如果想要改變一個區域的內容，只需要通過ajax向服務器獲取與該區域有關的少量資料，在回呼函式中將該區域的內容替換掉即可，不需要重繪整個頁面，

XMLHttpRequest在發送請求的時候，有兩種方式：同步與異步，同步方式是請求發出后，一直到收到服務器回傳的資料為止，瀏覽器行程被阻塞，頁面上什么事也做不了，而異步方式則不會阻塞瀏覽器行程，在服務端回傳資料并觸發回呼函式之前，用戶依然可以在該頁面上進行其他操作，ajax的核心是異步方式，而同步方式只有在極其特殊的情況下才會被用到，

XMLHttpRequest在早期IE瀏覽器里是使用ActiveX來實作的，并不是瀏覽器自身的物件，后來其他各家瀏覽器也都實作了XMLHttpRequest物件，而高版本IE也把XMLHttpRequest改為了瀏覽器的內建物件，

六、JSON

JSON全稱JavaScript Object Notation（js物件標記法），由Douglas Crockford在2002年發現并制定了標準，從名稱上就可以看出來，JSON是基于JavaScript的，是JavaScript的一個子集，JSON是用JavaScript語法來表示資料的一種輕量級語言，

雖然Douglas在2002年就注冊了http://json.org，并且為各種語言撰寫了決議與構造JSON資料的庫，但在最開始的幾年JSON一直沒有得到足夠的重視，情況一直延續到ajax的出現，

從ajax的命名中我們就可以看到，資料交換是通過XML格式進行的，在ajax剛出現的時候，絕大多數應用都是采用XML格式，也有少數使用純文本的，但是XML格式有一個缺點，就是檔案構造復雜，需要傳輸比較多的位元組數，在這種情況下，JSON的輕便性逐漸得到重視，后來替代XML成為ajax最主要的資料傳輸格式，可以舉個簡單的例子感受一下二者的區別：

<?xml version="1.0" encoding="utf-8"?>
<root>
  <article>
    <title>Article Title1</title>
    <content>content1</content>
  </article>
  <article>
    <title>Article Title2</title>
    <content>content2</content>
  </article>
</root>
{
  "article" : [
    {
      "title": "Article Title1",
      "content": "content1"
    },
    {
      "title": "Article Title2",
      "content": "content2"
    }
  ]
}

XML規范實際上是比較復雜的，單純作為資料傳輸來說它太重了，在ajax領域中JSON取代XML的程序，是一個很好的“用腳投票”的范例，

而JSON的影響力在此后還繼續擴大，有些軟體將其作為組態檔的格式，有些編程語言也吸納了JSON的優點，例如c#，在高版本里可以這樣寫：

Dictionary<int, string> dict = new Dictionary<int, string>{
    {1, "a"},
    {2, "b"}
};

但是如果c# 2.0這樣寫，可是會報錯的，在2.0里只能寫成下面這種形式：

Dictionary<int, string> dict = new Dictionary<int, string>();
dict.Add(1, "a");
dict.Add(2, "b");

等價于

Dictionary<int, string> dict = new Dictionary<int, string>();
dict[1] = "a";
dict[2] = "b";

比較一下兩種寫法的區別，不僅有便捷性的差距，而且前一種寫法可以在宣告變數的同時為變數賦值，后一種寫法則不行，這會影響到類屬性的初始化操作：在c# 2.0中，只能把針對Dictionary之類復雜物件的初始化代碼寫在函式里，而不能直接寫在類屬性的宣告處，

感覺上是c#受了JSON（或者說js）的影響，但此處是我個人的感覺，如有錯誤請指出，

回到js自身，對于物件構造有兩種方法：基于物件的完整寫法，字面量表示法，前者如：

var obj = new Object();
obj.title = "title1";
obj.content = "content1";

而與之對應的字面量表示法則寫為：

var obj = {
    title: "title1",
    content: "content1"
};

可以明顯看出字面量表示法要簡潔得多，而JSON基本就是字面量表示法的一個子集，除了強制要求鍵與字串型別的值必須用雙引號包起之外，它剔除了undefined、function等型別，也不包括瀏覽器內置物件型別（如Date、RegExp等），是基于文本的、比較純粹的資料表示方法，所以說，Douglas是“發現”了JSON，而不是“發明”，標準的JSON不包含注釋，但后來因為實際需求而出現了能夠處理注釋的JSON庫，

七、總結

有一天，你們人類不滿足網頁只是一些文字和圖片的展示，希望頁面上可以有更多功能，比如點擊一個按鈕，彈一個視窗或者改變頁面上某些內容，

為了實作這種功能，就創造了一門腳本語言，逐步升級演化成了 JavaScript 這門語言，

JavaScript 為頁面提供更多功能，是頁面互動功能的基礎語言，此外它的語言規范和引擎還被用于其他領域，比如 Node 等，

人類為了讓自己頁面功能更加豐富，使用了大量的 JavaScript，并且寫了非常多的代碼，這時候發現不同瀏覽器對 JavaScript 的支持程度非常不統一，而且原生 JavaScript 實作某些看起來很簡單的功能都很麻煩，于是 jQuery 就把這些兼容性問題統一，并封裝了大量的 API，可以讓你非常簡單就實作很多功能，

jQuery 屏蔽了瀏覽器之間的兼容性問題，針對常用功能封裝了大量的 API，并支持插件機制，讓你寫 JS 的效率很高，質量很好，

簡單的頁面上的互動再次不滿足人類的需求，比如一個資料填寫表單，需要填寫一個名稱，這個名稱還必須不能跟之前的重復，校驗這個名稱不能重復，就需要把資料提交上去，與服務器端資料互動的方法就是 form 提交表單，這時候需要用戶填完所有的表單，點擊『確定』之后提交校驗，如果此時名稱被占用就悲劇了，

解決這個問題的方案關鍵點在資料互動上面，最好的解決方案應該是輸入完名字之后，就自動去吧資料發給后端，然后拿到結果并提示給用戶，而不是統一提交，于是人類就想出了一套新的資料互動方案，即無重繪的異步請求，名字叫 Ajax，通過 Ajax 可以通過 JS 與后端介面進行資料互動，而不會影響當前頁面，當介面回傳『被占用』的時候，JS 在頁面上給個提示就可以很好的實作了，

Ajax 技術提供了一種新的前后端資料互動方式，不需要重繪頁面，而且不阻塞頁面執行流程，異步的去請求去獲取、互動資料，

一開始只是通過 Ajax 異步發一個請求，資料就是一個簡單的用戶名稱，所以直接按照字串發過去就好了，后來需要 Ajax 發送的資料越來越多，比如一整張表單，這時候就需要有一套規則來描述更復雜的資料，一開始估計就是用一些字符分割拼起來，再后來人類用 xml 來描述，發現決議還是挺麻煩的，于是就基于 JavaScript 的資料型別創造了 JSON 這種資料描述格式，很簡單的就可以描述很復雜的資料，同時獨立于語言，這樣就可以在多種語言內使用，

JSON 用來描述前后端資料互動的內容格式，有了 JSON 這樣的一套統一的描述規則，前后端決議資料的成本變低，使用非常簡單，JSON 屬于 JavaScript 的一個子集，

在這里插入圖片描述