Ajax笔记

最新推荐文章于 2024-09-16 21:30:36 发布
最新推荐文章于 2024-09-16 21:30:36 发布
阅读量871 收藏 14
点赞数 19
分类专栏： 前端笔记 文章标签： ajax 笔记 okhttp
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Guard_56/article/details/135859071
版权

AJAX

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

Ajax能让我们轻松实现 网页 与 服务器之间的 数据交互

客户端与服务器

客户端概念：

在上网过程中，负责 获取和消费资源 的电脑，叫做客户端

服务器概念：

上网过程中，负责 存放和对外提供资源 的电脑，叫做服务器

上网的目的：

上网的**本质目的：**通过互联网的形式来 获取和消费资源

URL（统一资源定位符） 三部分

  • 客户端与服务器之间的 通信协议 http
  • 存有该资源的 服务器名称 www.xxx.com
  • 资源在服务器上 具体的存放位置 /xxxxxx/xx/xxxx.html

客户端与服务器的通信过程

  • 请求-处理-响应

网页中如何请求数据

最简单的用法 var xhrObj = new XMLHttpRequest()

资源的请求方式

客户端请求服务器时，请求的方式 有很多种，最常见的两种请求方式分别是 get 和 post 请求

  • get 请求，通常用于 获取服务器资源（要资源）

    例如：根据 URL 地址，从服务器获取 HTML文件、css文件、js文件、图片文件、数据资源等

  • post 请求，通常用于 向服务器提交数据（送资源）

    例如：登录时，向服务器 提交登录信息、注册时向服务器 提交注册信息、添加用户时向服务器 提交用户信息等各种 数据提交操作

监听Ajax请求

// 监听到Ajax请求被发起了
$(document).ajaxStart(function () {
     // 执行代码
})

// 监听到 Ajax 完成的事件
$(document).ajaxStop(function () {
    // 执行代码
})

Ajax应用场景

场景一：用户名检测

注册用户时，通过 ajax 的形式，动态 检测用户名是否被占用

场景二：搜索提示

当输入搜索关键字时，通过 ajax 的形式，动态 加载搜索提示列表

场景三：数据分页显示

当点击页码值得时候，通过 ajax 的形式，根据页码值动态刷新表格的数据

场景四：数据的增删改查

数据的添加、删除、修改、查询操作，都需要通过 ajax 的形式，来实现数据的交互

jQuery中的Ajax

  • $.get() get方式请求，用于获取数据
  • $.post() post方式请求，用于提交数据
  • $.ajax() 比较综合，既可以获取数据，又可以提交数据

$.get() 获取数据

getbooks
$.get(url, [data], [callback])
// url  要请求的资源地址
// data 请求资源期间要携带的参数
// callback 请求成功时的回调函数

$.get(url, { id:1 }, function(res){ console.log(res) })
// 相当于获取的数据里 id为1的那个 返回值 res
$.get()发起不带参数的请求

使用 $.get() 函数 发起不带参数的请求时，直接提供给 请求的 URL 地址 和 请求成功之后的回调函数 即可

$('#btnGET').on('click', function () {
$.get('http://ajax-base-api-t.itheima.net/api/getbooks', function (res) {
          console.log(res);
      })
 })
$.get()发起携带参数的请求

使用$.get() 发起携带参数的请求，那么携带的参数应该写在第二个参数的位置

$('#btnGETINFO').on('click', function () {
$.get('http://ajax-base-api-t.itheima.net/api/getbooks', { id: 1 }, function (res) {
          console.log(res)
     })
})

$.get()删除图书

delbook

使用$.get() 发起删除请求，第二个参数的位置写要删除的id

$('#btnGETINFO').on('click', function () {
$.get('http://ajax-base-api-t.itheima.net/api/delbook', { id: 1 }, function (res) {
          console.log(res)
     })
})

$.post() 提交数据

addbook

jQuery 中 $.post() 函数的功能单一，专门用来发起post请求，从而向服务器提交数据

$.post(url,[data],[callback])
// url  要提交到的数据地址
// data 要提交的数据 { }
// callback 提交成功时的回调函数

