1. 程式人生 > >JavaScript,jQuery與Ajax的關係

JavaScript,jQuery與Ajax的關係

首先讓我們來看看它們分別是什麼:

1、(JavaScript)JS是一門前端語言。

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

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

AJAX即原生的XMLHttpRequest可以返回binary、text、xml格式的資料,經過封裝的ajax庫可以使用json格式。

Jquery是一個優秀的Javascript庫。相容各種瀏覽器使使用者能更方便地處理HTML、events、實現動畫效果,並且方便地為網站提供AJAX互動。
兩者其實不能作對比,一個是技術,一個是JS庫的名稱。

JavaScript是一種屬於網路的指令碼語言,已經被廣泛用於Web應用開發,常用來為網頁新增各式各樣的動態功能,為使用者提供更流暢美觀的瀏覽效果。通常JavaScript指令碼是通過嵌入在HTML中來實現自身的功能的。。

     能做什麼:

JavaScript

  1. 用JavaScript可以做很多事情,使網頁更具互動性,給站點的使用者提供更好,更令人興奮的體驗。

  2. JavaScript使你可以建立活躍的使用者介面,當用戶在頁面間導航時向他們反饋。

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

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

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

     特點:

    1、解釋性:javascript是一種解釋語言,原始碼不需要經過編譯,直接在瀏覽器上執行時被解釋。

     2、基於物件:javascripth是一種基於物件的語言,能運用自己已經建立了的物件,許多功能可以來自於指令碼環境中物件的方            法與指令碼的相互作用。

     3、事件驅動:JavaScript可以直接對使用者或客戶輸入做出響應,無需經過web服務程式。他對使用者的響應,是以事件驅動的          方式進行的,所謂事件驅動,指的是在主頁執行了某種操作所產生的動作,此動作稱為“事件”。

   4、跨平臺:JavaScript依賴於瀏覽器本身,與操作環境無關。只要能執行瀏覽器的計算機,並支援JavaScript的瀏覽器就可以         正確執行。

   5、安全性:JavaScript是一種安全性語言。它不允許訪問本地的磁碟,並不能將資料存入伺服器上;不允許對網路文字進行修          改和刪除,只能通過瀏覽器實現資訊瀏覽或動態互動。可有效的防止資料丟失。

   能做什麼:

 jQuery 

1.方便快捷獲取DOM元素  (如果使用純JavaScript的方式來遍歷DOM以及查詢DOM的某個部分編寫很多冗餘的程式碼,而使用jQuery只需要一行程式碼就足夠了。例如,找到所有應用了.content class樣式的div中所有的P標籤,只需要下面的一行程式碼)

1 $('div.content').find('p');

2.動態修改頁面樣式  (使用jQuery我們可以動態的修改頁面的CSS即使在頁面呈現以後。jQuery仍然能夠改變文件中某個部分的類或者個別的樣式屬性。例如,找到頁面所有的ul標籤的第一個li子標籤,然後為它們增加名為active的樣式,程式碼如下

1 $('ul > li:first').addClass('active');

3.動態改變DOM內容  (使用jQuery我們可以很容易地對頁面DOM進行修改,例如,為ID為"container"的元素新增一個連結)     

1 $('#container').append('<a href="more.html">more</a>');

4.響應使用者的呼叫操作      (jQuery提供了截獲形形色色的頁面事件(比如使用者單擊某個連結)的適當方式,而不需要使用事件處理程式拆散HTML程式碼。此外,它的事件處理API也消除了經常困擾Web開發人員瀏覽器的不一致性)   

1   $('button.show-details').click(function() {
2   $('div.details').show();
3   } );

5.微頁面新增動態效果    (jQuery中內建的一批淡入、擦除之類的效果,以及製作新效果的工具包,為此提供了便利)

1.            $(function () {
2             $("#btnShow").click(function () {
3                 $("#msubject").hide("slow");
4             });
5             });

6.統一ajax操作 (jQuery統一了多種瀏覽器的Ajax操作,使得開發人員更多的專注伺服器端開發)

1.   function (data, type) {
2     // 對Ajax返回的原始資料進行預處理
3     return data  // 返回處理後的資料
4     }

7.簡化常見的JavaScript任務 (除了這些完全針對文件的特性之外,jQuery也改進了對基本的JavaScript資料結構(例如迭代和陣列操作等))

1  $.each(obj, function(key, value) {
2   total += value;
3  });

特點:

1.強大的選中器,css選擇器,偽類選擇器

2.大量的APl函式,簡化DOM操做 

3. 鏈式操作(方法)

Ajax

     能做什麼:

1.可以在不重新整理頁面的情況和伺服器通訊 (非同步互動,就是隻有當使用者操作到了那個模組才會有資料交換,實現區域性重新整理資料 ,  使用者體驗更好,只加載使用者操作的模組,不用等整個頁面載入完。就像淘寶的首頁,你不往下滾動,下面的內容是永遠不會載入的,往下滾動的時候,網速不是特別快的時候你就能看見資料載入了,那個就是AJAX技術了)

2.可以用來使靜態網站訪問後臺資料庫,也可以做無重新整理頁面表單提交

特點:

1.區域性重新整理,具有更好的使用者體驗

2.ajax只需要產地少量的資料,具有更高的執行效率 

三者的關係

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