ajax 的学习笔记

$('#btnGet').on('click', function () {
  $.get('http://www.liulongbin.top:3006/api/getbooks', function (res) {
    console.log(res)    // 这里的 res 是服务器返回的数据
    console.log(typeof res)

    // 想要找到 id: 3 的对象
    //  find() 方法
    const book = res.data.find(book => book.id === 3)
    console.log(book)
    // {id: 3, bookname: '三国演义', author: '罗贯中', publisher: '北京图书出版社'}
  })
})

$.get() 发起带参数的请求

使用$.get() 发起携带参数的请求，写在第二个参数的位置，且是对象的类型

注意：参数可以给多，但是不能给少（甚至可以是对象中没有的键值对）

$(function () {
  $('#btnGet').on('click', function () {
    $.get('http://www.liulongbin.top:3006/api/getbooks',
      { id: 1, name: '黄大帅逼' },
      function (res) {
        console.log(res)
      })
  })
})

$.post() 函数的语法

$.post( url [, data] [, callback] )

三个参数的含义：

url ： string 参数类型，要请求的资源地址

data : object 参数类型，请求资源期间要携带的参数

callback : function 参数类型，请求成功时的回调函数

$.post() 向服务器提交数据

$.post()请求第二个参数是需要提交的参数，利用对象的方式进行设置

<script>
  $(function () {
    $('#btnPost').on('click', function () {
      $.post('http://www.liulongbin.top:3006/api/addbook',
        { bookname: '水浒传', author: '施耐庵', publisher: '天津出版' },
        function (res) {
          console.log(res)
        })
    })
  })
</script>

$.ajax() 函数语法

$.ajax({
  type: ' ',       // method 请求的方式，例如 GET 或 POST ， 默认GET，可以不写
  url: ' ',       // 请求的 url 地址
  data: { },      // 这次请求要携带的数据
  success: function (res) {          // 请求成功之后的回调函数
      console.log(res)           // 返回的是 preview中的数据（数组）
  }    
  
  error: function (err) {        // 失败时的回调函数
      console.log(err)          // 返回的是 new出来的 xhr对象
  },
  complete: function (com) {     // 不论成功失败都会执行的回调函数
      console.log(com)           // 同上
  }
})

$.ajax() 发起 get 请求

$('#btnGet').on('click', function () {
  $.ajax({
    type: 'GET',       
    url: 'http://www.liulongbin.top:3006/api/getbooks',      
    data: { id: 1 },      
    success: function (res) {
      console.log(res)
    }     
  })
})

接口

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

分析接口的请求过程

请求——处理——响应

了解接口测试工具

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

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

下载并安装 PostMan

网址： Postman

使用 PostMan 测试 GET 接口

步骤：

选择请求的方式
填写请求的URL地址
填写请求的参数
点击 Send 按钮发起GET 请求
查看服务器响应的结果

使用 PostMan 测试 POST 接口

接口文档

接口文档，顾名思义就是接口的说明文档，它是我们调用接口的依据

接口文档的组成部分

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

form表单

form表单的基本使用

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

表单的组成部分

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

form标签的属性

action

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

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

当 <form>表单在未制定 action 属性值的清空下，action的默认值为当前页面的
URL 地址

注意：当提交表单后，会立即跳转到 action 属性指定的 URL 地址

target

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

a标签也可以用这个属性

值	描述
_blank	在新窗口中打开
_self	默认。在相同的框架中打开
_parent	在父框架集中打开（很少用）
_top	在整个窗口中打开（很少用）
framename	在指定的框架中打开（很少用）

method

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

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

默认情况下，method的值为 get，表示通过URL地址的形式，把表单数据提交到
action URL

注意：

get 方式适合用来提交少量的，简单的数据

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

get 会将数据显示在网址那， post 不会，所以 post更安全

enctype

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

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

值	描述
application/x-www-form-urlencoded	在发送前编码所有字符（默认）
multipart/form-data	不对字符编码在使用包含文件上传控件的表单时，必须使用该值
text/plain	空格转换为 "+" 号，但不对特殊字符编码。（很少用）