var obj = { bookname: '水浒传', author: '施耐庵', publisher: '天津图书出版社' }
 $(function () {
      $('#btnPOST').on('click', function () {
        $.post('http://ajax-base-api-t.itheima.net/api/addbook', obj, function (res) {
          console.log(res)
        })
      })
    })

获取成功判断

res.status == 200 获取成功

res.status == 201 添加成功

$.ajax()

获取图书数据
$(function () {
      $('#btnGET').on('click', function () {
        $.ajax({
          type: 'get',  // get获取  post发送
      url: 'http://ajax-base-api-t.itheima.net/api/getbooks',
          success: function (res) {
            console.log(res);
          }
        })
      })
    })
发送图书数据
$('#btnPOST').on('click', function () {
          $.ajax({
            type: 'POST',
            url: 'http://ajax-base-api-t.itheima.net/api/addbook',
            data: {
              bookname: '老魏与驴', 
              author: '老魏说书',
              publisher: '吹出天际出版社'
            },
            success: function (res) {
              console.log(res);
            }
       })
 })
获取机器人回复的消息
$.ajax({
            type: 'get',
            url: 'http://ajax-base-api-t.itheima.net/api/robot',
            data: {
                // 定义请求数据 spoken：value
                spoken: text  
                // text 是你发送的消息  spoken 根据你的消息返回对应回复
            },
            success: function (res) {
                // res.message == 'success' 代表成功获取
                if (res.message == 'success') {
                    // res.data.info.text  是机器人回复的消息
                    var msg = res.data.info.text
                }
            }
        })
获取机器人回复的语音消息
$.ajax({
            method: 'get',
            url: 'http://ajax-base-api-t.itheima.net/api/synthesize',
            data: {
                // 定义请求数据 text：value
                text: text  // text 要转换成语音的文字
            },
            success: function (res) {
                if (res.status == 200) {
                    // res.voiceUrl 机器人回复的语音地址
                    $('#voice').attr('src', res.voiceUrl)
                }
            }
        })

Ajax写法的 回调函数

success：function( res ){ }  // 请求成功后执行
error:function( res ) { }   // 请求失败后执行
complete: function(res) { }  // 无论成功还是失败都执行

3者返回的res对象 内容不一样

$.ajax({
        month: 'get',
        url: '/my/userinfo',
        headers: {
            Authorization: localStorage.getItem('token')
        },
        success: function (res) {
            if (res.status !== 0) {
                return console.log('身份验证失败');
            } else {
                // 渲染头像
                userPic(res.data)
            }
        },
        complete: function (res) {
            if (res.responseJSON.status == 1 && res.responseJSON.message == '身份认证失败！') {
                // 1. 强制清空 token
                localStorage.removeItem('token')
                // 2. 强制跳转到登录页面
                location.href = '/login.html'
            }
        }
    })

接口

使用 Ajax 请求数据时，被请求的 URL 地址，就叫做 数据接口（简称接口）。同时，每个接口必须有请求方式。

接口测试工具

为了验证接口是否被正常被访问，我们常常需要使用接口测试工具，来对数据接口进行检测

**好处：**接口测试工具能让我们在 不写任何代码 的情况下，对接口进行 调用 和 测试

接口文档

接口文档，顾名思义就是 接口的说明文档，它是我们调用接口的依据。好的接口文档包含了对 接口URL，参数 以及 输出内容 的说明，我们参照接口文档就能方便的知道接口的作用，以及接口如何进行调用

接口文档的组成部分
  • **接口名称：**用来标识各个接口的简单说明，如 登录接口，获取图书列表接口等
  • **接口URL：**接口的调用地址
  • **调用方式：**接口的调用方式，如 GET 或者 POST
  • **参数格式：**接口需要传递的参数，每个参数必须包含 参数名称、参数类型、是否必选、参数说明 这4项内容
  • 响应格式：接口的返回值的详细描述，一般包含数据名称、数据类型、说明3项内容
  • **返回示例（可选）：**通过对象的形式，列举服务器返回数据的结构

Form表单

表单在网页中主要负责 数据采集功能。HTML中<form>标签，就是用于采集用户输入的信息，并通过 <form> 标签的提交操作，把采集的信息提交到服务器端进行处理

