- 組成:
基於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.其他選擇器:屬性選擇器, 過濾選擇器