AJAX-XMLHttpRequest的基本使用（使用XMLHttpRequest对象发起GET和POST请求,数据交互格式XML，JSON）

1.什么是XMLHttpRequest

XMLHttpRequest是浏览器提供的JavaScript对象，通过它可以请求网络服务器上的资源，jQuery中的ajax函数就是基于这个对象封装出来的

2.使用xhr发起GET请求

2.1.创建XMLHttpRequest对象

var xhr=new XMLHttpRequest()

2.2.调用xhr.open()函数，创建请求

xhr.open('GET','htp://www.liulongbin.top:3006/api/getbooks')

2.3.使用xhr.send()函数，发送请求

xhr.send()

2.4.监听xhr.readyonstatechange事件

xhr.onreadystatechange=function(){

//2.4.1监听xhr对象的请求状态与服务器的状态

if(xhr.readyState===4&&xhr.status===200){
//打印请求的数据
console.log(xhr.responseText);
}
}

3.xhr对象的steadyState属性

值	状态	描述
0	UNSENT	XMLHttpRequest对象已经被创建，但是还没有调用open方法
1	OPENED	open()方法已经被调用
2	HEADEERS_RECEIVED	send()方法已经被调用，响应头函数也已经被接收
3	LOADING	数据接收中，response属性已经包含部分数据
4	DONE	ajax请求完成，此时数据已经传输完成或者失败

    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks');
    xhr.send();
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText);
      }
    }

 

4.查询字符串

在URL末尾添加的用于向服务器发送信息的字符串

格式

在URL末尾加上英文的?,再加上参数=值，多个参数用&进行分割，就可以把想要发送给服务器的数据添加到URL中

http://liulongbin.top:3006/api/getbooks?id=1&bookname=西游记

    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks?id=1');
    xhr.send();
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText)
      }
    }

5.URL编码

URL中包含中文字符就必须对URL进行编码，编码原则就是使用安全字符表示不安全字符

URL编码API

encodeURI()

URL解码API

decodeURI()

  <script>
    var str = '按摩器加偶按你在哪';
    console.log(encodeURI(str));//%E6%8C%89%E6%91%A9%E5%99%A8%E5%8A%A0%E5%81%B6%E6%8C%89%E4%BD%A0%E5%9C%A8%E5%93%AA
    var str2 = '%E6%8C%89%E6%91%A9%E5%99%A8%E5%8A%A0%E5%81%B6%E6%8C%89%E4%BD%A0%E5%9C%A8%E5%93%AA';
    console.log(decodeURI(str2));//按摩器加偶按你在哪
  </script>

6.使用xhr发起POST请求

6.1 创建xhr对象

var xhr=new XMLHttpRequest()

6.2 调用xhr.open()函数

xhr.open('POST','http://www.liulongbin.top:3006/api/addbook');

6.3设置Content-Type属性

xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')

6.4 调用xhr.send()函数，并指定要发送的数据

xhr.send('bookname=水浒传&author=施耐庵&publisher=天津图书出版社')

6.5 监听xhr.onreadystatechange事件

xhr.onreadystatechange=function(){
  if(xhr.readyState===4&&xhr.status===200){
    console.log(xhr.responseText)
  }
}

  <script>
    var xhr = new XMLHttpRequest();
    xhr.open('POST', 'http://www.liulongbin.top:3006/api/addbook');
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.send('bookname=水浒&author= 施耐庵&publisher=天津教育出版社');
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText);
      }
    }
  </script>

7.数据交互格式

数据交互格式就是服务器与客户端之间进行数据传输与交换的格式，前端领域常用的交互格式是XML和JSON

XML：可拓展标记语言，用来传输和存储数据，是数据的载体

JSON：本质是字符串，是一种轻量级的文本数据交互格式，专门用于存储和传输数据，JSON比XML更小，更快，更易于传输

JSON有两种结构

对象结构

{"key":value, "key":value, ...}

注意：key必须是英文双引号包裹的字符串，value可以是数字，字符串，布尔值,null，数组和对象，JSON全用双引号

例如

{
"name":"zs",
"age":20,
"address":"null",
"hobby":["吃饭","睡觉","跑步"]
}

数组结构

["值","值","值", ...]

例如

["1","hhhh",["hhh","你哈"]]

注意事项：

属性名必须用双引号包裹

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

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

JSON中不能写注释

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

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

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

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

JSON和JS对象的互相转换

将JSON字符串转换为JS对象，使用JSON.parse()方法

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

将JS对象转换为JSON格式，使用JSON.stringify()方法

var json=JSON.stringify({a:'hello',b:'world'})

  <script>
    var obj = JSON.parse('{"a":"Hello","b":"world"}');
    console.log(obj)
    var json = JSON.stringify({ a: 'Hello', b: 'world' });
    console.log(json);
  </script>

序列化：把数据对象转换为字符串的过程，例如JSON.stringify()

反序列化：把字符串转换为数据对象的过程，例如JSON.parse()

  <script>
    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks');
    xhr.send();
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText);
        var result = JSON.parse(xhr.responseText);
        console.log(result)
      }
    }
  </script>