表单的组成
  • 表单标签
  • 表单域：包含了文本框，密码框，隐藏域，都行文本框，复选框，单选框，下拉选择框和文件上传框等等
  • 表单按钮：通过设置type属性为submit来触发form表单的提交

<form> 标签的属性

action

action 属性用来规定当提交表单时，向何处发送表单数据。

action 属性的值应该是后端提供的一个URL地址，这个URL地址专门负责接收表单提交过来的数据。

target

target 属性用来规定 在何处打开 action URL

默认 当前窗口 target=“_self ”
新窗口打开：target=“_blank ”
method

method 属性用来规定 以何种方式 把表单数据提交到 action URL

它的可选值有两个，分别是 get 和 post

默认情况下，method的值为 get

  • get 方式适合用来提交少量的，简单的数据
  • post 方式适合用来提交大量的，复杂的，或包含文件上传的数据
enctype

enctype属性用来规定在 发送表单数据之前如何对数据进行编码

它的可选值有三个，默认情况下，enctype的值为 application/x-www-form-urlencoded，表示在发送前编码的所有字符

如果涉及到文件上传操作时，必须将enctype的值设置为 multipart/form-data

表单同步提交的缺点

  • <form> 表单同步提交后，整个页面会发生跳转，跳转到 action URL 所指向的地址，用户体验很差
  • <form> 表单同步提交后，页面之前的状态和数据会丢失

解决：表单只复杂采集数据，Ajax负责将数据提交到服务器

Ajax提交表单数据

表单提交事件 submit

快速获取表单数据

serialize() 函数
<form id="f1">
    <input type="text" name="user_name" />
    <input type="password" name="password" />
    <button type="submit">提交</button>
 </form>
  
  <script>
        // 表单提交事件
    $('#f1').on('submit', function (e) {
      e.preventDefault() // 阻止默认行为跳转页面
      console.log($(this).serialize()); // 快速获取表单数据
      // user_name=输入的值 & password=输入的值
    })
  </script>

**注意：**在使用 serialize() 函数快速获取表单数据时，必须为每个表单元素添加 name 属性

XML HttpRequest（原生Ajax）

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

使用xhr发起GET请求

  1. 创建 XHR 对象
  2. 调用 open 函数 创建一个Ajax请求
  3. 调用 send 函数 发起请求
  4. 监听 onreadystatechange 事件
// 1. 创建 XHR 对象
var xhr = new XMLHttpRequest()
// 2. 调用 open 函数 创建一个Ajax请求
xhr.open('GET', 'http://ajax-base-api-t.itheima.net/api/getbooks')
// 3. 调用 send 函数 发起请求
xhr.send()
// 4. 监听 onreadystatechange 事件
xhr.onreadystatechange = function () {
   // 判断是否获取成功
if (xhr.readyState === 4 && xhr.status === 200) {
   // 获取服务器响应的数据 字符串型
   console.log(xhr.responseText)
    // 将字符串转为对象
   var obj = JSON.parse(xhr.responseText)
   console.log(obj)
 }
}

使用xhr发起带参数的GET请求

这种在 URL 地址后面拼接的参数，叫做查询字符串。

// 带1个参数
http://ajax-base-api-t.itheima.net/api/getbooks?id=1
// 带2个参数
ajax-base-api-t.itheima.net/api/getbooks?id=1&bookname=书名
查询字符串

**定义：**查询字符串（URL 参数）是指在 URL 的末尾加上用于向服务器发送信息的字符串（变量）。

**格式：**将英文的 ? 放在URL 的末尾，然后再加上 参数＝值 ，想加上多个参数的话，使用 & 符号进行分隔

使用xhr发起POST请求

  • 创建 xhr 对象
  • 调用 xhr.open() 函数 创建一个Ajax请求
  • 设置 Content-Type 属性（固定写法）
  • 调用 xhr.send() 函数，同时指定要发送的数据
  • 监听 xhr.onreadystatechange 事件