值

描述

application/x-www-form-urlencoded

在发送前编码所有字符（默认）

multipart/form-data

不对字符编码

在使用包含文件上传控件的表单时，必须使用该值

text/plain

空格转换为 "+" 号，但不对特殊字符编码。（很少用）

表单的同步提交及缺点

通过点击 submit 按钮，触发表单提交的操作，从而使页面跳转到 action URL 的行为，叫做表单的同步提交

表单同步提交的缺点

① <form> 表单同步提交后，整个页面会发生跳转，跳转到 action URL 所指向的
地址，用户体验很差

② <form> 表单同步提交后，页面之前的状态和数据会丢失

解决方法

表单只负责采集数据， Ajax 负责将数据提交到服务器

通过Ajax提交表单数据 submit事件

在 jQuery 中，可以使用如下两种方式，监听到表单的提交事件

$('#form').submit(function (e) {
  alert('监听到了表单的提交事件')
})


$('#form').on('submit', function (e) {
  alert('监听到了表单的提交事件')
})

阻止表单的默认提交行为 e.preventDefault()

$('#form').submit(function (e) {
    e.preventDefault()
})


$('#form').on('submit', function (e) {
   e.preventDefault()
})

快速获取表单的数据 serialize()

$('#form1').on('submit', function (e) {
  e.preventDefault()
  const str = $('#form1').serialize()
  console.log(str)   //  uname=huang&password=143ba000
})                   // 这边填中文会被转换为 UFT-8 码

注意： $.ajax 中的 data 除了放对象以外，还可以放 $('#form1').serialize()

模板引擎

基本概念

根据程序员指定的模板结构和数据，自动生成一个完整的HTML页面

优点：

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

art-template模板引擎

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

中文官网首页： art-template

下载步骤：找到下载链接，右击，选择“链接另存为”，将其下载到本地，然后通过<script>标签加载使用

art-template 的使用步骤

◼ 导入 art-template
- 在window全局，就多了一个函数，叫做 template('模板id'，需要渲染的数据对
象)
◼ 定义数据
◼ 定义模板
- 模板的 HTML 结构，必须定义到 script 标签中，注意：需要把type属性改成text/html
- 给模板添加一个 id
- 模板里面如果需要使用到传入的数据，利用 {{}} 来实现，例如：{{name}}，那么就会去找我们调用 template() 函数第二个参数里面对应的name属性的值
◼ 调用 template 函数
- 函数的返回值就是拼接好的模板字符串
◼ 渲染HTML结构
- 最后我们需要把template返回的模板字符串设置到页面容器中

<body>
  <div id="container"></div>
  <script src="./jquery.min.js"></script>
  <script src="./第二天/template-web.js"></script>
  <!-- script 的 type属性有默认值 text/javascript , 表示 script标签中是js代码
  这边需要改下属性值 -->
  <script type="text/html" id="tpe-user">
    <ul>
      <li>姓名： {{uname}}</li>
      <li>年龄： {{age}}</li>
    </ul>
  </script>
  <script>
    const data = {
      uname: '黄',
      age: 18
    }
    // template() 参数一：模板id（不需要加 #） 参数二：需要渲染的数据对象
    // template() 返回的是前面 的 html内容
    let htmlStr = template('tpe-user', data)
    console.log(htmlStr)    //  <ul> <li>姓名： 黄</li> <li>年龄： 18</li> </ul>
    $('#container').html(htmlStr)
  </script>
</body>

art-template 的标准语法——输出

{{}} 就是标准语法

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

{{ value }}

{{ obj.key }}

{{ obj['key'] }}

{{ a ? b : c }}

{{ a || b }}

{{ a + b }}

标准语法——原文输出

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

{{ @ value }}

例：

{{ @ <h2>黄</h2> }}

标准语法—— 条件输出

如果要实现条件输出，则可以在 {{}} 中使用 if...else if.../if 的方式，进行按需输出

