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

資訊專欄INFORMATION COLUMN

Ajax的原理和實現(xiàn)步驟

Harpsichord1207 / 2278人閱讀

摘要：如果我們假設(shè)文件和文件位于相同的目錄，那么代碼是這樣的其他方法如下編程步驟創(chuàng)建對象設(shè)置請求方式調(diào)用回調(diào)函數(shù)發(fā)送請求處理返回的結(jié)果創(chuàng)建對象一般來說手寫的時候，首先需要判斷該瀏覽器是否支持對象，如果支持則創(chuàng)建該對象，如果不支持則創(chuàng)建對象。

Ajax的簡介 什么是Ajax

AJAX = Asynchronous JavaScript and XML（異步的 JavaScript 和 XML）。

AJAX 不是新的編程語言，而是一種使用現(xiàn)有標(biāo)準(zhǔn)的新方法。

AJAX 可以在不重新加載整個網(wǎng)頁的情況下，與服務(wù)器交換數(shù)據(jù)，并且更新部分網(wǎng)頁
。

Ajax所包含的技術(shù)

AJAX 的核心是 XMLHttpRequest 對象。

1.使用CSS和XHTML來表示。

2.使用DOM模型來交互和動態(tài)顯示。

3.使用XMLHttpRequest來和服務(wù)器進(jìn)行異步通信。

4.使用javascript來綁定和調(diào)用。

Ajax的工作原理

在用戶和服務(wù)器之間添加了一個中間層（AJAX引擎），使用戶操作與服務(wù)器響應(yīng)異步話，并不是所有的用戶請求都提交給服務(wù)器。
數(shù)據(jù)驗證和數(shù)據(jù)處理等都交給Ajax引擎自己來做，只有確定需要從服務(wù)器讀取新數(shù)據(jù)時再由Ajax引擎代為向服務(wù)器提交請求

來看看兩個方式的區(qū)別

XMLHttpRequ對象常用的三個屬性

onreadystatechange屬性
存有服務(wù)器響應(yīng)的參數(shù)

readyState屬性
存有服務(wù)器響應(yīng)狀態(tài)的信息

readyState 屬性可能的值：

responseText 屬性

可以取得有服務(wù)器返回的數(shù)據(jù)

其他的屬性如下

xmlhttprequst的方法

open()方法

xmlHttp.open("GET","test.php",true);
第一個參數(shù)定義發(fā)送請求所使用的方法
第二個參數(shù)規(guī)定服務(wù)器腳本的URL
第三個參數(shù)規(guī)定了請求是否需要異步的處理

send()方法

send() 方法將請求送往服務(wù)器。如果我們假設(shè) HTML 文件和 PHP 文件位于相同的目錄，那么代碼是這樣的：

xmlHttp.send(null);

其他方法如下

AJAX編程步驟 
1.創(chuàng)建XMLHttpRequest對象
2.設(shè)置請求方式
3.調(diào)用回調(diào)函數(shù)
4.發(fā)送請求
5.處理返回的結(jié)果
創(chuàng)建XMLHttpRequest對象 
    var xmlhttp=new XMLHttpRequest();
一般來說手寫AJAX的時候，首先需要判斷該瀏覽器是否支持XMLHttpRequest對象，如果支持則創(chuàng)建該對象，如果不支持則創(chuàng)建ActiveX對象。
    //第一步：創(chuàng)建XMLHttpRequest對象
    var xmlHttp;
    if (window.XMLHttpRequest) { //非IE
    xmlHttp = new XMLHttpRequest();
    } else if (window.ActiveXObject) { //IE
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP")
    }
設(shè)置請求方式 
一般是有兩種請求方式，一個是GET一個是POST，需要設(shè)置具體使用哪個請求方式
xmlhttp.open("method",URL,async);

參數(shù)如下

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

當(dāng)前為異步請求的時候，需要寫一個回調(diào)函數(shù)，XMLHttpRequest對象有一個屬性，這個屬性要返回一個匿名的方法，所謂的回調(diào)函數(shù)，就是請求在后臺處理完，再返回到前臺所實現(xiàn)的功能。

