二十二、AJAX

22.1 简介

Asynchronous JavaScript And XML(异步的JS和XML)

本质：通过JS代码异步发送请求获取XML数据。 不过现在已经很少请求XML数据了。而改为请求JSON数据。

XML：可拓展标记语言。

  1. <note>
  2.     <to>George</to>
  3.     <from>John</from>
  4.     <heading>Reminder</heading>
  5.     <body>Don't forget the meeting!</body>
  6. </note>

22.2 AJAX

AJAX，其实就是通过JS代码异步发送请求获取数据。

第一步：初始化一个JS对象

  1. var xhr = new XMLHttpRequest();

第二步：添加onreadystatechange事件

  1. xhr.onreadystatechange = function() {
  2.     // 这个事件名字，叫做 当等待状态改变
  3. }

第三步：调用open方法

作用：打开TCP连接

  1. open的第一个参数 是请求方式
  2. open的第二个参数 是URL
  3. open的第三个参数 是否异步发送请求
  4. xhr.open('get', './regist.php', true);

第四步：调用send方法

  1. xhr.send(); // 发送请求正文

22.3 XHR的属性

image.png

readyState 共5个值

  1. 0： 刚刚初始化 未调用open方法
  3. 1： 调用了open方法连接建立
  5. 2： 接收到响应头的信息
  7. 3： 接受到一部分数据
  9. 4： 接受了所有数据

22.4 JSON

JSON： JavaScript Object Notation JS对象表示法

它是一种数据格式。只要符合k:v形式的数据 都可以叫做JSON

JS中，数组和对象都叫做符合JSON结构的数据。

JSON也可以单独形成文件，叫做JSON文件。此时必须要求符合JSON规则。

JSON规则：

  1. 属性名必须加双引号
  3. 属性值是：对象、数组、字符串(双引号)、数字、null
  5. 不可以有注释
  7. 最后一个逗号不能有

22.5 ECMAScript5中的JSON

ECMAScript5版本中添加了一个JSON对象。

它有两个方法：parse 和 stringify

JSON.parse 将JSON格式的字符串转为真正的对象

  1. var str = '{"error":0,"data":"\u606d\u559c\u53ef\u4ee5\u6ce8\u518c"}'
  2. var obj = JSON.parse(str)

转换结果image.png

JSON.stringify 将对象或者数组转为JSON格式的字符串

  1. var obj = {error: 0, data: "恭喜可以注册"};
  2. var str1 = JSON.stringify(obj);
  3. str1 => '{"error":0,"data":"恭喜可以注册"}'