{{ if value }} 按需输出的内容 {{ /if }}

{{ if v1}} 按需输出的内容 {{ else if v2 }} 按需输出的内容 {{ /if }}

标准语法—— 循环输出

如果要实现循环输出，则可以在{{}} 内，通过 each 语法循环数组，当前循环的索引使用 $index 进行访问，当前循环项使用 $value 进行访问

{{ each arr }}

{{ $index }} {{ $value }}

{{ /each }}

// 循环输出中有原文

{{each result}}

<div class="suggest-item"><%- $value %></div>

{{/each}}

标准语法过滤器

过滤器的本质就是 function 处理函数

过滤器基本语法

{{ value | filterName }}

右边是参数，左边是函数名

返回的是函数处理过的返回值

过滤器语法类似于管道操作符，它的上一个输出作为下一个输入

定义过滤器的基本语法如下：

template.defaults.imports.filterName = function (value) { return 处理的结果}

定义格式化时间过滤器

<body>
  <div id="container"></div>
  <script src="./jquery.min.js"></script>
  <script src="./第二天/template-web.js"></script>
  <script type="text/html" id="tpe-user">
   <h2>{{ regTime | dateFormat }}</h2>
  </script>
  <script>
    const data = {
      regTime: new Date()
    }
    template.defaults.imports.dateFormat = function (regTime) {
      let y = regTime.getFullYear()
      let m = regTime.getMonth() + 1
      let d = regTime.getDate()
      return y + '-' + m + '-' + d
    }
    $('#container').html(template('tpe-user', data))
  </script>
</body>

模板引擎的实现原理

正则 exec函数

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

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

const str = '黄黄是大哥'
const reg = /是/
console.log(reg.exec(str))        
//  ['是', index: 2, input: '黄黄是大哥', groups: undefined]

exec 函数分组

正则表达式中 () 包起来的

let str = '<div>我是{{name}}</div>'
const reg = /{{(name)}}/          // () 可以用于提取，左右只能是符号
console.log(reg.exec(str))
// ['{{name}}', 'name', index: 7, input: '<div>我是{{name}}</div>', groups: undefined]

replace() 替换

字符串.replace('要被替换的文本', '替换的文本')

replaceAll() 可以一次性将所有字符都进行替换

const str = 'java是一门编程语言，JAVA也被称为最好的语言'
str.replace(/java/i, '前端')
console.log(str)      //  java是一门编程语言，JAVA也被称为最好的语言
console.log(str.replace(/java/ig, '前端'))    // 前端是一门编程语言，前端也被称为最好的语言
console.log(str.replace(/java|JAVA/g, '前端'))    // 前端是一门编程语言，前端也被称为最好的语言

// 1、repalce()不会改变原字符串，有返回值
// 2、i 可以无视大小写
    // 3、g 可以用来全选

对字符串进行多次 replace 操作

let str = '<div>{{name}}今年{{age}}岁了</div>'
const pattern = /{{\s*([a-zA-Z]+)\s*}}/

// 第一次匹配
let res1 = pattern.exec(str)
str = str.replace(res1[0], res1[1])
console.log(str)  // <div>name今年{{age}}岁了</div>

// 第二次匹配
let res2 = pattern.exec(str)
str = str.replace(res2[0], res2[1])
console.log(str)   //  <div>name今年age岁了</div>

// 第三次匹配
let res3 = pattern.exec(str)
console.log(res3)   // null

使用 while循环 replace

let str = '<div>{{name}}今年{{age}}岁了</div>'
const pattern = /{{\s*([a-zA-Z]+)\s*}}/

while (pattern.exec(str)) {
  let res = pattern.exec(str)
  str = str.replace(res[0], res[1])
}
console.log(str)

将正则匹配到的字符替换成真值

const data = {
  name: '黄路剑',
  age: 18
}

let str = '<div>{{name}}今年{{age}}岁了</div>'
const pattern = /{{\s*([a-zA-Z]+)\s*}}/

