Ajax 阶段

Huuyep

已于 2022-09-30 09:02:11 修改

阅读量361

点赞数

文章标签： ajax javascript 前端

于 2022-09-26 21:45:04 首次发布

本文链接：https://blog.csdn.net/Huuyep/article/details/127060352

版权

什么是AJAX

Ajax 的全称是 Asynchronous Javascript And XML（异步 JavaScript 和 XML）。

通俗的理解：在网页中利用 XMLHttpRequest 对象和服务器进行数据交互的方式，就是Ajax。

axios

axios发起GET请求

语法：

axios.get('url', { params: { /*参数*/ } }).then(callback)

发起带参数的请求示例：

<body>
  <button id="btn">发起带参数的get请求</button>
  <script>
    let url = 'http://ajax-base-api-t.itheima.net/api/getbooks'
    const btn = document.querySelector('#btn')
    btn.addEventListener('click', function () {
      axios.get(url,{prarms:{id:1}}).then(res => { })
    })

  </script>
</body>

axios发起POST请求

语法：

axios.post('url',{ /*参数*/ }).then(callback)

发起请求示例：

 <body>
    <button id="btn">发起带参数的post请求</button>
    <script>
      let btn = document.querySelector('#btn')
      let url = 'http://ajax-base-api-t.itheima.net/api/addbook'
      btn.addEventListener('click', function () {
        axios.post(url, {
          bookname: '书名:1',
          author: '作者:2',
          publisher: '出版社:3',
        }).then(res => console.log(res)).catch(err => console.log(err))
      })
    </script>
  </body>

直接使用`axios`发起请求

语法： ===》注：类型为post用data，类型为get用params，不是两个一起用


axios({
 method: '请求类型',
 url: '请求的URL地址',
 data: { /* POST数据 */ },
 params: { /* GET参数 */ }
}).then(callback)

发起get请求示例 ===》注：这里的get大小写均可

<body>
  <button id="btn">axios发起请求(GET)</button>
  <script>
    const btn = document.querySelector('#btn')
    btn.addEventListener('click', function () {
      axios({
        method: 'GET',
        url: 'http://ajax-base-api-t.itheima.net/api/getbooks',
        params: {
          id: 1
        }
      }).then(res => {
        console.log(res)
      })
    })
  </script>
</body>

发起post请求示例 ===》注：这里的post大小写均可

<body>
  <button id="btn">axios发起请求(POST)</button>
  <script>
    const btn = document.querySelector('#btn')
    btn.addEventListener('click', function () {
      axios({
        method: 'POST',
        url: 'http://ajax-base-api-t.itheima.net/api/addbook',
        data: {
          bookname: '书名321',
          author: '作者654',
          publisher: '出版社987',
        }
      }).then(res => {
        console.log(res)
      })
    })
  </script>
</body>

Form表单同步提交

form表单上的属性：

  enctype：

        enctyoe的值默认是： application/x-www-form-urlencoded

        当上传的为文件时，必须设置为multipart/form-data

elements：

        elements 集合以数组形式返回 form 表单所有的元素

使用方式：form.elements

form表单同步提交的问题

1.页面会发生跳转 2.跳转之前的状态和数据会丢失

解决方法：form表单负责收集数据，axios负责请求服务器。

模板引擎

模板引擎是什么？

模板引擎，顾名思义，它可以根据程序员指定的模板结构和数据，自动生成一个完整的HTML页面。

模板引擎的好处

减少了字符串的拼接操作
是代码结构更清晰
使代码更易于阅读与维护

art-template使用步骤

art-template 是一个简约、超快的模板引擎

（附：art-template）

使用步骤

导入art-template 全局多一个函数template
定义数据
定义模板
模板的 HTML 结构，必须定义到 script 标签中，注意：需要把type属性改成 text/html

给模板添加一个 id

模板里面如果需要使用到传入的数据，利用 {{}} 来实现，{{}} ===> 占位符

调用template函数 template('id名', 数据)
渲染HTML结构

art-template模板引擎基本使用

输出

① 在 {{}} 语法中，可以进行变量的输出，对象属性的输出，三元表达式输出，逻辑或输出，加减乘除等表达式输出

原文输出

② 如果输出的 value 值中，包含了 HTML 标签结构，则需要使用原文输出语法，才能保证HTML标签被正常渲染 ===> {{@ value}

条件输出

③ {{if}} {{else if}} {{/if}}

循环输出

④ 循环后有两个变量，一个index（索引）一个value（循环项）固定用名

过滤器

语法：{{value | 函数名}}

时间过滤器实例

<div class="boxTime"></div>
  <script type="text/html" id="filter">
    <h3>现在的时间是：{{dayTime | TimeFilter}}</h3>
  </script>
  <script>
    const obj = {
      dayTime: new Date()
    }
    template.defaults.imports.TimeFilter = function (time) {
      let y = time.getFullYear()
      let m = time.getMonth() + 1
      let d = time.getDate()
      return `${y}-${m}-${d}`
    }
    const html = template('filter', obj)
    document.querySelector('.boxTime').innerHTML = html
  </script>

模板引擎的实现原理

exec函数

exec() 函数用于 检索字符串 中的正在表达式的匹配

如果字符串中又匹配的值，则返回该匹配值，否则返回 null

XMLHttpRequest的基本使用

初认识

XMLHttpRequest（简称 xhr），是浏览器提供的 Javascript 对象，可以请求服务器上的数据资源

使用xhr发起GET请求

步骤

创建 xhr 对象
调用 xhr.open() 函数
调用 xhr.send() 函数
监听 xhr.onreadystatechange 事件，监听里面需要判断 readyState，以及status

代码示例

// 1. 创建 XHR 对象
var xhr = new XMLHttpRequest()
// 2. 调用 open 函数，指定 请求方式 与 URL地址
xhr.open ('GET', '请求的URL地址')
// 3. 调用 send 函数，发起 Ajax 请求
xhr.send ()
// 4. 监听 onreadystatechange 事件
xhr.onreadystatechange = function () {
  // 4.1 监听 xhr 对象的请求状态 readyState ；与服务器响应的状态 status
  if (xhr.readyState === 4 && xhr.status === 200) {
    // 4.2 打印服务器响应回来的数据
    console.log(xhr.responseText)
  }
}