开发者社区> 流楚丶格念> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

Ajax 相应数据格式与处理

简介: Ajax 相应数据格式与处理
+关注继续查看

响应数据格式


提问:如果希望服务端返回一个复杂数据,该如何处理?


关心的问题就是服务端发出何种格式的数据,这种格式如何在客户端用 JavaScript 解析。


1. XML


一种数据描述手段


老掉牙的东西,简单演示一下啦,基本现在的项目不用了。


淘汰的原因:数据冗余太多


xml.php


<?php
header('Content-Type: application/xml');
?>
<?xml version="1.1" encoding="utf-8"?>
<person>
  <name>羊羊羊羊羊</name>
  <age>18</age>
  <gender>男</gender>
</person>


ajax-xml.html


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>AJAX 请求 XML 格式的数据</title>
</head>
<body>
  <script>

    var xhr = new XMLHttpRequest()
    xhr.open('GET', 'xml.php')
    xhr.send()
    xhr.onreadystatechange = function () {
      if (this.readyState !== 4) return
      // this.responseXML 专门用于获取服务端返回的 XML 数据,操作方式就是通过 DOM 的方式操作
      // 但是需要服务端响应头中的 Content-Type 必须是 application/xml
      console.log(this.responseXML.documentElement.children[0].innerHTML)
      console.log(this.responseXML.documentElement.getElementsByTagName('name')[0])
    }

  </script>
</body>
</html>


2. JSON


json基础介绍,文章链接:


https://yangyongli.blog.csdn.net/article/details/112911294


也是一种数据描述手段,类似于 JavaScript 字面量方式


服务端采用 JSON 格式返回数据,客户端按照 JSON 格式解析数据。


不管是 JSON 也好,还是 XML,只是在 AJAX 请求过程中用到,并不代表它们之间有必然的联系,它们只是数据协议罢了


单纯的用普通js去处理json,如果数据量过大的话那么是非常麻烦的,所以一般我们都用模板引擎来快速处理数据。


处理响应数据渲染


模板引擎:


artTemplate:https://aui.github.io/art-template/


模板引擎实际上就是一个 API,模板引擎有很多种,使用方式大同小异,目的为了可以更容易的将数据渲染到HTML中


具体用法可以去artTemplate文档中查看,非常详细也非常方便


案例:artTemplate模板引擎渲染数据


image


test.php 里放大量json数据


image


srtTemplate.php


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>AJAX 动态表格渲染</title>
</head>
<body>
  <table id="demo"></table>

  <!--
    script 标签的特点是
    1. innerHTML 永远不会显示在界面上
    2. 如果 type 不等于 text/javascript 的话,内部的内容不会作为 JavaScript 执行
  -->
  <script id="tmpl" type="text/x-art-template">
    {{each comments}}
    <!-- each 内部 $value 拿到的是当前被遍历的那个元素 -->
    <tr>
      <td>{{$value.author}}</td>
      <td>{{$value.content}}</td>
      <td>{{$value.created}}</td>
    </tr>
    {{/each}}
  </script>
  <script src="template-web.js"></script>
  <script>

    var xhr = new XMLHttpRequest()
    xhr.open('GET', 'test.php')
    xhr.send()
    xhr.onreadystatechange = function () {
      if (this.readyState !== 4) return
      var res = JSON.parse(this.responseText)

      // 模板所需数据
      var context = { comments: res.data }
      // 借助模板引擎的API 渲染数据
      var html = template('tmpl', context)
      console.log(html)

      document.getElementById('demo').innerHTML = html


      // 1. 选择一个模板引擎
      //  https://github.com/tj/consolidate.js#supported-template-engines
      // 2. 下载模板引擎JS文件
      // 3. 引入到页面中
      // 4. 准备一个模板
      // 5. 准备一个数据
      // 6. 通过模板引擎的JS提供的一个函数将模板和数据整合得到渲染结果HTML
      // 7. 将渲染结果的HTML 设置到 默认元素的 innerHTML 中

      // var tmpl = '{{if user}}<h2>{{user.name}}</h2>{{/if}}'
      //
      // 为什么不在JS变量中写模板?
      // 1. 如果将模板写到JS中,维护不方便,不能换行,没有着色
      // 为什么使用script标记
      // 1. script不会显示在界面

    }

  </script>
</body>
</html>


兼容方案(了解)


XMLHttpRequest 在老版本浏览器(IE5/6)中有兼容问题,可以通过另外一种方式代替


 var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP')

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
JS:使用Mock.js生成随机数据,拦截 Ajax 请求
JS:使用Mock.js生成随机数据,拦截 Ajax 请求
49 0
Docker实战(十)之分布式处理与大数据平台
分布式系统和大数据处理平台是目前业界关注的热门技术。 1.RabbitMQ RabbitMQ是一个支持AMQP的开源消息队列实现,由Erlang编写,因以高性能、高可用以及可伸缩性出名。它支持多种客户端,如:Java、Python、PHP、Ruby、.NET、JavaScript等。
1937 0
如何高效处理物联网中数据与消息
车联网在技术上具有相当高的门槛,要连接十万、百万量车甚至更多,用传统IT技术很难解决。阿里云在车联网领域具有成熟的解决方案和产品,每个细化领域的龙头企业都采用阿里巴巴的车联网解决方案,不受传统IT技术的局限,随着规模的扩大而水平扩展。
5966 0
+关注
流楚丶格念
csdn平台优质创作者,51cto TOP博主,360图书馆科技博主,燕山大学目前大三在读,日拱一卒,功不唐捐,加油!!!
1010
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载