成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

ajax入門之建立XHR對象

Leck1e / 635人閱讀

摘要：入門之建立對象今天幫朋友寫了一個簡單的的發(fā)現(xiàn)了一些東西，決定寫一篇文章記錄一下，避免以后挖坑。函數(shù)會啟動一個請求但并不是發(fā)送，可以看作辦事之前的準備。小結(jié)這是一個手動創(chuàng)建對象并使用最簡單的方法。

ajax入門之建立XHR對象

今天幫朋友寫了一個簡單的ajax的demo,發(fā)現(xiàn)了一些東西，決定寫一篇文章記錄一下，避免以后挖坑。

創(chuàng)建XMLHttpRequest
通常
    function createXHR(){
        if(XMLHttpRequest){
            return new XMLHttpRequest();
        }else{
            return new ActiveXObject("Microsoft.XMLHTTP")
        }
    }

這一段js代碼來源自w3school,用于創(chuàng)建兼容各瀏覽器的XMLHttpRequest對象的含義：

檢測客戶端是否有XMLHttpRequest，否則使用ActiveXObject  
關(guān)于XMLHttpRequest對象，IE5是第一個引入XHR對象的瀏覽器，在IE5中，XHR是通過activeX對象實現(xiàn)的.因此在IE中可能遇到三種不同版本的XHR對象，MXSML2.XMLHTTP，MXSML2.XMLHttp.3.0和MXSML2.XMLHttp.6.0。
IE的坑

為了向我們偉大的IE瀏覽器“致敬”，我們必須添加額外的代碼進行創(chuàng)建
以下代碼適用與IE7以下的情況：

function createXHR(){
    if(typeof argument.callee.activeXString != "string"){
        var versions = ["MXSML2.XMLHTTP","MXSML2.XMLHttp.3.0","MXSML2.XMLHttp.6.0"];
        var i len;
        for(i = 0;len=versions.length;i
            }
        }
    }
    return new ActiveXObject(argument.callee.activeXString);
}
完整走一遍

但往往我不會考慮這么多，能看懂前面的函數(shù)也是很不容易了，再讓我寫出來，我的天！當大家和我這么懶的時候，可以直接使用第一份代碼，也就是w3school那一套代碼，我們使用原生的XHR對象進行創(chuàng)建。
當然，我們這里也給出完整的代碼。

function createXHR(){
    if(typeof XMLHttpRequest != "undefined"){
        return new XMLHttpRequest();
    }else if(typeof argument.callee.activeXString != "string"){
        var versions = ["MXSML2.XMLHTTP","MXSML2.XMLHttp.3.0","MXSML2.XMLHttp.6.0"];
        var i len;
        for(i = 0;len=versions.length;i
            }
        }
        return new ActiveXObject(argument.callee.activeXString);
    }else{
        throw new Error("沒有XHR對象存在");
    }
}
用法



    
    demo

創(chuàng)建好XHR對象只是第一步，才是我們各種操作的開始。

open()

open()函數(shù)會啟動一個請求,但并不是發(fā)送，可以看作辦事之前的準備。
它接受三個函數(shù):

open(get/post,url,false/true)

請求類型:最常用的就是get和post

路徑：就是要請求的操作的文件的url

是否異步

我們這是使用的是get方式，因為我們并沒有要發(fā)送的數(shù)據(jù)。
異步我們選擇了true,無意中發(fā)現(xiàn)在使用false時候，火狐出現(xiàn)了警告：

主線程中同步的 XMLHttpRequest 已不推薦使用，因其對終端用戶的用戶體驗存在負面影響。

具體需要再了解。

send()

自然而然，準備好了就要發(fā)送，send()只接受一個參數(shù)，那就是要發(fā)送的數(shù)據(jù)。我們使用的是get，沒有數(shù)據(jù)，那就null好了。

php

因為這篇文章主要是講ajax，所以php部分我只用了最簡單的echo

這樣就能在接受到請求后返回一個字符串。

回調(diào)函數(shù)

我們怎么樣才能直到php文件將數(shù)據(jù)處理完，返回給客戶端了呢？
這時候我們就需要監(jiān)測XHR的readyState屬性。先介紹以下readyState屬性：

0：初始化未完成，未調(diào)用open()

1: 啟動調(diào)永了open()函數(shù)，但是還沒有send

2：發(fā)送，調(diào)永了send()函數(shù)，還沒有接收到響應(yīng)

3：開始接收,接收到部分的數(shù)據(jù)

4：完成，接收到了全部數(shù)據(jù)。

所以在上面的函數(shù)中我們可以看到，我們?nèi)ケO(jiān)測readyState屬性，等到等于4的時候，也就是數(shù)據(jù)接收完成之后，我們開始對數(shù)據(jù)進行處理。

小結(jié)

這是一個手動創(chuàng)建XHR對象并使用最簡單的方法。以后回繼續(xù)進行更新。介紹其更詳細的用法。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/86460.html

相關(guān)文章

  • Ajax基礎(chǔ)入門

    摘要：一是什么的全稱是，其中，是異步的意思。一定要注意如果請求是請求格式必須設(shè)置請求頭字符串拼接模板字符串 一、ajax是什么？ 1、ajax?的全稱是Asynchronous?JavaScript?and?XML，其中，Asynchronous?是異步的意思。 2、是7種技術(shù)的綜合，它包含了：JavaScript、xml、xstl、xhtml、dom、 xmlhttprequest、cs...

    reclay 評論0 收藏0

  • JavaScript之web通信

    摘要：設(shè)置一個定時器，定時詢問服務(wù)器是否有信息，每次建立連接傳輸數(shù)據(jù)之后，鏈接會關(guān)閉。通過調(diào)用此程序提供的套接口接口與服務(wù)器端的套接口進行通信。 本文同步自我的博客園：http://hustskyking.cnblogs.com P.S: 各個平臺中就 segmentFault 寫博客體驗最好了！ web通信，一個特別大的topic，涉及面也是很廣的。因最近學(xué)習(xí)了 javascript 中...

    Honwhy 評論0 收藏0

  • JavaScript通信之Ajax

    摘要：表單提交在中提供了表單提交的功能，我們可以通過表單把數(shù)據(jù)從前臺提交到后臺，通過設(shè)置事件，可以為按鈕或其它元素同樣可以觸發(fā)表單提交的事件賬號請輸入賬號密碼請輸入密碼重置重置提交表示獲取頁面中所有的表單，返回一個數(shù)組提交成功通過表單提交數(shù)據(jù)不需 表單提交 在HTML中提供了表單提交的功能，我們可以通過表單把數(shù)據(jù)從前臺提交到后臺，通過設(shè)置submit事件，可以為按鈕或其它元素同樣可以觸發(fā)表單...

    DDreach 評論0 收藏0

  • Ajax學(xué)習(xí)筆記

    摘要：最近在學(xué)，剛剛?cè)腴T，用到很多與相關(guān)的交互。也用了挺久的了，想寫一下學(xué)習(xí)筆記來記錄一下。實現(xiàn)過程是的基礎(chǔ)，是核心對象，首先要實例化一個對象進行請求，規(guī)定請求的類型以及是否異步處理請求。響應(yīng)服務(wù)器狀態(tài)響應(yīng)服務(wù)器狀態(tài)涉及對象的三個重要的屬性。 最近在學(xué)php，剛剛?cè)腴T，用到很多與Ajax相關(guān)的交互。Ajax也用了挺久的了，想寫一下學(xué)習(xí)筆記來記錄一下。今天先簡單寫一下原理和過程。歡迎大家一起探...

    Forest10 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<