// 1. 创建 xhr 对象
var xhr = new XMLHttpRequest()
// 2. 调用 open 函数
xhr.open('POST', 'http://ajax-base-api-t.itheima.net/api/addbook')
// 3. 设置 Content-Type 属性（固定写法）
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
// 4. 调用 send 函数
xhr.send('bookname=水浒传&author=施耐庵&publisher=上海图书出版社')
// 5. 监听事件
xhr.onreadystatechange = function () {
    // 判断是否获取成功
  if (xhr.readyState === 4 && xhr.status === 200) {
    // 获取服务器响应的数据  字符串型
    console.log(xhr.responseText)
    // 将字符串转为对象
    var obj = JSON.parse(xhr.responseText)
    console.log(obj)
  }
}

URL编码与解码

  • encodeURI() 编码的函数

  • decodeURI() 解码的函数

encodeURI('贾庆军') // %E8%B4%BE%E5%BA%86%E5%86%9B
decodeURI('%E8%B4%BE%E5%BA%86%E5%86%9B') // 贾庆军

数据交换格式

数据交换格式，就是服务器端与客户端之间进行数据传输与交换的格式

前端领域，经常提及的两种数据交换格式分别是 XML 和 JSON

XML

XML 的英文全称是 EXtensible Markup Language，即可扩展标记语言

XML和HTML的区别

XML 和 HTML 虽然都是标记语言，但是，它们两者之间没有任何的关系。

  • HTML 被设计用来描述网页上的内容，是网页内容的载体

  • XML 被设计用来传输和存储数据，是数据的载体

XML的缺点

  • XML 格式臃肿，和数据无关的代码多，体积大，传输效率低

  • 在 Javascript 中解析 XML 比较麻烦

JSON

JSON 的英文全称是 JavaScript Object Notation，即“JavaScript 对象表示法”

JSON 的本质是字符串。

JSON 是一种轻量级的文本数据交换格式，在作用上类似于 XML，专门用于存储和传输数据，但是 JSON 比 XML 更小、更快、更易解析。

数据类型

数据类型可以是数字、字符串、布尔值、null、数组、对象6种类型。

JSON的两种结构

JSON 中包含对象和数组两种结构

对象结构

对象结构在 JSON 中表示为 { } 括起来的内容。数据结构为 { key: value, key: value, … } 的键值对结构。其中，key 必须是使用英文的双引号包裹的字符串，value 的数据类型可以是数字、字符串、布尔值、null、数组、对象6种类型。

数组结构

数组结构在 JSON 中表示为 [ ] 括起来的内容。数据结构为 [ "java", "javascript", 30, true … ] 。

数组中数据的类型可以是数字、字符串、布尔值、null、数组、对象6种类型。

JSON语法注意事项

① 属性名必须使用双引号包裹

② 字符串类型的值必须使用双引号包裹

③ JSON 中不允许使用单引号表示字符串

④ JSON 中不能写注释

⑤ JSON 的最外层必须是对象或数组格式

⑥ 不能使用 undefined 或函数作为 JSON 的值

**JSON 的作用：**在计算机与网络之间存储和传输数据。

**JSON 的本质：**用字符串来表示 Javascript 对象数据或数组数据

JSON和JS对象的关系

JSON 是 JS 对象的字符串表示法，它使用文本表示一个 JS 对象的信息，本质是一个字符串

var json = '{"a": "Hello", "b": "world"}'
var obj = {"a": "Hello", "b": "world"}

JSON和JS对象的相互转换

JSON.parse() 字符串转对象
JSON.stringify() 对象转字符串
// 字符串转对象
var json = '{"a": "Hello", "b": "world"}'
var obj = JSON.parse(json)
console.log(obj)

// 对象转字符串
var obj2 = { a: 'hello', b: 'world', c: false }
var str = JSON.stringify(obj2)
console.log(str)

序列化和反序列化

把数据对象 转换为 字符串的过程，叫做序列化，例如：调用 JSON.stringify() 函数的操作，叫做 JSON 序列化。

把字符串 转换为 数据对象的过程，叫做反序列化，例如：调用 JSON.parse() 函数的操作，叫做 JSON 反序列化。

设置HTTP请求时限

有时，Ajax 操作很耗时，而且无法预知要花多少时间。如果网速很慢，用户可能要等很久。新版本的 XMLHttpRequest 对象，增加了 timeout 属性，可以设置 HTTP 请求的时限：

