【Html5 实现数据交互】浅析使用Ajax 实现数据交互

前言

很早就想写了的,一直拖啊拖,现在碰巧有时间,就来记录一下对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,等到来日吧。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,639评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,277评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,221评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,474评论 1 283
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,570评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,816评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,957评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,718评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,176评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,511评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,646评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,322评论 4 330
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,934评论 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,755评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,987评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,358评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,514评论 2 348

推荐阅读更多精彩内容