Ajax,Jquery,Javascript的關系(一)


簡單總結:
1、JS是一門前端語言。
2、Ajax是一門技術,它提供了異步更新的機制,使用客戶端與服務器間交換數據而非整個頁面文檔,實現頁面的局部更新。
3、jQuery是一個框架,它對JS進行了封裝,使其更方便使用。jQuery使得JS與Ajax的使用更方便
 
關系:
jQuery與ajax都是js的一個框架,各有各的功能,若js是父親的話,jquery與ajax就是兩個兒子 。
 
什么是Ajax:
Ajax的全稱是:Asynchronous JavaScript And XML,指的是異步 JavaScript 及 XML(其實主要用的就是javascript技術),它不是一種新的編程語言,而是一種用於創建更好更快以及交互性更強的 Web 應用程序的技術。
Ajax的特點是異步 ,比如可以使用Ajax更新局部網頁、使用Ajax在不刷新頁面的情況下查詢數據、驗證用戶注冊的用戶名是否唯一等。
  • 組成:

   基於XHTML和CSS標准的表示;

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

           使用XML和XSLT做數據交互和操作;

           使用XML HttpRequest與服務器進行異步通信;

           使用JavaScript綁定一切。

XMLHttpRequest 對象可以在不刷新當前頁面的情況下向服務器端發送異步請求,並接收服務器端的響應結果,從而實現局部更新當前頁的功能,盡管名為XMLHttpRequest,但它並不限於和XML文檔一起使用,它還可以接收 JSON 或 HTML 等格式的文檔數據。

實現Ajax請求步驟:
    1、創建XMLHttpRequest核心對象
     var xhr = new XMLHttpRequest();
    2、准備請求/打開請求
     xhr.open(參數1,參數2,參數3);
      參數1:請求方式 GET請求|POST請求
      參數2:請求路徑 
      參數3:是否異步 true=異步|false=同步
      注:如果是GET請求,則如果有參數會直接跟在地址之后
    3、發送請求
     xhr.send(參數1);
      參數1:需要傳遞給服務器的數據
      如果是GET請求,則設置null
      如果是POST請求,有參數則設置參數,無參數則設置null
    4、如果請求方式是同步請求
      判斷響應狀態是否成功
       如果status==200,表示響應成功,得到響應結果
       xhr.responseText
       如果請求是異步請求
      監聽readyState的值是否為4 (readyState:判斷后台是否完全將數據成功)
       判斷響應狀態是否成功
        如果status==200,表示響應成功,得到響應結果
        xhr.responseText

 

什么是Jquery:

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

 

為什么用Jquery來實現Ajax?

傳統使用Ajax特點:

  • 步驟繁瑣

  • 方法、屬性、常用值較多不好記憶

  • 處理復雜結構的響應數據(如XML格式)比較煩瑣

  • 瀏覽器兼容問題

 

 

jQuery能大大簡化JavaScript程序的編寫

要使用jQuery,首先要在HTML代碼最前面加上對jQuery庫的引用,比如:

<script language="javascript" src="/js/jquery.min.js"></script>   //引用

Google提供的

http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js

jQuery官方的

http://code.jquery.com/jquery-1.6.min.js

 

JQuery使用:

"$"代表的是對JQuery對象的引用,所以$等同於JQuery
  
  DOM對象與Jquery包裝集對象的互相轉換
   DOM對象轉Jquery對象:$(dom對象);
   Jquery對象轉Dom對象:jquery對象[下標]
   
   當元素不存在時
    通過document獲取的結果,為null
    通過jquery獲取的結果,為空包裝集,需要通過length來判斷元素是否存在

選擇器:

1.基礎選擇器:id ,元素,類,全選擇,分組

2.層次選擇器:后代,子代,相鄰弟弟,同輩弟弟

3.表單選擇器:input元素選擇器,input表單選擇器,獲取所有的checkbox元素

4.其他選擇器:屬性選擇器,   過濾選擇器


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM