Web前端學習筆記之JavaScript、jQuery、AJAX、JSON的區別

時間 2019-11-10

標籤 web 前端學習筆記 javascript jquery ajax json 區別欄目 HTML 简体版

原文原文鏈接

官網的英文解釋：

javascript和jQuery有點關係，js是一種腳本語言，主要用於客戶端，如今主要用於實現一些網頁效果。javascript

jquery是js的一個庫，你能夠認爲是對js的補充，提供了不少方便易用的方法，兼容性也好不少，我的更喜歡用jquery。css

AJAX全名是Asynchronous Javascript And XML，意思是異步JavaScript和XML。是一種建立交互式網頁的技術。簡單點說就是能不經過後臺在網站前臺進行數據庫操做了。html

json(JavaScript Object Notation) 是一種輕量級的數據交換格式，有點像xml，用於在不一樣平臺交換數據，不過json能夠直接傳送對象，方便很多java

1. JavaScript

JavaScript（簡稱js）是一種主要運行於瀏覽器中的弱類型的動態腳本語言，能夠用來實現網頁上的一些高級功能，如數據驗證處理、頁面動態效果、定時任務、與用戶交互、發送/接收服務器端數據等等。jquery

動態語言指的是程序運行時能夠改變結構，主要體如今：
① js中的變量在聲明的時候不須要指定類型，其實際類型由程序運行中的賦值決定，在運行過程當中變量的類型也能夠改變。注：這一點是動態語言的特徵，並非弱類型語言的特徵，以前的回答有誤。
② 函數可變。js容許在運行過程當中使用eval動態執行字符串裏的命令，也能夠經過new Function等方式由字符串動態構造函數，函數能夠被建立、修改、刪除，能夠從已有函數構造出新函數，等等。
③ 對象的成員可變，能夠動態添加、刪除成員屬性或成員方法。ajax

弱類型指的是js中的變量在參與運算的時候能夠根據實際須要動態轉換類型。與之相對應的是強類型語言——變量通常不容許自動轉換類型（某些強類型語言的字符串鏈接操做除外），若是參與運算、調用時不符合要求的類型，則會在編譯階段報錯。數據庫

js是1995年由Netscape公司的Brendan Eich爲自家的瀏覽器Netscape Navigator開發的，當時意圖是用於網頁上的表單驗證，即驗證表單的各個輸入項是否符合預約規則，在驗證經過後才向服務器提交表單內容，減小頁面與服務器端沒必要要的頻繁交互。編程

js的最第一版本只用了10天就開發完成，固然不是徹底從無到有，而是借鑑了其餘一些語言的特性來開發。如此倉促開發，js天然有一些先天不足，但同時也具有了基於弱類型動態語言的方便靈活、對象原型繼承、函數是一種特殊的對象等優秀特性，因而愈來愈獲得普遍應用，而語言自身也在標準化組織的推進下不斷髮展進步。json

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

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

2. 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者所沒法替代的。

3. 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改成了瀏覽器的內建對象。

4. 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 的一個子集。