var xhr = new XMLHttpRequest()
// 设置 超时时间 毫秒
xhr.timeout = 30
// 设置超时以后的处理函数 自动停止HTTP请求
xhr.ontimeout = function () {
  console.log('请求超时了！')
}
xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks')

FormData对象管理表单数据

// 1. 新建 FormData 对象
 var fd = new FormData()
 // 2. 为 FormData 添加表单项
 fd.append('uname', 'zs')
 fd.append('upwd', '123456')
 // 3. 创建 XHR 对象
 var xhr = new XMLHttpRequest()
 // 4. 指定请求类型与URL地址
 xhr.open('POST', 'http://www.liulongbin.top:3006/api/formdata')
 // 5. 直接提交 FormData 对象，这与提交网页表单的效果，完全一样
 xhr.send(fd)

FormData对象快速获取表单数据

   // 获取form表单
    var form = document.querySelector("#form1")
    // 监听form表单的提交事件
    form.addEventListener('submit', function (e) {
      // 清除默认行为
      e.preventDefault()
      // 创建 FormData，快速获取到 form 表单中的数据
      var fd = new FormData(form)
      // 创建 XHR 对象
      var xhr = new XMLHttpRequest()
      // 调用open 函数 创建一个Ajax请求
      xhr.open('post', 'http://ajax-base-api-t.itheima.net/api/formdata')
      // 调用 send 函数 传入数据发起请求
      xhr.send(fd)
      // 监听 onreadystatechange 事件
      xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
          // 获取服务器响应的数据 字符串型
          console.log(xhr.responseText);
          // 将字符串转为对象
          console.log(JSON.parse(xhr.responseText));
        }
      }
    })

FormData对象上传文件（原生Ajax）

  <!-- 1. 文件选择框 -->
  <input type="file" id="file1" />
  <!-- 2. 上传文件的按钮 -->
  <button id="btnUpload">上传文件</button>
  <br />
  <!-- bootstrap 中的进度条 -->
  <div class="progress" style="width: 500px; margin: 15px 10px;">
    <div class="progress-bar progress-bar-striped active" style="width: 0%" id="percent">
      0%
    </div>
  </div>
  <!-- 3. img 标签，来显示上传成功以后的图片 -->
  <img src="" alt="" id="img" width="800" />

  <script>
    // 获取提交按钮
    var btn = document.querySelector('#btnUpload')
    // 绑定点击事件
    btn.addEventListener('click', function () {
      // 获取上传的内容
      var files = document.querySelector('#file1').files
      if (files.length <= 0) {
        return alert('请选择要上传的文件！')
      }
      // 创建 FormData，快速获取到 form 表单中的数据
      var fd = new FormData()
      // 把上传的第一个内容添加到 FormData 中
      fd.append('tupian', files[0])
      // 创建 XHR 对象
      var xhr = new XMLHttpRequest()
      // 监听文件上传的进度  监听xhr.upload的 onprogress 事件
      xhr.upload.onprogress = function (e) {
        console.log(e);
        if (e.lengthComputable) {
          // 计算出上传的进度
          var jdt = Math.ceil((e.loaded / e.total) * 100)
          // 动态设置进度条
          $('#percent').attr('style', 'width: ' + jdt + '%;').html(jdt + '%')
        }
      }
      // 调用函数 创建Ajax请求
      xhr.open('POST', 'http://ajax-base-api-t.itheima.net/api/upload/avatar')
      // 调用请求 传入数据
      xhr.send(fd)
      // 监听 onreadystatechange 事件
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
          // 获取的数据转为对象
          var data = JSON.parse(xhr.responseText)
          if (data.status === 200) {
            // 上传成功
            document.querySelector('#img').src = 'http://ajax-base-api-t.itheima.net' + data.url
          } else {
            // 上传失败
            alert('图片上传失败！' + data.message)
          }
        }
      }
    })
   </script>

FormData对象上传文件（jQuery）