while (pattern.exec(str)) {
  let res = pattern.exec(str)
  str = str.replace(res[0], data[res[1]])
}
console.log(str)

实现简易的模板引擎

<body>
  <div id="container"></div>
  <script type="text/html" id="tpl-user">
   <div>姓名： {{name}}</div>
   <div>年龄： {{age}}</div>
   <div>性别： {{gender}}</div>
   <div>住址： {{address}}</div>
  </script>
  <script>
    const obj = {
      name: '黄',
      age: 18,
      gender: '男',
      address: '江苏',
    }
    function template(id, data) {
      let str = document.querySelector(`#${id}`).innerHTML
      const pattern = /{{\s*([a-zA-Z]+)\s*}}/

      while (pattern.exec(str)) {
        res = pattern.exec(str)
        str = str.replace(res[0], data[res[1]])
      }
      return str
    }
    let htmlStr = template('tpl-user', obj)
    document.querySelector('#container').innerHTML = htmlStr
  </script>
</body>

XMLHttpRequest的基本使用

XMLHttpRequest（简称 xhr），是浏览器提供的 Javascript 对象

作用：可以请求服务器上的数据资源

使用 xhr 发起 GET请求

// 1.创建函数
let xhr = new XMLHttpRequest()
// 2.调用 open 函数    第三个参数默认 true ， 代表 异步
xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks?id=2', true)
// 3.调用 send 函数   发起请求
xhr.send()
// 4. 监听 onreadystatechange 事件
xhr.onreadystatechange = function () {
  // 这个是 固定写法 ，不可以改动 
  // 4.1 监听 xhr 对象的请求状态 readyState ; 与服务器响应的状态 status
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText)  // 返回的是 数据的字符串
  }
}

xhr.onload = function () {

// 表示请求结束的时候的回调函数

比 onreadyState 简单一些

}

了解 xhr对象的 readyState属性

XMLHttpRequest对象的 readyState属性，用来表示当前Ajax请求所处的状态。每个 Ajax请求必然处于以下状态的一个

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

◼ 使用 xhr 对象发起带参数的 GET 请求时，只需在调用 xhr.open 期间，为 URL 地
址指定参数即可

。。。省略代码

xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks?id=2')

。。。省略代码

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

查询字符串 Query String Parameters

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

格式：将英文的 ? 放在URL 的末尾，然后再加上参数＝值，想加上多个参数的话，使用 & 符号进行分隔。以这个形式，可以将想要发送给服务器的数据添加到 URL 中

xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks?id=2&bookname=红楼梦')

GET请求携带参数的本质

$.get('url', { id: 1 }, function () {})

=== 等价于

$.get('url?id=1', function () {})

URL编码和解码

URL地址中，只允许出现英文相关的字母、标点符号、数字，因此，在URL地址中不允许出现中文字符

如果 URL中需要包含中文这样的字符，则必须对中文字符进行编码（转义）

URL编码的原则：使用安全的字符（没有特殊用途或者特殊意义的可打印字符）取表示那些不安全的字符

通俗理解：使用英文字符取表示非英文字符

如何对URL编码和解码

浏览器提供了 URL 编码与解码的 API，分别是：
- encodeURI() 编码的函数
- decodeURI() 解码的函数

let str = '我是大帅逼'
let str2 = encodeURI(str)
console.log(str2)  //  %E6%88%91%E6%98%AF%E5%A4%A7%E5%B8%85%E9%80%BC
let str3 = decodeURI('%E5%A4%A7%E5%B8%85%E9%80%BC')
console.log(str3)  // 大帅逼

3 个 % 为一组

使用 xhr 发起 POST请求

// 1.创建 xhr 对象
let xhr = new XMLHttpRequest()
// 2.调用 open 函数
xhr.open('POST', 'http://www.liulongbin.top:3006/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)
  }
}

数据交换格式

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

前端领域，经常提及的两种数据交换格式分别是 XML 和 JSON。其中 XML 用的非常少，所以，我们重点要学习的数据交换格式就是 JSON

