JavaScript、jQuery與Ajax的關係_javascript技巧

在上篇文章給大家介紹了javascript jquery ajax的小結，今天接著給大家介紹javascript jquery與ajax的關係，感興趣的朋友一起學習吧

簡單總結：

1、JS是一門前端語言。

2、Ajax是一門技術，它提供了非同步更新的機制，使用用戶端與伺服器間交換資料而非整個頁面文檔，實現頁面的局部更新。

3、jQuery是一個架構，它對JS進行了封裝，使其更方便使用。jQuery使得JS與Ajax的使用更方便

詳細情況：

Actually only one of them is a programming language.
Javascript is a programming language which is used mainly in webpages for making websites interactive. When a webpage is parsed by the browser, it creates an in-memory representation of the page. It is a tree structure, which contains all elements on the page. So there is a root element, which contains the head and the body elements, which contain other elements, which contain other elements. So it looks like a tree basically. Now with javascript you can manipulate elements in the page using this tree. You can pick elements by their id (getElementsById), or their tag name (getElementsByTagName), or by simply going through the tree (parentNode, firstChild, lastChild, nextSibling, previousSibling, etc.). Once you have element(s) to work with you can modify them by changing their look, content or position on the page. This interface is also known as the DOM(Document Object Model). So you can do everything with Javascript that another programming language can do, and by using it embedded into wepages you also get an in-memory Object of the current webpage by which you can make changes to the page interactively.
AJAX is a technique of communication between the browser and the server within a page. Chat is a good example. You write a message, send a message and recive other messages without leaving the page. You can manage this interaction with Javascript on the client side, using an XMLHTTP Object provided by the browser.
jQuery is a library which aims to simplify client side web development in general (the two other above). It creates a layer of abstracion so you can reuse common languages like CSS and HTML in Javascript. It also includes functions which can be used to communicate with servers very easily (AJAX). It is written in Javascript, and will not do everything for you, only makes common tasks easier. It also hides some of the misconceptions and bugs of browsers.
To sum up:
Javascript is a programming language (objects, array, numbers, strings, calculations)
AJAX and jQuery uses Javascript
jQuery is for simplifing common tasks with AJAX and page manipulation (style, animation, etc.)
Finally, an example just to see some syntax:
// page manipulation in javascript
var el = document.getElementById("box");
el.style.backgroundColor = "#000";
var new_el = document.createElement("div");
el.innerHTML = "<p>some content</p>";
el.appendChild(new_el);

// and how you would do it in jQuery
$("#box")
.css({ "background-color": "#000" })
.append("<div><p>some content</p></div>");

1.javascript是一種在用戶端執行的指令碼語言。ajax是基於javascript的一種技術，它主要用途是提供非同步重新整理（只重新整理頁面的一部分，而不是整個頁面都重新整理）。一個是語言,一個是技術,兩者有本質區別.

2.javascript是一種在瀏覽器端執行的指令碼語言，Ajax是一種建立互動式網頁應用的開發技術 ，它是利用了一系列相關的技術其中就包括javascript。

3.

JavaScript可以做什嗎？

用JavaScript可以做很多事情，使網頁更具互動性，給網站的使用者提供更好,更令人興奮的體驗。JavaScript使你可以建立活躍的使用者介面，當使用者在頁面間導航時向他們反饋。

使用JavaScript來確保使用者以表單形式輸入有效資訊，這可以節省你的業務時間和開支。

使用JavaScript，根據使用者的操作可以建立定製的HTML頁面。

JavaScript還可以處理表單，設定cookie，即時構建HTML頁面以及建立基於Web的應用程式。

JavaScript不能做什嗎？

JavaScript是一種用戶端語言。（實際上，也存有伺服器端實現的JavaScript版本）。也就是說，設計它的目的是在使用者的機器上執行任務，而不是在伺服器上。因此，JavaScript有一些固有的限制，這些限制主要出於如下安全原因：
1.JavaScript不允許讀寫客戶機器上的檔案。這是有好處的，因為你肯定不希望網頁能夠讀取自己硬碟上的檔案，或者能夠將病毒寫入硬碟，或者能夠操作你的電腦上的檔案。唯一例外是，JavaScript可以寫到瀏覽器的cookie檔案，但是也有一些限制。
2.JavaScript不允許寫伺服器機器上的檔案。儘管寫伺服器上的檔案在許多方面是很方便的（比如儲存頁面點擊數或使用者填寫表單的資料），但是JavaScript不允許這麼做。相反，需要用伺服器上的一個程式處理和儲存這些資料。這個程式可以是Perl或者PHP等語言編寫的CGI運行在伺服器上的程式或者Java程式

