當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

JavaScript、Ajax与jQuery的关系

發(fā)布時間：2024/1/23 javascript 23 豆豆

生活随笔收集整理的這篇文章主要介紹了 JavaScript、Ajax与jQuery的关系小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

簡單總結(jié)： 1、JS是一門前端語言。 2、Ajax是一門技術(shù)，它提供了異步更新的機制，使用客戶端與服務(wù)器間交換數(shù)據(jù)而非整個頁面文檔，實現(xiàn)頁面的局部更新。 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>");

http://blog.csdn.net/caozhangyingfei0109/article/details/10296157
http://blog.163.com/favour_love/blog/static/1774171512013631102710715/

1.javascript是一種在客戶端執(zhí)行的腳本語言。ajax是基于javascript的一種技術(shù)，它主要用途是提供異步刷新（只刷新頁面的一部分，而不是整個頁面都刷新）。一個是語言,一個是技術(shù),兩者有本質(zhì)區(qū)別. 2.javascript是一種在瀏覽器端執(zhí)行的腳本語言，Ajax是一種創(chuàng)建交互式網(wǎng)頁應(yīng)用的開發(fā)技術(shù) ，它是利用了一系列相關(guān)的技術(shù)其中就包括javascript。3.[來自http://hi.baidu.com/849653727/item/cda3aa87bd2cebd4d1f8cd94]JavaScript可以做什么？用JavaScript可以做很多事情，使網(wǎng)頁更具交互性，給站點的用戶提供更好,更令人興奮的體驗。JavaScript使你可以創(chuàng)建活躍的用戶界面，當用戶在頁面間導航時向他們反饋。使用JavaScript來確保用戶以表單形式輸入有效的信息，這可以節(jié)省你的業(yè)務(wù)時間和開支。使用JavaScript，根據(jù)用戶的操作可以創(chuàng)建定制的HTML頁面。JavaScript還可以處理表單，設(shè)置cookie，即時構(gòu)建HTML頁面以及創(chuàng)建基于Web的應(yīng)用程序。JavaScript不能做什么？JavaScript是一種客戶端語言。（實際上，也存有服務(wù)器端實現(xiàn)的JavaScript版本）。也就是說，設(shè)計它的目的是在用戶的機器上執(zhí)行任務(wù)，而不是在服務(wù)器上。因此，JavaScript有一些固有的限制，這些限制主要出于如下安全原因：1.JavaScript不允許讀寫客戶機器上的文件。這是有好處的，因為你肯定不希望網(wǎng)頁能夠讀取自己硬盤上的文件，或者能夠?qū)⒉《緦懭胗脖P，或者能夠操作你的計算機上的文件。唯一例外是，JavaScript可以寫到瀏覽器的cookie文件，但是也有一些限制。2.JavaScript不允許寫服務(wù)器機器上的文件。盡管寫服務(wù)器上的文件在許多方面是很方便的（比如存儲頁面點擊數(shù)或用戶填寫表單的數(shù)據(jù)），但是JavaScript不允許這么做。相反，需要用服務(wù)器上的一個程序處理和存儲這些數(shù)據(jù)。這個程序可以是Perl或者PHP等語言編寫的CGI運行在服務(wù)器上的程序或者Java程序3.JavaScript不能關(guān)閉不是它自己打開的窗口。這是為了避免一個站點關(guān)閉其他任何站點的窗口，從而獨占瀏覽器。4.JavaScript不能從來自另一個服務(wù)器的已經(jīng)打開的網(wǎng)頁中讀取信息。換句話說，網(wǎng)頁不能讀取已經(jīng)打開的其它窗口中的信息，因此無法探查訪問這個站點沖浪者還在訪問其它哪些站點。Ajax是什么？Ajax是一種創(chuàng)建交互式web應(yīng)用程序的方式。Ajax是ASynchronouS JavaScript and XML(異步JavaScript和xml)的縮寫，這個詞是由web開發(fā)人員JeSSe JameS Garrett在2005年年初首創(chuàng)的。嚴格地說，Ajax只是JavaScript的一小部分（盡管這一部分特別流行）。但是，隨著頻繁的使用，這個詞不再指某種技術(shù)本身（比如Java或JavaScript）。在大多數(shù)情況下，Ajax一般是指以下這些技術(shù)的組合:XMTML；CSS（CaScading Style Sheet，層疊樣式表）；使用JavaScript訪問的DOM（Document Object Model，文檔對象模型）；XML，這是在服務(wù)器和客戶端之間傳輸?shù)臄?shù)據(jù)格式；XMLHttpRequeSt,用來從服務(wù)器獲取數(shù)據(jù)。Ajax的好處是:應(yīng)用程序的大多數(shù)處理在用戶的瀏覽器中發(fā)生，而且對服務(wù)器的數(shù)據(jù)請求往往很短。所以可以使用Ajax建立功能豐富的應(yīng)用程序，這些應(yīng)用程序依賴基于web的數(shù)據(jù)，但是其性能遠遠超過老式的，因為老式方法要求服務(wù)器傳回整個HTML頁面來響應(yīng)用戶操作。一些公司已經(jīng)在Ajax方面投入大量資金，尤其是Google。Google已經(jīng)建立了幾個著名的Ajax應(yīng)用程序，包括Gmail（基于web的電子郵件），Google calendar，Google docS和Google mapS。另外一個大型的Ajax支持者Yahoo！，它使用Ajax增強個性化的MY Yahoo門戶，Yahoo首頁，Yahoo Mail，等等。這兩家公司都向公眾開放了其web應(yīng)用程序的接口，人們可以使用這些程序會獲得地圖并且在地圖上加上有意思，有用或者好玩的信息，比如洛杉磯地區(qū)所有日本餐館的位置或者電影射鵬的位置。

1、JavaScript

定義：

??????? javaScript的簡寫形式就是JS，是由Netscape公司開發(fā)的一種腳本語言，一種廣泛用于客戶端Web開發(fā)的腳本語言，常用來給HTML網(wǎng)頁添加動態(tài)功能（其編寫的程序可以被嵌入到HTML或XML頁面中，并直接在瀏覽器中解釋執(zhí)行）。

組成部分：

???????????? 核心（ECMAScript）、文檔對象模型（Document Object Model，簡稱DOM）、瀏覽器對象模型（Browser Object Model，簡稱BOM）

????????????????????????????? ?

描述：

???????????? Javascript就是適應(yīng)動態(tài)網(wǎng)頁制作的需要而誕生的一種新的編程語言，如今越來越廣泛地使用于Internet網(wǎng)頁制作上。

??????????? Javascript是由 Netscape公司開發(fā)的一種腳本語言（scripting language），或者稱為描述語言。在HTML基礎(chǔ)上，使用Javascript可以開發(fā)交互式Web網(wǎng)頁。

??????????? Javascript的出現(xiàn)使得網(wǎng)頁和用戶之間實現(xiàn)了一種實時性的、動態(tài)的、交互性的關(guān)系，使網(wǎng)頁包含更多活躍的元素和更加精彩的內(nèi)容。

??????????? Javascript短小精悍，又是在客戶機上執(zhí)行的，大大提高了網(wǎng)頁的瀏覽速度和交互能力。同時它又是專門為制作Web網(wǎng)頁而量身定做的一種簡單的編程語言。

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

2、Ajax

定義：

???????? AJAX即“Asynchronous JavaScript and XML”（異步JavaScript和XML)，AJAX并非縮寫詞，而是由Jesse James Gaiiett創(chuàng)造的名詞，是指一種創(chuàng)建交互式網(wǎng)頁應(yīng)用的網(wǎng)頁開發(fā)技術(shù)。

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