xmlhttp.onreadystatechange = function (ev2) {
                    /*
                    0: 請求未初始化
                    1: 服務(wù)器連接已建立
                    2: 請求已接收
                    3: 請求處理中
                    4: 請求已完成，且響應(yīng)已就緒
                    */
                    if(xmlhttp.readyState === 4){
                        // 判斷是否請求成功
                        if(xmlhttp.status >= 200 && xmlhttp.status < 300 ||
                           xmlhttp.status === 304){
                            // 5.處理返回的結(jié)果
                            console.log("接收到服務(wù)器返回的數(shù)據(jù)");
                        }else{
                            console.log("沒有接收到服務(wù)器返回的數(shù)據(jù)");
                        }

                    }
                }
發(fā)送請求 
xmlhttp.send

##處理返回的結(jié)果

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

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

相關(guān)文章

  • Ajax的原理和編程步驟

    摘要：如果我們假設(shè)文件和文件位于相同的目錄，那么代碼是這樣的其他方法如下編程步驟創(chuàng)建對象設(shè)置請求方式調(diào)用回調(diào)函數(shù)發(fā)送請求處理返回的結(jié)果創(chuàng)建對象一般來說手寫的時候，首先需要判斷該瀏覽器是否支持對象，如果支持則創(chuàng)建該對象，如果不支持則創(chuàng)建對象。 Ajax的簡介 什么是Ajax AJAX = Asynchronous JavaScript and XML（異步的 JavaScript 和 XML）...

    phpmatt 評論0 收藏0

  • 20K前端大佬面試(關(guān)于如何回答ajax跨域問題)

    摘要：在接觸前端開發(fā)起，跨域這個詞就一直以很高的頻率在我們學(xué)習(xí)工作中重復(fù)出現(xiàn)，最近在工作中遇到了跨域的相關(guān)問題，這里我把它總結(jié)記錄一下。 在接觸前端開發(fā)起，跨域這個詞就一直以很高的頻率在我們學(xué)習(xí)工作中重復(fù)出現(xiàn)，最近在工作中遇到了跨域的相關(guān)問題，這里我把它總結(jié)記錄一下。關(guān)于跨域，有N種類型，現(xiàn)在我只專注于ajax請求跨域(ajax跨域只是屬于瀏覽器同源策略中的一部分,其它的這里不做介紹)，內(nèi)容...

    Yangyang 評論0 收藏0

  • 前端面試題

    摘要：前端面試題總結(jié)，持續(xù)更新和區(qū)別瀏覽器的緩存機制提供了可以將用戶數(shù)據(jù)存儲在客戶端上的方式，可以利用等跟服務(wù)端進(jìn)行數(shù)據(jù)交互。 前端面試題總結(jié)，持續(xù)更新 cookies sessionStorage和localstorage區(qū)別 瀏覽器的緩存機制提供了可以將用戶數(shù)據(jù)存儲在客戶端上的方式，可以利用cookie,session等跟服務(wù)端進(jìn)行數(shù)據(jù)交互。相同點：都是存儲在客戶端不同點：showI...

    raledong 評論0 收藏0

  • 前端面試題

    摘要：前端面試題總結(jié)，持續(xù)更新和區(qū)別瀏覽器的緩存機制提供了可以將用戶數(shù)據(jù)存儲在客戶端上的方式，可以利用等跟服務(wù)端進(jìn)行數(shù)據(jù)交互。 前端面試題總結(jié)，持續(xù)更新 cookies sessionStorage和localstorage區(qū)別 瀏覽器的緩存機制提供了可以將用戶數(shù)據(jù)存儲在客戶端上的方式，可以利用cookie,session等跟服務(wù)端進(jìn)行數(shù)據(jù)交互。相同點：都是存儲在客戶端不同點：showI...

    seal_de 評論0 收藏0

發(fā)表評論

0條評論

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