ajax 关于响应类型

最新推荐文章于 2024-04-23 11:45:56 发布

weixin_34306446

最新推荐文章于 2024-04-23 11:45:56 发布

阅读量222

点赞数

文章标签： json javascript ViewUI

原文链接：http://www.cnblogs.com/lujieting/p/10291282.html

版权

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Title</title>
</head>
<body>
<script>
    var xhr = new XMLHttpRequest()
    xhr.open('GET', 'test.php')
    xhr.send()
    // 我们通过代码告诉请求代理对象，服务端响应给我们的是 JSON
    xhr.responseType = 'json'
    xhr.onreadystatechange = function () {
        if (this.readyState !== 4) return
        console.log(this.response)
        // this.response 获取到的结果会根据 this.responseType 的变化而变化
        // this.responseText 永远获取的是字符串形式的响应体
    }
</script>

<!--AJAX 动态表格渲染-->
<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>