組成：

??????????? 基于XHTML和CSS標準的表示；

?????????? 使用Document Object Model進行動態(tài)顯示和交互；

?????????? 使用XML和XSLT做數(shù)據(jù)交互和操作；

?????????? 使用XML HttpRequest與服務(wù)器進行異步通信；

?????????? 使用JavaScript綁定一切。

描述：

??????????? Ajax是結(jié)合了Java技術(shù)、XML以及JavaScript等編程技術(shù)，可以讓開發(fā)人員構(gòu)建基于Java技術(shù)的Web應(yīng)用，并打破了使用頁面重載的管理。

?????????? Ajax技術(shù)使用非同步的HTTP請求，在Browser和Web Server之間傳遞數(shù)據(jù)，使Browser只更新部分網(wǎng)頁內(nèi)容而不重新載入整個網(wǎng)頁。

??????????Ajax是使用客戶端腳本與Web服務(wù)器交換數(shù)據(jù)的Web應(yīng)用開發(fā)方法。這樣，Web頁面不用打斷交互流程進行重新加裁，就可以動態(tài)地更新。使用Ajax，用戶可以創(chuàng)建接近本地桌面應(yīng)用的直接、高可用、更豐富、更動態(tài)的Web用戶界面。

3、jQuery

定義：

??????? jQuery是一個快速的，簡潔的javaScript庫，使用戶能更方便地處理HTML documents、events、實現(xiàn)動畫效果，并且方便地為網(wǎng)站提供AJAX交互。

特點：

???????? ?? 輕量級、鏈式語法、CSS1-3選擇器、跨瀏覽器、簡單、易擴展；

?????????? jQuery是一種獨立于服務(wù)器端代碼的框架，獨立于ASP.NET或者JAVA；

????????? ?jQuery是當前很流行的一個JavaScript框架，使用類似于CSS的選擇器，可以方便的操作HTML元素，擁有很好的可擴展性，擁有不少插件。

描述：

??????????? 對于程序員來說，簡化javascript和ajax編程，能夠使程序員從設(shè)計和書寫繁雜的JS應(yīng)用中解脫出來，將關(guān)注點轉(zhuǎn)向功能需求而非實現(xiàn)細節(jié)上，從而提高項目的開發(fā)速度。

?????????? 對于用戶來說，改善了頁面的視覺效果，增強了與頁面的交互性，體驗更絢麗的網(wǎng)頁物資。

????????? javaScript框架實際上是一系列工具和函數(shù)。

二、三者的關(guān)系

??????? 下面我用一張導圖來闡述這三者的關(guān)系：

解釋：

???????? javaScript是用于Web客戶端開發(fā)的腳本語言，Ajax是基于JS語言，主要組合JS、CSS、XML三種技術(shù)的新技術(shù)，是用于創(chuàng)建交互式網(wǎng)頁應(yīng)用的網(wǎng)頁開發(fā)技術(shù)。jQuery是JS的框架，基于JS語言，集合Ajax技術(shù)開發(fā)出來的JS庫，封裝JS和Ajax的功能，提供函數(shù)接口，大大簡化了Ajax，JS的操作。