qileilove

          blog已經轉移至github,大家請訪問 http://qaseven.github.io/

          原生AJAX基礎講解及兼容處理

           AJAX = Asynchronous JavaScript and XML (異步的JavaScript和XML)。
            AJAX不是新技術 ,但卻是熱門的技術。它可以在不重載(刷新)整個頁面的情況下與服務器進行數據交互并更新網頁模塊。
            AJAX的優點有很多:可以局部刷新、按需加載,這樣就減輕了服務器的數據流量。并且在頁面更新的同時,用戶可以瀏覽器網頁的其它內容而不受影響,也減輕了結構負擔。AJAX也不是萬能的,在有以上優點的同時SEO也受到了影響。
            在學習AJAX之前,必須先有HTML/XHTML、CSS、JavaScript/DOM的基礎。
            AJAX與服務器進行數據交互,必然涉及到服務器端,與此同時也就涉及到了服務器請求對象的創建(new XMLHttpRequest())、確認請求方式(open())、發送請求(send())以及響應請求(responseText)。
            創建對象:
            IE9+及其它瀏覽器支持使用new XMLHttpRequest()的創建對象方式,而IE8及以下則使用new ActiveXObject()的方式進行創建。
            看了網上許多人使用如下代碼進行兼容:
          1 try {
          2     xml = new ActiveXObject("Msxml2.XMLHTTP");
          3 } catch(e) {
          4     try {
          5         xml = new ActiveXObject("Microsoft.XMLHTTP");
          6     } catch(e1) {
          7         xml = new XMLHttpRequest();
          8     }
          9 }
            筆者用IE11調試功能測試IE10及以下不寫new ActiveXObject("Msxml2.XMLHTTP")也是沒問題的,于是在創建對象時可以使用代碼:
            var xml = window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();
            確認請求:
            xml.open('get', 'url', true/false);
            第一個參數表示:string. 訪問方式,有兩具值:get/post,大部分的時候使用get
            第二個參數表示:string. 要連接的服務器網址
            第三個參數表示:boolean. 表示是否需要異步請求(true為發起異步加載)
            發送請求:
            xml.send();
            如果需要發送數據則采用xml.send(str);
            響應數據:
            xml.onreadystatechange = function() {
            if (xml.readyState == 4 && xml.status == 200) {
            alert(xml.responseText);
            }
            }
            status返回鏈接的狀態,一般返回200與404,200表示成功返回,404表示未找到頁面。
            readyState有5個值,分別為:0、1、2、3、4。而每當值改變時都會觸發一次onreadystatechange。
            readyState的5個值含義分別為:
            0: 請求未初始化
            1: 服務器連接已建立
            2: 請求已接收
            3: 請求處理中
            4: 請求已完成,且響應已就緒
            也就是當請求完成,并且找到頁面時,然后才獲取服務器上的數據。

          posted on 2014-08-26 09:35 順其自然EVO 閱讀(411) 評論(0)  編輯  收藏 所屬分類: 測試學習專欄web 前端性能測試

          <2014年8月>
          272829303112
          3456789
          10111213141516
          17181920212223
          24252627282930
          31123456

          導航

          統計

          常用鏈接

          留言簿(55)

          隨筆分類

          隨筆檔案

          文章分類

          文章檔案

          搜索

          最新評論

          閱讀排行榜

          評論排行榜

          主站蜘蛛池模板: 汝阳县| 渭南市| 崇义县| 太仆寺旗| 建德市| 涿州市| 醴陵市| 长汀县| 大新县| 苗栗市| 神池县| 寻乌县| 陆河县| 曲靖市| 晋宁县| 凤山县| 通江县| 永登县| 陵水| 宜兰县| 观塘区| 施秉县| 嘉禾县| 谷城县| 寿光市| 盘锦市| 哈密市| 阳朔县| 吉林市| 恩施市| 娱乐| 汉源县| 林甸县| 武强县| 桑植县| 夹江县| 清河县| 赤城县| 永康市| 新乡市| 志丹县|