<input type="file" id="file1" />
  <button id="btnUpload">上传文件</button>
  <br />
  <img src="./images/loading.gif" alt="" style="display: none;" id="loading" />
  <script>
    $(function () {
      // 监听到Ajax请求被发起了
      $(document).ajaxStart(function () {
        $('#loading').show()
      })

      // 监听到 Ajax 完成的事件
      $(document).ajaxStop(function () {
        $('#loading').hide()
      })


      // 创建点击上传事件
      $('#btnUpload').on('click', function () {
        // 获取上传的图片 伪数组
        var files = $('#file1')[0].files
        // 判断有没有上传图片
        if (files.length <= 0) {
          alert('请上传文件')
        }
        // 创建 FormData，
        var fd = new FormData()
        //  向FormData里添加 图片名 和 图片
        fd.append('tupian', files[0])
        // 创建请求
        $.ajax({
          method: 'post',
          url: 'http://ajax-base-api-t.itheima.net/api/upload/avatar',
          // 传入图片数据
          data: fd,
          // 不修改 Content-Type 属性，使用 FormData 默认的 Content-Type 值
          contentType: false,
          // 不对 FormData 中的数据进行 url 编码，而是将 FormData 数据原样发送到服务器
          processData: false,
          // 执行回调
          success: function (res) {
            console.log(res);
          }
        })
      })
    })
  </script>

同源

同源策略（英文全称 Same origin policy）是浏览器提供的一个安全功能

同源指的是两个 URL 的协议、域名、端口一致，反之，则是跨域

同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制

http://www.test.com/index.html

http://www.test.com/userlist     
// 同源

跨域

同源指的是两个 URL 的协议、域名、端口一致，反之，则是跨域

**注意：**浏览器允许发起跨域请求，但是，跨域请求回来的数据，会被浏览器拦截，无法被页面获取到！

实现跨域数据请求

实现跨域数据请求，最主要的两种解决方案，分别是 JSONP 和 CORS。

JSONP

出现的早，兼容性好（兼容低版本IE）。是前端程序员为了解决跨域问题，被迫想出来的一种临时解决方案。缺点是只支持 GET 请求，不支持 POST 请求。

JSONP 的实现原理，就是通过 <script> 标签的 src 属性，请求跨域的数据接口，并通过函数调用的形式，接收跨域接口响应回来的数据

<script>
    function abc(data) {
      console.log(data);
    }

  </script>
  <script src="http://ajax-base-api-t.itheima.net/api/jsonp?callback=abc&name=zs&age=18"></script>

//? callback=函数名&name=zs&age=18

jQuery中的JSONP

jQuery 中的 JSONP，也是通过 <script> 标签的 src 属性实现跨域数据访问的，只不过，jQuery 采用的是动态创建和移除标签的方式，来发起 JSONP 数据请求。

  • 在发起 JSONP 请求的时候，动态向 <header> 中 append 一个 <script> 标签；

  • 在 JSONP 请求成功以后，动态从 <header> 中移除刚才 append 进去的 <script> 标签；

$(function () {
      // 发起JSONP的请求
      $.ajax({
        url: 'http://ajax-base-api-t.itheima.net/api/jsonp?name=zs&age=20',
        // 代表我们要发起JSONP的数据请求
        dataType: 'jsonp',
        success: function (res) {
          console.log(res)
        }                
      })
    })

原生Ajax请求封装

// 对象转为字符串封装函数
function resolveData(data) {
    var arr = []
    // 遍历对象 
    for (var i in data) {
        // 接收每个属性名和属性值以等号相接
        var str = k + '=' + data[k]
        // 添加进数组
        arr.push(str)
    }
    // 再把数组里的每个值 以 & 分隔成字符串返回
    return arr.join('&')
}