XML

XML 的英文全称是 EXtensible Markup Language，即可扩展标记语言。因此，XML 和 HTML类似，也是一种标记语言

XML 和 HTML 虽然都是标记语言，但是，它们两者之间没有任何的关系。
- HTML 被设计用来描述网页上的内容，是网页内容的载体
- XML 被设计用来传输和存储数据，是数据的载体

 <!--典型的XML写法--> 
<note>
  <to>老师</to>
  <from>张三</from>
  <heading>通知</heading>
  <body>晚上开会</body>
</note>
 <!--to：发给老师； form：张三发的； heading：代表标题为通知； body： 内容为晚上开会 ->

XML的缺点：

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

在 Javascript 中解析 XML 比较麻烦

JSON

JSON的英文全称是 JavaScript Object Notation，即“JavaScript对象表示法”。 JSON 就是 Javascript 对象和数组的字符串表示法，它使用文本表示一个 JS 对象或数组的信息，
因此，JSON 的本质是字符串

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

JSON的两种结构

对象结构：对象结构在 JSON 中表示为 { } 括起来的内容。数据结构为 { key: value, key: value, ... } 的键值对结构。其中，key 必须是使用英文的双引号包裹的字符串，value 的数据类型可以是数字、字符串、布尔值、null、数组、对象6种类型（undefined、函数都不行，且里面所有都必须是双引号）

数组结构：在 JSON 中表示为 [ ] 括起来的内容。数据结构为 [ "java", "javascript", 30, true ... ] 。数组中数据的类型可以是数字、字符串、布尔值、null、数组、对象6种类型

["java", "python", "php"]
[100, 200, 300.5]
[true, false, null]
[{ "name": "huang", "age": 20 }]
[["苹果", "橘子", "香蕉"]]

JSON语法注意事项

属性名必须使用双引号包裹
字符串类型的值必须使用双引号包裹
JSON 中不允许使用单引号表示字符串
JSON 中不能写注释
JSON 的最外层必须是对象或数组格式 {} []
不能使用 undefined 或函数作为 JSON 的值

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

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

JSON和JS对象的关系

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

// 这是一个对象
let obj = { a: 'Hello', b: 'World' }

// 这是一个JSON字符串，本质是一个字符串
let json = '{"a":"Hello","b":"World"}'

JSON的JS对象的互转

JSON.parse() 方法：从 JSON 字符串转换为 JS 对象

let obj = JSON.parse('{ "a": "Hello", "b": "World" }')

JSON.stringify() 方法：从 JS 对象转换为 JSON 字符串

let json = JSON.stringify({ a: 'hello', b: 'World' })

序列化和反序列化

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

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

封装自己的 Ajax函数

定义 options参数选项

myAjax() 函数是自己定义的 Ajax函数，它接收配置对象作为参数，配置对象中可以配置如下属性：

method 请求的类型
url 请求的 URL地址
data 请求携带的数据
success 请求成功后的回调函数

处理 data 参数

通过遍历对象，拼接成 key=value 的形式，放入数组，再转换为字符串

function resolveData(data) {
  let arr = []
  for (let k in data) {
    let str = `${k}=${data[k]}`
    arr.push(str)
  }
  return arr.join('&')
}
console.log(resolveData({ name: '黄', age: 18 }))   
// name=黄&age=18

定义 myAjax 函数

function myAjax(options) {
  let xhr = new XMLHttpRequest()
  // 把外界传递过来的参数 对象转换 为 查询字符串
  let qs = resolveData(options.data)
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
      let result = JSON.parse(xhr.responseText)
      // 内部调用一次 success函数 ， 并传入实参 result
      options.success(result)
    }
  }
}

判断请求的类型

判断是 get 还是 post

function resolveData(data) {
  let arr = []
  for (let k in data) {
    let str = `${k}=${data[k]}`
    arr.push(str)
  }
  return arr.join('&')
}
console.log(resolveData({ name: '黄', age: 18 }))
// name=黄&age=18