3.JavaScript不能關閉不是它自己開啟的視窗。這是為了避免一個網站關閉其他任何網站的視窗，從而獨佔瀏覽器。

4.JavaScript不能從來自另一個伺服器的已經開啟的網頁中讀取資訊。換句話說，網頁不能讀取已經開啟的其它視窗中的資訊，因此無法探查訪問這個網站衝浪者還在訪問其它哪些網站。

Ajax是什嗎？

Ajax是一種建立互動式web應用程式的方式。Ajax是ASynchronouS JavaScript and XML(非同步JavaScript和xml)的縮寫，這個詞是由web開發人員JeSSe JameS Garrett在2005年年初首創的。嚴格地說，Ajax只是JavaScript的一小部分（儘管這一部分特別流行）。但是，隨著頻繁的使用，這個詞不再指某種技術本身（比如Java或JavaScript）。

在大多數情況下，Ajax一般是指以下這些技術的組合:

XMTML；

CSS（CaScading Style Sheet，層疊樣式表）；

使用JavaScript訪問的DOM（Document Object Model，文件物件模型）；

XML，這是在伺服器和用戶端之間傳輸的資料格式；

XMLHttpRequeSt,用來從伺服器擷取資料。

Ajax的好處是:

應用程式的大多數處理在使用者的瀏覽器中發生，而且對伺服器的資料請求往往很短。所以可以使用Ajax建立功能豐富的應用程式，這些應用程式依賴基於web的資料，但是其效能遠遠超過老式的，因為老式方法要求伺服器傳回整個HTML頁面來響應使用者操作。

一些公司已經在Ajax方面投入大量資金，尤其是Google。Google已經建立了幾個著名的Ajax應用程式，包括Gmail（基於web的電子郵件），Google calendar，Google docS和Google mapS。另外一個大型的Ajax支援者Yahoo！，它使用Ajax增強個人化的MY Yahoo門戶，Yahoo首頁，Yahoo Mail，等等。這兩家公司都向公眾開放了其web應用程式的介面，人們可以使用這些程式會獲得地圖並且在地圖上加上有意思，有用或者好玩的資訊，比如洛杉磯地區所有日本餐館的位置或者電影射鵬的位置。

1、JavaScript

定義：

javaScript的簡寫形式就是JS，是由Netscape公司開發的一種指令碼語言，一種廣泛用於用戶端Web開發的指令碼語言，常用來給HTML網頁添加動態功能（其編寫的程式可以被嵌入到HTML或XML頁面中，並直接在瀏覽器中解釋執行）。

組成部分：

     

核心（ECMAScript）、文件物件模型（Document Object Model，簡稱DOM）、瀏覽器物件模型（Browser Object Model，簡稱BOM)

描述：

Javascript就是適應動態網頁製作的需要而誕生的一種新的程式設計語言，如今越來越廣泛地使用於Internet網頁製作上。

Javascript是由 Netscape公司開發的一種指令碼語言（scripting language），或者稱為描述語言。在HTML基礎上，使用Javascript可以開發互動式Web網頁。

Javascript的出現使得網頁和使用者之間實現了一種即時性的、動態、互動性的關係，使網頁包含更多活躍的元素和更加精彩的內容。

Javascript短小精悍，又是在客戶機上執行的，大大提高了網頁的瀏覽速度和互動能力。同時它又是專門為製作Web網頁而量身定做的一種簡單的程式設計語言。

主流的javaScript架構有：YUI ,Dojo，Prototype，jQuery...

2、Ajax

定義：

AJAX即“Asynchronous JavaScript and XML”（非同步JavaScript和XML)，AJAX並非縮寫詞，而是由Jesse James Gaiiett創造的名詞，是指一種建立互動式網頁應用的網頁開發技術。

AJAX不是一個技術，它實際上是幾種技術，每種技術都有其獨特之處，合在一起就成了一個功能強大的新技術。

組成：

基於XHTML和CSS標準的表示；

