《前端》Ajax（2）（黑马ajax两天课程）

最新推荐文章于 2024-08-30 12:59:36 发布

bellediao

最新推荐文章于 2024-08-30 12:59:36 发布

阅读量241

点赞数

分类专栏：前端 #jQuery #ajax 文章标签： ajax

本文链接：https://blog.csdn.net/bellediao/article/details/104201098

版权

本文详细介绍了Ajax的应用，包括响应类型的区别、模板引擎的使用、Ajax的封装以及jQuery中的Ajax实现。同时，探讨了跨域的概念、同源策略以及解决跨域的JSONP和CORS方法。内容涵盖模板引擎API、跨域请求的实践和限制，帮助读者深入理解Ajax在前端开发中的重要角色。

摘要由CSDN通过智能技术生成

1、ajax应用回顾：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>AJAX基础回顾</title>
</head>
<body>
  <script>
    var xhr = new XMLHttpRequest()
    xhr.open('GET', 'test.php')
    xhr.send()
    xhr.onreadystatechange = function () {
      if (this.readyState !== 4) return
      console.log(this)
    }
  </script>
</body>
</html>

2、ajax的相应类型：

response和responseText得到的结果是一样的。但是二者有什么区别呢？

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>AJAX基础回顾</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 永远获取的是字符串形式的响应体（它也不能用于二进制数据）
      //这个兼容性不好的时候用这个 ：
      //var res = JSON.parse(this.responseText)
      // console.log(res )
    }
  </script>
</body>
</html>

3、模板引擎使用

模板引擎：artTemplate：https://aui.github.io/art-template/
模板引擎实际上就是一个 API，模板引擎有很多种，使用方式大同小异，目的为了可以更容易的将数据渲染到
HTML中。

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

<!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/javascri

最低0.47元/天解锁文章

bellediao

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
《前端》Ajax（2）（黑马ajax两天课程）

1、ajax应用回顾：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>AJAX基础回顾</title></head><body> <script> var xhr = n...
复制链接

扫一扫

专栏目录