function myAjax(options) {
  // 给 method 一个默认值 GET
  const { method = 'GET', data, url, success } = options
  let xhr = new XMLHttpRequest()
  // 把外界传递过来的参数 对象转换 为 查询字符串
  let qs = resolveData(data)
  // toUpperCase() 字符串大写
  if (method.toUpperCase() === 'GET') {
    // 发起 get请求
    xhr.open(method, url + '?' + qs)
    xhr.send()
  } else if (method.toUpperCase() === 'POST') {
    // 发起 post请求
    xhr.open(method, url)
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
    xhr.send(qs)
  }

  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
      let result = JSON.parse(xhr.responseText)
      success(result)
    }
  }
}

认识 XMLHttpRequest Level2

旧版 XMLHttpRequest 的缺点

只支持文本数据的传输，无法用来读取和上传文件
传送和接收数据时，没有进度信息，只能提示有没有完成

XMLHttpRequest Level2 的新功能

可以设置 HTTP 请求的时限
可以使用 FormData 对象管理表单数据
可以上传文件
可以获得数据传输的进度信息

设置 HTTP请求时限

新版本的 XMLHttpRequest 对象，增加了 timeout 属性，可以设置 HTTP 请求
的时限：

xhr.timeout = 3000

过了这个时限，就自动停止HTTP请求。与之配套的还有一个timeout 事件，用来指定回调函数：

xhr.ontimeout = function (event) {

console.log(event.target) // 返回的是 xhr对象

alert('请求超时！')

}

FormData对象管理表单数据

Ajax 操作往往用来提交表单数据。为了方便表单处理，HTML5 新增了一个 FormData 对
象，可以模拟表单操作

请求类型必须是 POST

// 新建 FormData对象
let fd = new FormData()
// 为 FormData 添加表单项   apeend() 方法 ：参数一：表单名称   参数二：表单值
fd.append('name', '张三')
fd.append('upwd', '123456')
/* fd.forEach((value, key) => {
  console.log(value)  // 张三   123456
  console.log(key)  // name   upwd
}) */
// 创建 XHR对象
let xhr = new XMLHttpRequest()
// 指定请求的类型和 URL地址 ，这里用的 POST
xhr.open('POST', 'http://www.liulongbin.top:3006/api/formdata')
// 请求头默认是： Content-Type: application/json; charset=utf-8
// 将创建的 fd对象放在 send() 中
xhr.send(fd)
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(JSON.parse(xhr.responseText))
    // 返回的是 完整的res对象，并将 加进去的数据放在 data中
  }
}

使用 FormData 快速获取表单数据

// 获取到 form 表单元素
const form = document.querySelector('form')
form.addEventListener('submit', function (e) {
  // 阻止表单的默认提交行为
  e.preventDefault()
  // 创建 ForData 快速获取到 form 表单中数据
  const fd = new FormData(form)
  let xhr = new XMLHttpRequest()
  xhr.open('POST', 'http://www.liulongbin.top:3006/api/formdata')
  xhr.send(fd)
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
      console.log(JSON.parse(xhr.responseText))
    }
  }
})

上传文件并渲染到页面

<body>
  <input type="file" id="file1">
  <button id="btnUpload">上传文件</button>
  </br>
  <img src="" alt="" id="img" width="800">
  <script>
    const btnUpload = document.querySelector('#btnUpload')

    btnUpload.addEventListener('click', function () {
      let files = document.querySelector('#file1').files
      console.log(files)     // 返回的是数组  FileList {0: File, length: 1}
      // File对象中放了很多属性 ： 比如文件名、文件类型、大小等等
      if (files.length <= 0) {
        return alert('请选择要上传的文件')
      }

      const fd = new FormData()
      fd.append('avatar', files[0])      // 这里的键名是 接口提供的

      const xhr = new XMLHttpRequest()

      // 请求类型必须是 POST
      xhr.open('POST', 'http://www.liulongbin.top:3006/api/upload/avatar')
      xhr.send(fd)

      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
          let data = JSON.parse(xhr.responseText)
          console.log(data)
          if (data.status !== 200) return alert(data.message)
          document.querySelector('#img').src = 'http://www.liulongbin.top:3006' + data.url
        }
      }
    })
  </script>
