首頁 > web前端 > js教程 > 零基礎學習AJAX之AJAX框架

零基礎學習AJAX之AJAX框架

亚连
發布: 2018-05-25 14:11:01
原創
1599 人瀏覽過

本文是零基礎學習AJAX系列教學的第二篇,我們介紹點不一樣的知識,學習下ajaxLib和ajaxGold兩款框架,方便我們更好的理解ajax.

上文(零基礎學習AJAX之AJAX的簡介與基礎)對ajax異步請求伺服器做了詳細的介紹和基礎應用,可以看出,ajax的一些過程是相對不變的。不必要每次發送請求都寫一遍發送程式碼,一些ajax開發人員已經把他們的流程封裝成ajax框架。

本節主要介紹ajaxLib和ajaxGold兩款框架。

1.ajaxLib

ajaxLib是一個非常小巧的ajax框架。
使用它首先將文件使用引入到頁面中。改框架是一個直接取得XML的框架,調運函數如下:

loadXMLDoc(url,callback,boolean)
其中,url為非同步請求的位址,callback為請求成功之後返回之後調運的函數名稱;boolean表示是否去掉XML文件中的空格,true為去掉空格

如:

<input type="button" value="display" onclick="loadXMLDoc(&#39;1-7.aspx&#39;,decodeXML,false);" />
登入後複製

採用AjaxLib框架傳回的XML文件保存在全域變數resultXML中,可以再decodeXML中寫程式對其進行分析,例如:

function decodeXML(){
var oTemp =resultXML.getElementsByTagName("temp");
document.getElementById("targetID").innerHTML = oTemp[0].firstChild.nodeValue;
}
登入後複製

可以看到程式碼長度比以前少了很多。

2.使用ajaxGold

Ajaxgold是另一個特別實用的ajax框架。

Ajaxgold是另一個特別實用的ajax框架。它有4個函數供開發者使用

getDataReturnText(url,callback);
getDataReturnXML(url,callback);
postDataReturnText(url,data,callback);
postDataReturnXML(url,data,callback);
登入後複製

前兩個用於get方式返回文本和XML,後面兩個函數是使用POST請求方式返回文本和XML,下面以postDataReturnText(url,data, callback)為例說明

<form>
    <input type="button" value="请求数据" onclick="postDataReturnText(&#39;1-8.aspx&#39;,&#39;a=2&b=3&#39;,display);">
 </form>
<p id="targetID">提取的数据将要显示在这</p>
登入後複製

以上程式碼向1-8.aspx發送數據,並傳遞數據a=2b=3,伺服器返回成功之後調運函數display()對返回值進行處理。

在ajaxGold中,返回文字作為callback函數的唯一參數來使用的,因此display()函數可以這樣寫

<script type="text/javascript">
            function display(text) {
                document.getElementById("targetID").innerHTML = text;
            }
</script>
登入後複製

上面是我整理給大家的,希望今後會對大家有幫助。

相關文章:

ajax的get請求時快取處理解決方法

服務端設定實作AJAX跨域請求

java jquery處理xml資料的方法

#

以上是零基礎學習AJAX之AJAX框架的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板