前言
很早就想写了的,一直拖啊拖,现在碰巧有时间,就来记录一下对Ajax 的浅析理解吧。
在继续写下来的时候,我们首先要简单理解这么写问题。ajax 是什么?用来有什么用?怎么使用?使用的时候我们应该注意些什么?
1、 Ajax 是什么?
相信如果要实现一个应用前后端的数据交互,使之后台数据反馈显示在前端页面,如果你接触到的移动端Android 的话,你会知道HttpConnection , 那么如果是前端 Html5,那么你就会接触到Ajax了。
作用就是用于把后台通过http封装好的数据存储在URI读取数来数据。
AJAX 不是新的编程语言,而是一种使用现有标准的新方法。
AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下。
以上是W3cSchool 里面说的。
简单的来说:你可以用Ajax获取接口数据,实现与后台数据共通
2、Ajax如何使用?
说到他的使用,无非也就是它的代码如何如何使用。使用的话,你首先要有一个接口数据。哈哈哈哈。其他好像也没有什么注意的了,就是你自己必须注意你自己的是什么类型的接口数据。比如 json 还是 xml ... 等等之类的。还有 异步 还是 同步 。有空我会写一篇关于异步同步的文章给自己也巩固一下。
代码如下,简单封装一下(我使用的是jquery封装好的,好吧这可以延伸出js和jquery的对象操作了)
//实现一个接口 (异步)
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();
}
}
});
}
然后数据中的data 就是你数据(我这里是json)的格式出来了。你可以通过data.对象类型名称 ,得到你想要的数据再展示在你的前段页面咯。比如说得到是后台的一个name 类型,就data.name 得到数据通过在js 中的append方法来实现动态加载页面。反正也说到这里了。就就举个例子吧。
在.html 页面是这样的
<body>
<div id="content"></div>
</body>
.js 文件中 :
/**
* url : 你的接口名
**/
ajax_get_async(url,{},
function(data){
//成功执行的跳转方法
element_content = '<div class="name">' + data.name + '</div>';
//通过jquery实现对象操作把数据添加到id为content的标签内。
$("#content").append(element_content);
},
function(){
//失败了- -
console.log("ERROR!");
})
CSS 文件中自己定义就在这里不赘述了。
此文仅供没弄过Html5 动态页面的小菜鸡学习,所以浅析也就是这样了。更深层次的东西......emmmm,等到来日吧。