前言
很早就想寫了的募逞,一直拖啊拖蛋铆,現(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篱昔,等到來日吧每强。