使用Document Object Model進行動態顯示和互動；

使用XML和XSLT做資料互動和操作；

使用XML HttpRequest與伺服器進行非同步通訊；

使用JavaScript綁定一切。

描述：

Ajax是結合了Java技術、XML以及JavaScript等編程技術，可以讓開發人員構建基於Java技術的Web應用，並打破了使用頁面重載的管理。

Ajax技術使用非同步的HTTP請求，在Browser和Web Server之間傳遞資料，使Browser只更新部分網頁內容而不重新載入整個網頁.

Ajax是使用用戶端指令碼與Web伺服器交換資料的Web應用開發方法。這樣，Web頁面不用打斷互動流程進行重新加裁，就可以動態地更新。使用Ajax，使用者可以建立接近本地案頭應用的直接、高可用、更豐富、更動態Web使用者介面。

3、jQuery

定義：

jQuery是一個快速的，簡潔的javaScript庫，使使用者能更方便地處理HTML documents、events、實現動畫效果，並且方便地為網站提供AJAX互動。

特點：

輕量級、鏈式文法、CSS1-3選取器、跨瀏覽器、簡單、易擴充；

jQuery是一種獨立於伺服器端代碼的架構，獨立於ASP.NET或者JAVA；

jQuery是當前很流行的一個JavaScript架構，使用類似於CSS的選取器，可以方便的操作HTML元素，擁有很好的可擴充性，擁有不少外掛程式。

描述：

對於程式員來說，簡化javascript和ajax編程，能夠使程式員從設計和書寫繁雜的JS應用中解脫出來，將關注點轉向功能需求而非實現細節上，從而提高項目的開發速度。

對於使用者來說，改善了頁面的視覺效果，增強了與頁面的互動性，體驗更絢麗的網頁物資。

javaScript架構實際上是一系列工具和函數。

二、三者的關係

下面我用一張導圖來闡述這三者的關係：

解釋：

javaScript是用於Web用戶端開發的指令碼語言，Ajax是基於JS語言，主要組合JS、CSS、XML三種技術的新技術，是用於建立互動式網頁應用的網頁開發技術。jQuery是JS的架構，基於JS語言，集合Ajax技術開發出來的JS庫，封裝JS和Ajax的功能，提供函數介面，大大簡化了Ajax，JS的操作。

簡單總結：

1、JS是一門前端語言。

2、Ajax是一門技術，它提供了非同步更新的機制，使用用戶端與伺服器間交換資料而非整個頁面文檔，實現頁面的局部更新。

3、jQuery是一個架構，它對JS進行了封裝，使其更方便使用。jQuery使得JS與Ajax的使用更方便

詳細情況：

Actually only one of them is a programming language.
Javascript is a programming language which is used mainly in webpages for making websites interactive. When a webpage is parsed by the browser, it creates an in-memory representation of the page. It is a tree structure, which contains all elements on the page. So there is a root element, which contains the head and the body elements, which contain other elements, which contain other elements. So it looks like a tree basically. Now with javascript you can manipulate elements in the page using this tree. You can pick elements by their id (getElementsById), or their tag name (getElementsByTagName), or by simply going through the tree (parentNode, firstChild, lastChild, nextSibling, previousSibling, etc.). Once you have element(s) to work with you can modify them by changing their look, content or position on the page. This interface is also known as the DOM(Document Object Model). So you can do everything with Javascript that another programming language can do, and by using it embedded into wepages you also get an in-memory Object of the current webpage by which you can make changes to the page interactively.
AJAX is a technique of communication between the browser and the server within a page. Chat is a good example. You write a message, send a message and recive other messages without leaving the page. You can manage this interaction with Javascript on the client side, using an XMLHTTP Object provided by the browser.
jQuery is a library which aims to simplify client side web development in general (the two other above). It creates a layer of abstracion so you can reuse common languages like CSS and HTML in Javascript. It also includes functions which can be used to communicate with servers very easily (AJAX). It is written in Javascript, and will not do everything for you, only makes common tasks easier. It also hides some of the misconceptions and bugs of browsers.
To sum up:
Javascript is a programming language (objects, array, numbers, strings, calculations)
AJAX and jQuery uses Javascript
jQuery is for simplifing common tasks with AJAX and page manipulation (style, animation, etc.)
Finally, an example just to see some syntax:
// page manipulation in javascript
var el = document.getElementById("box");
el.style.backgroundColor = "#000";
var new_el = document.createElement("div");
el.innerHTML = "<p>some content</p>";
el.appendChild(new_el);
// and how you would do it in jQuery
$("#box")
.css({ "background-color": "#000" })
.append("<div><p>some content</p></div>");