</body>

显示文件的上传进度 xhr.upload.onprogress

const xhr = new XMLHttpRequest()

// 计算文件的上传进度
xhr.upload.onprogress = function(e) {
  //  e.lengthComputable 是一个布尔值，表示当前上传的资源是否具有可计算的长度
  if (e.lengthComputable) {
    //  e.loaded 已传输的字节
    //  e.total 需传输的字节
    const percentComplete = Math.ceil((e.loaded / e.total) * 100)
    // Math.ceil() 向上取整    已传输 / 需传输 * 100 = 进度条
    console.log(percentComplete)
  }
}

基于 bootstrap 设置进度条样式 xhr.upload.onload

// 计算文件的上传进度
xhr.upload.onprogress = function (e) {
  //  e.lengthComputable 是一个布尔值，表示当前上传的资源是否具有可计算的长度
  if (e.lengthComputable) {
    //  e.loaded 已传输的字节
    //  e.total 需传输的字节
    const percentComplete = Math.ceil((e.loaded / e.total) * 100)
    // Math.ceil() 向上取整    已传输 / 需传输 * 100 = 进度条
    document.querySelector('.progress-bar').style.width = percentComplete + '%'
    document.querySelector('.progress-bar').innerHTML = `已完成${percentComplete}%`

  }
}

// 监听 上传完成的事件
xhr.upload.onload = function () {
  document.querySelector('.progress-bar')
    .className = 'progress-bar progress-bar-success'
}


//    xhr.upload.loadstart  xhr.upload.load   xhr.upload.loadend
//  触发顺序如此

jQuery 高级用法 —— 上传文件

jQuery 中 ajax请求上传文件

$.ajax({
  method: 'POST',     // 必须 POST方式
  url: 'http://www.liulongbin.top:3006/api/upload/avatar',
  data: fd,
  // 不修改 contentType 属性， 使用 FormData 默认的 Content-Type 值
  contentType: false,   // 这俩个是必须加的
  // 不对 processData 中的数据进行 url编码，而是将 FormData 数据原样发送到服务器
  processData: false,
  success: function (res) {}
})

jQuery 中 ajax请求开始和请求完成事件

ajaxStart(callback)

Ajax 请求开始时，执行 ajaxStart函数。可以在 ajaxStart 的 callback 中显示 loading 效果

ajaxStop(callback)

// 监听到 Ajax请求被发起了
$(document).ajaxStart(function () {
  $('#loading').show()
})

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

注意：自 jQuery 版本 1.8 起，该方法只能被附加到文档 document

$(document).ajaxStart() 函数会监听当前文档内所有的 Ajax请求

axios 新的数据库

Axios 是专注于网络数据请求的库。

相比于原生的 XMLHttpRequest 对象，axios 简单易用。
相比于 jQuery，axios 更加轻量化，只专注于网络数据请求。

axios 发起 GET请求

axios.get('url', { params: paramsObj}).then(function (res) {})

let url = 'http://www.liulongbin.top:3006/api/get'
let paramsObj = { name: '黄', age: 18 }
axios.get(url, { params: paramsObj }).then(function (res) {
  console.log(res)  // 打印的是对象，对象中有6个属性和方法
  console.log(res.data)  // 返回的是 接口真实返回的数据
})

axios 发起post请求

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

let urlPost = 'http://www.liulongbin.top:3006/api/post'
let dataObj = { location: '北京', address: '顺义' }
axios.post(urlPost, { dataObj }).then(function (res) {
  console.log(res)   // 返回 对象 ， 有6个属性和方法
  console.log(res.data)   // 返回的是接口 真实返回的数据
})

直接使用 axios 发起请求

