AJAX——基于请求加载数据

最新推荐文章于 2024-09-07 15:18:54 发布

weixin_33889665

最新推荐文章于 2024-09-07 15:18:54 发布

阅读量77

点赞数

文章标签： json javascript python ViewUI

原文链接：https://my.oschina.net/zoey1990/blog/87527

版权

2019独角兽企业重金招聘Python工程师标准>>>

搞点Demo，利于快速上手...

AJAX——Asynchronous JavaScript and XML(异步JavaScript和XML)

一个AJAX解决方案中涉及的技术如下：

JavaScript，通过用户或其他与浏览器相关事件捕获交互作用
XMLHttpRequest对象，通过这个对象可以在不中断其他浏览器任务的情况下向服务器发送请求
服务器上的XML文件，或者其他类似的数据格式
其他JavaScript，解释来自服务器的数据并将其呈现到页面上

选择数据格式——4种外部数据格式

HTML片段：工作量小，但不灵活
JSON文件：方便重用，但构建需认真
JavaScript文件：极大灵活性，但它不是一种真正的数据存储机制。能够加载JS，意味着可以将很少用到的行为提取到外部文件中，从而在加载该文件之前有效地减少页面中的代码量
XML文档：可移植性高，可重用。文件体积相对较大，解析和操作速度要慢一些

在不需要与其他应用程序共享数据的情况下，以HTML片段提供外部数据一般来说是最简单的。
如果数据需要重用，而且其他应用程序也可能因此受到影响，那么在性能和文件大小方面具有优势的JSON通常是不错的选择。
而当远程应用程序未知时，XML则能够为良好的互操作性提供最可靠的保证。

1. HTML片段——$('#id').load('title.html');

2. JSON:JavaScript Object Notation(JavaScript对象表示法)——$.getJSON()

JavaScript对象就是由一些"键-值"对组成的，而且可以方便地使用花括号({})来定义。JavaScript的数组则可以使用方括号([])进行动态定义。将这两种语法组合起来，可以轻松地表达复杂而且庞大的数据结构。Douglas Crockford为利用这种简单的语法起了一个名字，叫做 JSON(JavaScript Object Notation，JavaScript对象表示法)。通过这种表示法能够方便地取代数据量庞大的XML格式。

{
  "key": "value",
  "key2": [
    "array",
    "of",
    "items"
  ]
}

更多关于JSON的介绍：http://json.org/json-zh.html

$.getJSON()：全局函数，作为全局jQuery对象的方法定义，不是个别jQuery对象实例的方法，作为结果的对象只能提供给脚本，而不能插入到页面中。

$.each()：全局函数，不操作jQuery对象，它以一个数组或映射作为第1个参数，以一个回调函数作为第2个参数。此外，还需要将每次循环中数组或映射的当前索引和当前项作为回调函数的两个参数。

仍然以XMPP的roster为例。

新建roster.json：

[
  {
    "name": "User1",
    "group": "G1"
  },
  {
    "name": "User2",
    "group": "G1"
  },
  {
    "name": "User3",
    "group": "G2"
  },
  {
    "name": "User4",
    "group": "G2"
  },
  {
    "name": "User5",
    "group": "G1"
  },
  {
    "name": "User6",
    "group": "G3"
  },
  {
    "name": "User7",
    "group": "G2"
  },
  {
    "name": "User8",
    "group": "G3"
  },
  {
    "name": "User9",
    "group": "G1"
  },
  {
    "name": "User10",
    "group": "G1"
  }
]

注意前后是方括号，不要写成大括号。键值都要用引号。

新建index.html：需要jQuery

<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.8.2.min.js"></script>
<script src="script.js"></script>
<meta charset=utf-8 />
<title>getJSON Demo</title>
</head>
<body>
  <button id='get_roster'>Get Roster</button>
  <ul id='roster'>
  </ul>
</body>
</html>

新建script.js：

$(document).ready(function () {
  $('#get_roster').click(function () {
    $.getJSON('roster.json', function (data) {
      //清空列表
      $('#roster').empty();
      //遍历item
      $.each(data, function(index, item) {
        //获得group值
        var group = item['group'];
        if ($('#roster').find('#' + group).length === 0) {
          var group_html = '<li><span class="group">' + group + '</span><ul id="' + group +'"></ul></li>';
          $('#roster').append($(group_html));
        }
        var item_html = '<li class="item"><span class="name">' + item['name'] + '</span></li>';
        $('#roster #' + group).append($(item_html));
      });
    });
  });
});

注意获得name和group的方式：item['group']和item['name']，也可以写成item.group和item.name

尽管JSON格式很简洁，但它却不容许任何错误。所有方括号、花括号、引号和逗号都必须合理而且适当地存在，否则文件不会加载。而且，在多数浏览器中，当文件不会加载时我们都看不到错误信息；脚本只是静默地彻底中止运转。

3. JavaScript文件：将不需要马上执行的JS抽象出来——$.getScript()

有时候，在页面初次加载时就取得所需的全部JS也是没有必要的。具体需要取得哪个脚本，要视用户的操作而定。虽然可以在需要时动态地引入<script>标签，但注入所需代码的更优雅的方式则是通过jQuery直接加载.js文件。

新建roster.js：将上面对JSON处理的函数提取到单独的JS文件中

var rosters = [
  {
    "name": "User1",
    "group": "G1"
  },
  {
    "name": "User2",
    "group": "G1"
  },
  {
    "name": "User3",
    "group": "G2"
  },
  {
    "name": "User4",
    "group": "G2"
  },
  {
    "name": "User5",
    "group": "G1"
  },
  {
    "name": "User6",
    "group": "G3"
  },
  {
    "name": "User7",
    "group": "G2"
  },
  {
    "name": "User8",
    "group": "G3"
  },
  {
    "name": "User9",
    "group": "G1"
  },
  {
    "name": "User10",
    "group": "G1"
  }
];

$('#roster').empty();
//遍历item，代码与上面没多少区别
$.each(rosters, function () {
  //获得group值
  var group = this.group;
  if ($('#roster').find('#' + group).length === 0) {
    var group_html = '<li><span class="group">' + group + '</span><ul id="' + group +'"></ul></li>';
    $('#roster').append($(group_html));
  }
  var item_html = '<li class="item"><span class="name">' + this.name + '</span></li>';
  $('#roster #' + group).append($(item_html));
});

修改script.js：

$(document).ready(function () { $('#get_roster').click(function () {
    $.getScript('roster.js');
  });
});

4. XML文档——$.get()

转载于:https://my.oschina.net/zoey1990/blog/87527

weixin_33889665

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AJAX——基于请求加载数据

2019独角兽企业重金招聘Python工程师标准>>> ...
复制链接

扫一扫