1.javascript是一種在用戶端執行的指令碼語言。ajax是基於javascript的一種技術，它主要用途是提供非同步重新整理（只重新整理頁面的一部分，而不是整個頁面都重新整理）。一個是語言,一個是技術,兩者有本質區別.

2.javascript是一種在瀏覽器端執行的指令碼語言，Ajax是一種建立互動式網頁應用的開發技術 ，它是利用了一系列相關的技術其中就包括javascript。

3.
JavaScript可以做什嗎？

用JavaScript可以做很多事情，使網頁更具互動性，給網站的使用者提供更好,更令人興奮的體驗。JavaScript使你可以建立活躍的使用者介面，當使用者在頁面間導航時向他們反饋。

使用JavaScript來確保使用者以表單形式輸入有效資訊，這可以節省你的業務時間和開支。

使用JavaScript，根據使用者的操作可以建立定製的HTML頁面。

JavaScript還可以處理表單，設定cookie，即時構建HTML頁面以及建立基於Web的應用程式。

JavaScript不能做什嗎？

JavaScript是一種用戶端語言。（實際上，也存有伺服器端實現的JavaScript版本）。也就是說，設計它的目的是在使用者的機器上執行任務，而不是在伺服器上。因此，JavaScript有一些固有的限制，這些限制主要出於如下安全原因：
1.JavaScript不允許讀寫客戶機器上的檔案。這是有好處的，因為你肯定不希望網頁能夠讀取自己硬碟上的檔案，或者能夠將病毒寫入硬碟，或者能夠操作你的電腦上的檔案。唯一例外是，JavaScript可以寫到瀏覽器的cookie檔案，但是也有一些限制。
2.JavaScript不允許寫伺服器機器上的檔案。儘管寫伺服器上的檔案在許多方面是很方便的（比如儲存頁面點擊數或使用者填寫表單的資料），但是JavaScript不允許這麼做。相反，需要用伺服器上的一個程式處理和儲存這些資料。這個程式可以是Perl或者PHP等語言編寫的CGI運行在伺服器上的程式或者Java程式

3.JavaScript不能關閉不是它自己開啟的視窗。這是為了避免一個網站關閉其他任何網站的視窗，從而獨佔瀏覽器。

4.JavaScript不能從來自另一個伺服器的已經開啟的網頁中讀取資訊。換句話說，網頁不能讀取已經開啟的其它視窗中的資訊，因此無法探查訪問這個網站衝浪者還在訪問其它哪些網站。

Ajax是什嗎？

Ajax是一種建立互動式web應用程式的方式。Ajax是ASynchronouS JavaScript and XML(非同步JavaScript和xml)的縮寫，這個詞是由web開發人員JeSSe JameS Garrett在2005年年初首創的。嚴格地說，Ajax只是JavaScript的一小部分（儘管這一部分特別流行）。但是，隨著頻繁的使用，這個詞不再指某種技術本身（比如Java或JavaScript）。
在大多數情況下，Ajax一般是指以下這些技術的組合:

XMTML；

CSS（CaScading Style Sheet，層疊樣式表）；

使用JavaScript訪問的DOM（Document Object Model，文件物件模型）；

XML，這是在伺服器和用戶端之間傳輸的資料格式；

XMLHttpRequeSt,用來從伺服器擷取資料。

Ajax的好處是:

應用程式的大多數處理在使用者的瀏覽器中發生，而且對伺服器的資料請求往往很短。所以可以使用Ajax建立功能豐富的應用程式，這些應用程式依賴基於web的資料，但是其效能遠遠超過老式的，因為老式方法要求伺服器傳回整個HTML頁面來響應使用者操作。
一些公司已經在Ajax方面投入大量資金，尤其是Google。Google已經建立了幾個著名的Ajax應用程式，包括Gmail（基於web的電子郵件），Google calendar，Google docS和Google mapS。另外一個大型的Ajax支援者Yahoo！，它使用Ajax增強個人化的MY Yahoo門戶，Yahoo首頁，Yahoo Mail，等等。這兩家公司都向公眾開放了其web應用程式的介面，人們可以使用這些程式會獲得地圖並且在地圖上加上有意思，有用或者好玩的資訊，比如洛杉磯地區所有日本餐館的位置或者電影射鵬的位置。