axios( {

method: '请求类型',

url: '请求的URL地址',

data: { POST数据 },

params: { GET参数 },

}).then( callback )

POST请求用 data

GET请求用 params

了解同源策略和跨域

同源

如果两个页面的协议，域名和端口都相同，则两个页面具有相同的源。

例如： http://www.test.com/index.html

http → 协议

www.test.com → 域名

80 → 端口

注意：如果端口没有，默认是 80

同源策略

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

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

通俗理解：浏览器规定，A 网站的 JavaScript，不允许和非同源的网站 C 之间，进行资源的交互，例如：

无法读取非同源网页的 Cookie、LocalStorage 和 IndexedDB
无法接触非同源网页的 DOM
无法向非同源地址发送 Ajax 请求

跨域

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

出现跨域的根本原因：浏览器的同源策略不允许非同源的 URL 之间进行资源的交互

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

报错代码：

如何实现跨域数据请求

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

CORS：出现的较晚，它是 W3C 标准，属于跨域 Ajax 请求的根本解决方案。支持 GET 和 POST 请求。缺点是不兼容某些低版本的浏览器

JSONP

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

有三个标签是允许跨域加载资源：

image标签
link标签
script标签

剖析JSONP实现原理

将函数的定义和调用分离为俩个script标签

<script>
  function success(data) {
    console.log('拿到了Data数据')
    console.log(data)
  }
</script>

<script>
  success({ name: 'zs', age: 20 })
</script>

将函数的调用抽离为单独的JS文件

<script>
  function success(data) {
    console.log('拿到了Data数据')
    console.log(data)
  }
</script>
 // 将刚刚函数的调用写到 js文件中，src引用
<script src="../getdata.js"></script>

通过callback指定回调函数的名称

<script>
  function success(data) {
    console.log('拿到了Data数据')
    console.log(data)
  }
</script>
 // 将刚刚函数的调用写到 js文件中，src引用
<script src="../getdata.js?callback=success"></script>
// 通过查询字符串来告诉script ， 返回的是一个叫 success的callback函数

自己实现一个简单的JSONP

<script>
  function success(data) {
    console.log('拿到了Data数据')
    console.log(data)
  }
</script>

<script src="http://ajax.frontend.itheima.net:3006/api/jsonp?callback=success&name=zs&age=20"></script>
<!-- 返回的是这个接口的数据 -->

JSONP的缺点

由于 JSONP 是通过 <script> 标签的 src 属性，来实现跨域数据获取的，所以，JSONP 只支持
GET 数据请求，不支持 POST 请求

注意： JSONP 和 Ajax 之间没有任何关系，不能把 JSONP 请求数据的方式叫做 Ajax，因为
JSONP 没有用到XMLHttpRequest 这个对象

使用jQuery发起JSONP请求

jQuery 提供的 $.ajax() 函数，除了可以发起真正的 Ajax 数据请求之外，还能够发起 JSONP 数据
请求

$.ajax({
  // method: 'GET',
  // 这边 查询字符串也可以在下方添 data属性
  url: 'http://www.liulongbin.top:3006/api/jsonp?name=zs&age=20',
  // 如果要使用 $.ajax() 发起 JSONP请求 ， 必须指定 dataType 为 jsonp
  dataType: 'jsonp',
  // data: {name: 'zs', age: 20}
  success: function (res) {
    console.log(res)
  }
})

注意：默认情况下，使用 jQuery 发起 JSONP 请求，会自动携带一个 callback=jQueryxxx 的参数，jQueryxxx 是随机生成的一个回调函数名称

自定义参数及回调函数名称参数： jsonp 和 jsonpCallback

$.ajax({
  url: 'http://ajax.frontend.itheima.net:3006/api/jsonp?name=zs&age=20',
  dataType: 'jsonp',
  // 发送到服务器的参数名称，默认值为 callback
  jsonp: 'cb',
  // 自定义的回调函数名称，默认值为 jQueryxxx 格式
  jsonpCallback: 'abc',
  success: function (res) {
    console.log(res)
  }
})