Ajax-XMLHttpRequest

XMLHttpRequest的基本使用

什么XMLHttpRequest

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

使用xhr发起GET请求（***）

步骤

// 1. 创建 XHR 对象
    var xhr = new XMLHttpRequest()
    // 2. 调用 open 函数  准备发送.  参数直接加在网址后面（age=18）
    xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks?age=18')
    // 3. 调用 send 函数  发送
    xhr.send()
    // 4. 监听 onreadystatechange 事件
    xhr.onreadystatechange = function () {
      // readyState = 4 有0，1，2，3，4这五个阶段，4表示ajax请求已完成（失败或成功）
      if (xhr.readyState === 4 && xhr.status === 200) {
        // 获取服务器响应的数据
        console.log(xhr.responseText)
      }
    }

了解xhr 对象的readyState 属性

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

必然处于以 下状态中的一个：

 

查询字符串

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

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

GET请求携带参数的本质就是查询字符串

无论使用 $.ajax() ，还是使用 $.get() ，又或者直接使用 xhr 对象发起 GET 请求，当需要携带参

数的时候，本质上，都是直接将参数以查询字符串的形式，追加到 URL 地址的后面，发送到服务器 的。

URL编码与解码

什么是URL编码

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

必须对中文字符进行 编码 （转义）。

URL 编码原则的通俗理解：使用英文字符去表示非英文字符

//encodeURI其他字符转码
var str2 = encodeURI('芜湖，起飞')
    console.log(str2)
//解码
var str3 = decodeURI('%E9%BB%91%E9%A9%AC')
    console.log(str3)

使用xhr发起POST请求（***）

// 1. 创建 xhr 对象
    var xhr = new XMLHttpRequest()
    // 2. 调用 open 函数    准备发起请求
    xhr.open('POST', 'http://www.liulongbin.top:3006/api/addbook')
    // 3. 设置 Content-Type 属性,发送post请求的固定写法，get不用
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
    // 4. 调用 send 函数  发送post请求
    xhr.send('bookname=水浒传a&author=施耐庵a&publisher=上海图书出版社a')
    // 5. 监听事件
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4 && xhr.status === 200) {
        // responseText，响应的文本
        console.log(xhr.responseText)
      }
    }

数据交换格式

什么是数据交换格式

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

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

 

什么是XML

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

似， 也是一种标记语言。比较 臃肿，和数据无关的代码多，体积大，传输效率低

 

XML和HTML的区别

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

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

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

什么是JSON

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

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

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

JSON 的两种结构

JSON 就是用字符串来表示 Javascript 的对象和数组。所以， JSON 中包含 对象 和 数组 两种结构，通过两种结构的相互嵌套，可以表示各种复杂的数据结构。

对象结构

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

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

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

 

JSON 和JS 对象的互转

// 必须都用双引号包裹
    // JSON 的本质：用字符串来表示 Javascript 对象数据或数组数据
    // json字符串转化为对象或数组，因为计算机数据只能识别json字符串
    // var jsonStr = '{"a": "Hello", "b": "world"}'
    // var obj = JSON.parse(jsonStr)
    // console.log(obj)


    // 对象或数组转化为json字符串JSON.stringify()，因为对象或数组更好用
    var obj2 = { a: 'hello', b: 'world', c: false }
    var str = JSON.stringify(obj2)
    console.log(str)
    console.log(typeof str)

XMLHttpRequest Level2的新特性

旧版XMLHttpRequest的缺点

只支持文本数据的传输，无法用来读取和上传文件

传送和接收数据时，没有进度信息，只能提示有没有完成

XMLHttpRequest Level2的新功能

可以设置 HTTP 请求的时限

可以使用 FormData 对象管理表单数据

可以上传文件

可以获得数据传输的进度信息