// 封装原生Ajax请求
function Ajax(options) {
    // 创建 XHR 对象
    var xhr = new XMLHttpRequest()
    // 把传递过来的参数对象调用字符串转换封装 转换为 字符串
    var qs = resolveData(options.data)
    // 判断传过来的请求方式是获取还是发送
    if (options.method.toUpperCase() === 'GET') {
        // 发起GET请求
        xhr.open(options.method, options.url + '?' + qs)
        // 调用 xhr.send() 内置函数
        xhr.send()
    }
    else if (options.method.toUpperCase() === 'POST') {
        // 发起POST请求
        xhr.open(options.method, options.url)
        // 设置 Content-Type 属性（固定写法）
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
        // 调用 xhr.send() 内置函数，传入要发送的数据
        xhr.send(qs)
    }
    // 监听 onreadystatechange 事件
    xhr.onreadystatechange = function () {
        // 判断请求成功（固定写法）
        if (xhr.readyState === 4 && xhr.status === 200) {
          // 将数据（字符串型）转为对象并声明一个变量接收
          var result = JSON.parse(xhr.responseText)
          // 调用请求对象的success方法  就是将数据返回到请求里面的匿名函数
            options.success(result)
        }
    }
}

调用方法

// 发起get请求
Ajax({
      method: 'GET',
      url: 'http://ajax-base-api-t.itheima.net/api/getbooks',
      data: {
        id: 1
      },
      success: function (res) {
        console.log(res)
      }
    })
// 发起post请求
    Ajax({
      method: 'post',
      url: 'http://ajax-base-api-t.itheima.net/api/addbook',
      data: {
        bookname: '水浒传',
        author: '施耐庵',
        publisher: '北京图书出版社'
      },
      success: function (res) {
        console.log(res)
      }
    })
