【Html5 實現(xiàn)數(shù)據(jù)交互】淺析使用Ajax 實現(xiàn)數(shù)據(jù)交互

前言

很早就想寫了的募逞,一直拖啊拖蛋铆,現(xiàn)在碰巧有時間,就來記錄一下對Ajax 的淺析理解吧放接。

在繼續(xù)寫下來的時候刺啦,我們首先要簡單理解這么寫問題。ajax 是什么纠脾?用來有什么用玛瘸?怎么使用?使用的時候我們應(yīng)該注意些什么苟蹈?


1糊渊、 Ajax 是什么?

相信如果要實現(xiàn)一個應(yīng)用前后端的數(shù)據(jù)交互慧脱,使之后臺數(shù)據(jù)反饋顯示在前端頁面渺绒,如果你接觸到的移動端Android 的話,你會知道HttpConnection 菱鸥, 那么如果是前端 Html5宗兼,那么你就會接觸到Ajax了。

作用就是用于把后臺通過http封裝好的數(shù)據(jù)存儲在URI讀取數(shù)來數(shù)據(jù)采缚。

AJAX 不是新的編程語言针炉,而是一種使用現(xiàn)有標(biāo)準(zhǔn)的新方法。
AJAX 是與服務(wù)器交換數(shù)據(jù)并更新部分網(wǎng)頁的藝術(shù)扳抽,在不重新加載整個頁面的情況下篡帕。
以上是W3cSchool 里面說的殖侵。
簡單的來說:你可以用Ajax獲取接口數(shù)據(jù),實現(xiàn)與后臺數(shù)據(jù)共通

2镰烧、Ajax如何使用拢军?

說到他的使用,無非也就是它的代碼如何如何使用怔鳖。使用的話茉唉,你首先要有一個接口數(shù)據(jù)。哈哈哈哈结执。其他好像也沒有什么注意的了度陆,就是你自己必須注意你自己的是什么類型的接口數(shù)據(jù)。比如 json 還是 xml ... 等等之類的献幔。還有 異步 還是 同步 懂傀。有空我會寫一篇關(guān)于異步同步的文章給自己也鞏固一下。
代碼如下蜡感,簡單封裝一下(我使用的是jquery封裝好的蹬蚁,好吧這可以延伸出js和jquery的對象操作了

//實現(xiàn)一個接口 (異步)
function ajax_get_async(url, data, callback, errorcb) {
    return $.ajax({
        url:  url,//接口名稱
        data: data,
        dataType: "json",
        cache: false,//是否緩存
        type: "GET",//GET請求 POST請求方式
        async: true,//是否異步
        success: function(data) {//成功回掉的方法
            callback(data);
        },
        error: function(jqXHR, textStatus, errorThrown) {
            console.log('errorThrown='+errorThrown);
            if(errorThrown != 'abort') {
            errorcb();
            }
        }
    });
}

然后數(shù)據(jù)中的data 就是你數(shù)據(jù)(我這里是json)的格式出來了。你可以通過data.對象類型名稱 郑兴,得到你想要的數(shù)據(jù)再展示在你的前段頁面咯犀斋。比如說得到是后臺的一個name 類型,就data.name 得到數(shù)據(jù)通過在js 中的append方法來實現(xiàn)動態(tài)加載頁面情连。反正也說到這里了叽粹。就就舉個例子吧。

在.html 頁面是這樣的
    <body>
        <div id="content"></div>
    </body>

.js 文件中 :

/**
* url : 你的接口名
**/
ajax_get_async(url,{}却舀,
  function(data){
    //成功執(zhí)行的跳轉(zhuǎn)方法
      element_content = '<div class="name">' + data.name + '</div>';
      //通過jquery實現(xiàn)對象操作把數(shù)據(jù)添加到id為content的標(biāo)簽內(nèi)球榆。
      $("#content").append(element_content);
    },
  function(){
    //失敗了- -
    console.log("ERROR!");
    })

CSS 文件中自己定義就在這里不贅述了禁筏。

此文僅供沒弄過Html5 動態(tài)頁面的小菜雞學(xué)習(xí)持钉,所以淺析也就是這樣了。更深層次的東西......emmmm篱昔,等到來日吧每强。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市州刽,隨后出現(xiàn)的幾起案子空执,更是在濱河造成了極大的恐慌,老刑警劉巖穗椅,帶你破解...
    沈念sama閱讀 211,561評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件辨绊,死亡現(xiàn)場離奇詭異,居然都是意外死亡匹表,警方通過查閱死者的電腦和手機(jī)门坷,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,218評論 3 385
  • 文/潘曉璐 我一進(jìn)店門耘眨,熙熙樓的掌柜王于貴愁眉苦臉地迎上來盛杰,“玉大人评疗,你說我怎么就攤上這事漱办。” “怎么了绸吸?”我有些...
    開封第一講書人閱讀 157,162評論 0 348
  • 文/不壞的土叔 我叫張陵鼻弧,是天一觀的道長。 經(jīng)常有香客問我锦茁,道長攘轩,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,470評論 1 283
  • 正文 為了忘掉前任码俩,我火速辦了婚禮撑刺,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘握玛。我一直安慰自己,他們只是感情好甫菠,可當(dāng)我...
    茶點故事閱讀 65,550評論 6 385
  • 文/花漫 我一把揭開白布挠铲。 她就那樣靜靜地躺著,像睡著了一般寂诱。 火紅的嫁衣襯著肌膚如雪拂苹。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,806評論 1 290
  • 那天痰洒,我揣著相機(jī)與錄音瓢棒,去河邊找鬼。 笑死丘喻,一個胖子當(dāng)著我的面吹牛脯宿,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播泉粉,決...
    沈念sama閱讀 38,951評論 3 407
  • 文/蒼蘭香墨 我猛地睜開眼连霉,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了嗡靡?” 一聲冷哼從身側(cè)響起跺撼,我...
    開封第一講書人閱讀 37,712評論 0 266
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎讨彼,沒想到半個月后歉井,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,166評論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡哈误,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,510評論 2 327
  • 正文 我和宋清朗相戀三年哩至,在試婚紗的時候發(fā)現(xiàn)自己被綠了躏嚎。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,643評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡憨募,死狀恐怖紧索,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情菜谣,我是刑警寧澤珠漂,帶...
    沈念sama閱讀 34,306評論 4 330
  • 正文 年R本政府宣布,位于F島的核電站尾膊,受9級特大地震影響媳危,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜冈敛,卻給世界環(huán)境...
    茶點故事閱讀 39,930評論 3 313
  • 文/蒙蒙 一待笑、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧抓谴,春花似錦暮蹂、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,745評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至滩届,卻和暖如春集侯,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背帜消。 一陣腳步聲響...
    開封第一講書人閱讀 31,983評論 1 266
  • 我被黑心中介騙來泰國打工棠枉, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人泡挺。 一個月前我還...
    沈念sama閱讀 46,351評論 2 360
  • 正文 我出身青樓辈讶,卻偏偏與公主長得像,于是被迫代替她去往敵國和親娄猫。 傳聞我的和親對象是個殘疾皇子荞估,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,509評論 2 348

推薦閱讀更多精彩內(nèi)容