Ajax学习-下（jQuery中的Ajax）

最新推荐文章于 2024-03-13 07:00:00 发布

阿发学测试

最新推荐文章于 2024-03-13 07:00:00 发布

阅读量98

点赞数

分类专栏：前端学习

本文链接：https://blog.csdn.net/weixin_42603991/article/details/102569291

版权

前端学习专栏收录该内容

22 篇文章 0 订阅

订阅专栏

模板引擎使用

模板引擎：
artTemplate：https://aui.github.io/art-template/

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

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

封装

AJAX 请求封装

函数就可以理解为一个想要做的事情，函数体中约定了这件事情做的过程，直到调用时才开始工作。
将函数作为参数传递就像是将一个事情交给别人，这就是委托的概念

<script>

    // 封装者
    // =============================

    function ajax (method, url, params, done) {
      method = method.toUpperCase()
      var xhr = new XMLHttpRequest()

      if (typeof params === 'object') {
        var tempArr = []
        for (var key in params) {
          var value = params[key]
          tempArr.push(key + '=' + value)
        }
        params = tempArr.join('&')
      }

      if (method === 'GET') {
        url += '?' + params
      }

      xhr.open(method, url, false)

      var data = null
      if (method === 'POST') {
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
        data = params
      }

      xhr.onreadystatechange = function () {
        if (this.readyState !== 4) return
        // 不应该在封装的函数中主观的处理响应结果
        // console.log(this.responseText)
        // 你说我太主观，那么你告诉我应该做什么
        done(this.responseText)
      }

      xhr.send(data)
    }

    // 调用者
    // ============================

    var onDone = function (res) {
      console.log('hahahahaha')
      console.log('hohohohoho')
      console.log(res)
      console.log('做完了')
    }

    ajax('get', 'time.php', {}, onDone)

  </script>

jQuery 中的 AJAX

jQuery 中有一套专门针对 AJAX 的封装，功能十分完善，经常使用，需要着重注意。

参考：
http://www.jquery123.com/category/ajax/
http://www.w3school.com.cn/jquery/jquery_ref_ajax.asp

$.ajax

$.ajax({
url: './get.php',
type: 'get',
dataType: 'json',
data: { id: 1 },
beforeSend: function (xhr) {
console.log('before send')
},
success: function (data) {
console.log(data)
},
error: function (err) {
console.log(err)
},
complete: function () {
console.log('request completed')
}
})

常用选项参数介绍：

url：请求地址
type：请求方法，默认为 get
dataType：服务端响应数据类型
contentType：请求体内容类型，默认 application/x-www-form-urlencoded
data：需要传递到服务端的数据，如果 GET 则通过 URL 传递，如果 POST 则通过请求体传递
timeout：请求超时时间
beforeSend：请求发起之前触发
success：请求成功之后触发（响应状态码 200）
error：请求失败触发
complete：请求完成触发（不管成功与否）

$.get

$.post

<script>

    // $.get('json.php', { id: 1 }, function (res) {
    //   console.log(res)
    // })

    // $.post('json.php', { id: 1 }, function (res) {
    //   console.log(res)
    // })

    // $.getJSON('json.php', { id: 1 }, function (res) {
    //   console.log(res)
    // })


    // 明确请求的方式 根据方式选择快捷方法

  </script>

全局事件处理

https://www.jquery123.com/category/ajax/global-ajax-event-handlers/

$(document)
      .ajaxStart(function () {
        // 只要有 ajax 请求发生 就会执行
        $('.loading').fadeIn()
        // 显示加载提示
        console.log('注意即将要开始请求了')
      })
      .ajaxStop(function () {
        // 只要有 ajax 请求结束 就会执行
        $('.loading').fadeOut()
        // 结束提示
        console.log('请求结束了')
      })

    $('#btn').on('click', function () {
      // $.ajax({
      //   url: 'time.php'
      // })

      $.get('time.php')
    })

跨域

相关概念

同源策略是浏览器的一种安全策略，所谓同源是指域名，协议，端口完全相同，只有同源的地址才可以相互通过AJAX 的方式请求。
同源或者不同源说的是两个地址之间的关系，不同源地址之间请求我们称之为跨域请求

JSONP

JSON with Padding，是一种借助于 script 标签发送跨域请求的技巧。
其原理就是在客户端借助 script 标签请求服务端的一个动态网页（php 文件），服务端的这个动态网页返回一段带有函数调用的 JavaScript 全局函数调用的脚本，将原本需要返回给客户端的数据传递进去。
以后绝大多数情况都是采用 JSONP 的手段完成不同源地址之间的跨域请求
客户端 http://www.zce.me/users-list.html

<script src="http://api.zce.me/users.php?callback=foo"></script>

服务端 http://api.zce.me/users.php?callback=foo 返回的结果

foo(['我', '是', '你', '原', '本', '需', '要', '的', '数', '据'])

总结一下：由于 XMLHttpRequest 无法发送不同源地址之间的跨域请求，所以我们必须要另寻他法，script 这种方案就是我们最终选择的方式，我们把这种方式称之为 JSONP，如果你不了解原理，先记住怎么用，多用一段时间再来看原理。

问题：

JSONP 需要服务端配合，服务端按照客户端的要求返回一段 JavaScript 调用客户端的函数
只能发送 GET 请求

注意：JSONP 用的是 script 标签，更 AJAX 提供的 XMLHttpRequest 没有任何关系！！！

jQuery 中使用 JSONP 就是将 dataType 设置为 jsonp
其他常见的 AJAX 封装库：

Axios

CORS

Cross Origin Resource Share，跨域资源共享

// 允许远端访问
header('Access‐Control‐Allow‐Origin: *');

这种方案无需客户端作出任何变化（客户端不用改代码），只是在被请求的服务端响应的时候添加一个 AccessControl-Allow-Origin 的响应头，表示这个资源是否允许指定域请求。

阿发学测试

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax学习-下（jQuery中的Ajax）

模板引擎使用模板引擎：artTemplate：https://aui.github.io/art-template/模板引擎实际上就是一个 API，模板引擎有很多种，使用方式大同小异，目的为了可以更容易的将数据渲染到 HTML中<!DOCTYPE html><html lang="en"><head> <meta charset="UT...
复制链接

扫一扫