糕手糕糕
关注
专栏目录
AJAX笔记
03-22
**AJAX笔记** 在网页开发中，AJAX（Asynchronous JavaScript and XML）是一种不刷新整个页面的情况下，与服务器交换数据并更新部分网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新，...
黑马程序员Ajax笔记
05-26
在黑马程序员的Ajax笔记中，我们将深入探讨这一技术的各个方面。 ### 1. Ajax基本原理 Ajax的核心是JavaScript对象XMLHttpRequest，它允许浏览器在后台与服务器通信。通过创建XMLHttpRequest对象、打开连接、发送...
ajax笔记ajax笔记ajax笔记
04-03
ajax笔记
Ajax笔记.docx
06-12
**Ajax技术概述** Ajax，全称Asynchronous JavaScript and XML，是一种用于创建动态和交互性网页的技术。它允许网页在不完全刷新的情况下与服务器交换数据并更新部分网页内容，从而提升了用户体验，减少了网络带宽...
JavaScript 基础 - 第17天_AJAX综合案例
八年大厂一线老程序员。现独立开发创业中，并且已经靠独立开发赚取人生第一桶金。
09-14 1187
完成案例-图书管理系统（增删改查）经典业务
JavaScript 基础 - 第16天_AJAX入门
八年大厂一线老程序员。现独立开发创业中，并且已经靠独立开发赚取人生第一桶金。
09-14 885
掌握 axios 相关参数，从服务器获取并解析展示数据。掌握接口文档的查看和使用。掌握在浏览器的 network 面板中查看请求和响应的内容。了解请求和响应报文的组成部分
实现实时Web应用，使用AJAX轮询、WebSocket、还是SSE呢？？
Hassan的小博客!
09-12 912
文章目录短轮询（Short Polling）长轮询（Long Polling）Comet “服务器推” （这玩意现在用的很少了，了解一下即可）WebSocket原理：方法：事件：SSE原理事件总结 在日常的开发中，我们经常能碰见服务端需要主动推送给客户端数据的业务场景，比如数据大屏的实时数据、新闻数据、消息中心的未读消息，聊天功能、股票走势、天气情况等等。 我们的方案大概就是轮询、WebSocket、SSE 短轮询（Short Polling） 客户端定期（例如每几秒）发送AJAX请求到服务器。服务器立
Day01_Ajax入门
闲杂人
09-12 814
请求方法是一些固定单词的英文，例如：GET，POST，PUT，DELETE，PATCH（这些都是http协议规定的），每个单词对应一种对服务器资源要执行的操作。浏览器网页中，使用 AJAX技术（XHR对象）发起获取省份列表数据的请求，服务器代码响应准备好的省份列表数据给前端，前端拿到数据数组以后，展示到网页。统一资源定位符，简称网址，用于定位网络中的资源（资源指的是：网页，图片，数据，视频，音频等等）标记服务器在互联网当中的方位，网络中有很多服务器，你想访问哪一台，就需要知道它的域名才可以。
C++学习笔记----6、内存管理（五）---- 智能指针（3）
weixin_71738303的博客
09-11 1188
与指向特定类型的原始指针可以转化为不同类型的指针一样，shared_ptr保存特定的类型可以转化为一个另一种类型的shared_ptr。转化shared_ptr的函数是const_pointer_cast()，dynamic_pointer_cast(),static_pointer_cast()和reinterpret_pointer_cast()。前面简要提过，当拥有共享属主的智能指针，例如shared_ptr不在活动范围或者被重置时，只有它是最后指向的智能指针时才能释放其指向的资源。
ROS组合导航笔记1：融合传感器数据
最新发布
qq_44188415的博客
09-16 601
笔记
arm和riscv系统调用对比(笔记)
maosql
09-13 591
相似之处: ecall 和 SVC 都是用于从用户模式切换到内核模式，执行系统调用。它们的作用和使用方式非常相似，都是触发内核级别的处理，以处理用户请求的特权操作。不同之处: PendSV 是一个用于任务切换的中断机制，与 ecall 和 SVC 的作用不同。PendSV 主要用于上下文切换，而 ecall 和 SVC 是用于请求系统服务的机制。
shader 案例学习笔记之将坐标系分成4个象限
localhost
09-13 222
坐标系被分成了4个单元格，每个单元格都有唯一的索引，后续就可以根据索引去渲染。
UEFI学习笔记（五）：EDK II PCD的概念、类型、使用
qq_44189622的博客
09-11 855
如果在BIOS里面有一些模块是binary方式集成进来的而这些binary又需要用到PCD（用于Binary Release），那么这些Binary集成的要用到的PCD就必须要设置为。PCD的值存在memory里面，下次启动时，上次更改的值丢失了，每次启动都是从default值开始。是存在VPD空间的（在FLASH上，只读），一般是出厂配置。如果platform是从源码build出来的，没有binary在里面的时候，PCD用的都是。作用域在一个模块中（模块级的），可以在Binary Level进行修改。
JUC学习笔记(二)
zhouDonQuixote的博客
09-16 1398
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录四、共享模型之内存4.1 Java 内存模型4.2 可见性退不出的循环解决方法可见性 vs 原子性模式之 Balking1.定义2.实现4.3 有序性原理之指令级并行1. 名词2.鱼罐头的故事3.指令重排序优化4.支持流水线的处理器诡异的结果解决方法原理之 volatile1.如何保证可见性2.如何保证有序性3.double-checked locking 问题4.double-checked locking 解决happens-
C++学习笔记----7、使用类与对象获得高性能（一）---- 书写类（1）
weixin_71738303的博客
09-13 1067
public:private:第一行指出这是一个叫做spreadsheet_cell的模块的定义。每一类的定义都是以class关键字开始后接类的名字。如果类定义在一个模块中，该类一定要import进来才可见，定义时一定要在class关键字之前加上export。类的定义就是声明并且以分号结束。类的定义通常在一个其名字的文件中。例如，SpreadsheetCell类定义在一个叫做SpreadsheetCell.cppm的文件中。有些编译器要求使用特定的扩展名；有些则不要求。
Netty笔记03-组件Channel
weixin_46425661的博客
09-12 821
本文主要讲解Netty中的组件Channel、ChannelFuture和CloseFuture
17、电科院FTU检测标准学习笔记-录波性能
sixtome
09-14 647
作者简介：本人从事电力系统多年，岗位包含研发，测试，工程等，具有丰富的经验在配电自动化验收测试以及电科院测试中，本人全程参与，积累了不少现场的经验。
rk3568系统buildroot开发笔记
Reasonss的博客
09-11 1266
构建RK3568系统期间遇到的各种问题,我主要分为编译问题和运行问题
Ajax笔记：Ajax基础知识和Ajax开发技巧
Ajax笔记 Ajax是一种异步的JavaScript和XML的结合体，可以在不重新加载整个网页的情况下，实现局部更新网页内容。下面是关于Ajax的详细知识点： 一、 Ajax基本概念 Ajax是Asynchronous JavaScript and XML的缩写...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值