1、JavaScript

定義：

javaScript的簡寫形式就是JS，是由Netscape公司開發的一種指令碼語言，一種廣泛用於用戶端Web開發的指令碼語言，常用來給HTML網頁添加動態功能（其編寫的程式可以被嵌入到HTML或XML頁面中，並直接在瀏覽器中解釋執行）。

組成部分：

核心（ECMAScript）、文件物件模型（Document Object Model，簡稱DOM）、瀏覽器物件模型（Browser Object Model，簡稱BOM）

描述：

Javascript就是適應動態網頁製作的需要而誕生的一種新的程式設計語言，如今越來越廣泛地使用於Internet網頁製作上。

Javascript是由 Netscape公司開發的一種指令碼語言（scripting language），或者稱為描述語言。在HTML基礎上，使用Javascript可以開發互動式Web網頁。

Javascript的出現使得網頁和使用者之間實現了一種即時性的、動態、互動性的關係，使網頁包含更多活躍的元素和更加精彩的內容。

Javascript短小精悍，又是在客戶機上執行的，大大提高了網頁的瀏覽速度和互動能力。同時它又是專門為製作Web網頁而量身定做的一種簡單的程式設計語言。

主流的javaScript架構有：YUI ,Dojo，Prototype，jQuery...

2、Ajax

定義：

AJAX即“Asynchronous JavaScript and XML”（非同步JavaScript和XML)，AJAX並非縮寫詞，而是由Jesse James Gaiiett創造的名詞，是指一種建立互動式網頁應用的網頁開發技術。

AJAX不是一個技術，它實際上是幾種技術，每種技術都有其獨特之處，合在一起就成了一個功能強大的新技術。

組成：

基於XHTML和CSS標準的表示；

使用Document Object Model進行動態顯示和互動；

使用XML和XSLT做資料互動和操作；

使用XML HttpRequest與伺服器進行非同步通訊；

使用JavaScript綁定一切。

描述：

Ajax是結合了Java技術、XML以及JavaScript等編程技術，可以讓開發人員構建基於Java技術的Web應用，並打破了使用頁面重載的管理。

Ajax技術使用非同步的HTTP請求，在Browser和Web Server之間傳遞資料，使Browser只更新部分網頁內容而不重新載入整個網頁。

Ajax是使用用戶端指令碼與Web伺服器交換資料的Web應用開發方法。這樣，Web頁面不用打斷互動流程進行重新加裁，就可以動態地更新。使用Ajax，使用者可以建立接近本地案頭應用的直接、高可用、更豐富、更動態Web使用者介面。

3、jQuery

定義：

jQuery是一個快速的，簡潔的javaScript庫，使使用者能更方便地處理HTML documents、events、實現動畫效果，並且方便地為網站提供AJAX互動。

特點：

輕量級、鏈式文法、CSS1-3選取器、跨瀏覽器、簡單、易擴充；

jQuery是一種獨立於伺服器端代碼的架構，獨立於ASP.NET或者JAVA；

jQuery是當前很流行的一個JavaScript架構，使用類似於CSS的選取器，可以方便的操作HTML元素，擁有很好的可擴充性，擁有不少外掛程式。

描述：

對於程式員來說，簡化javascript和ajax編程，能夠使程式員從設計和書寫繁雜的JS應用中解脫出來，將關注點轉向功能需求而非實現細節上，從而提高項目的開發速度。

對於使用者來說，改善了頁面的視覺效果，增強了與頁面的互動性，體驗更絢麗的網頁物資。

javaScript架構實際上是一系列工具和函數。

二、三者的關係

下面我用一張導圖來闡述這三者的關係：

解釋：

javaScript是用於Web用戶端開發的指令碼語言，Ajax是基於JS語言，主要組合JS、CSS、XML三種技術的新技術，是用於建立互動式網頁應用的網頁開發技術。jQuery是JS的架構，基於JS語言，集合Ajax技術開發出來的JS庫，封裝JS和Ajax的功能，提供函數介面，大大簡化了Ajax，JS的操作。