【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 页面是这样的

.js 文件中 ：

/**
* url : 你的接口名
**/
ajax_get_async（url,{}，
  function（data）{
    //成功执行的跳转方法
      element_content = '
' + data.name + '
';
      //通过jquery实现对象操作把数据添加到id为content的标签内。
      $("#content").append(element_content);
    }，
  function(){
    //失败了- -
    console.log("ERROR!");
    }）

CSS 文件中自己定义就在这里不赘述了。

此文仅供没弄过Html5 动态页面的小菜鸡学习，所以浅析也就是这样了。更深层次的东西......emmmm，等到来日吧。