- A+
用原生js发起网络请求：
首先要明确的是，什么是XMLHttpRequest？
(XMLHttpRequest)简称xhr，是浏览器提供的javascript对象，我们可以通过与这个对象，请求服务器上面的数据资源，不管是jQuery的Ajax函数还是别的框架，都是基于xhr，进行封装出来的；
使用xhr发起GET请求
步骤：
1.创建xhr对象；
2.调用xhr.open()函数；
3.调用xhr.send()函数；
4.监听xhr.onreadystatechange事件；
1 // 创建XHR对象 2 var xhr = new XMLHttpRequest(); 3 // 调用open函数 4 xhr.open("GET", 5 "http://www.liulongbin.top:3006/api/getbooks") 6 // 调用send函数,发起请求 7 xhr.send() 8 // 监听onreadystatechange事件 9 xhr.onreadystatechange = function () { 10 //判断服务器返回的状态信息是否全等于4且http响应状态码是否等于200； 11 if (xhr.readyState === 4 && xhr.status === 200) { 12 //打印JSON字符串形式的服务器响应数据； 13 console.log(xhr.responseText); 14 //检测数据类型返回string 15 console.log(typeof xhr.responseText); 16 } 17 }
xhr.readyState：状态信息。而且状态也是不可逆的；
0：请求未初始化，还没有调用 open()。
1：请求已经建立，但是还没有发送，还没有调用 send()。
2：请求已发送，正在处理中（通常现在可以从响应中获取内容头）。
3：请求在处理中；通常响应中已有部分数据可用了，没有全部完成。
4：响应已完成；您可以获取并使用服务器的响应了。
xhr.status：HTTP响应状态码;
[信息响应]( `100`– `199`)；
[成功响应]( `200`– `299`)；
[重定向消息]( `300`– `399`)；
[客户端错误响应]( `400`– `499`)；
[服务器错误响应]( `500`- `599`)；
使用xhr发起带参数的get请求；
只需要在调用xhr.open期间，为url地址指定参数就可以了；
xhr.open("GET", "http://www.liulongbin.top:3006/api/getbooks?id=1")
这种在URL地址后面拼接的参数，叫做查询字符串；
GET请求携带参数的本质：
无论使用$.ajax(),还是使用$.get(),又或者直接使用xhr对象发起的get请求，当需要携带参数的时候，本质上，都是直接将参数以查询字符串的形式，追加到URL的后面，发送到服务器的；
$.get('url',{name:'ss',age:20},function(){}) //等价于 $.get('url?name=ss&age=20',function(){}) $.ajax({method:'GET',url:'url',data:{name:'ss',age:20},success:function(){}}) //等价于 $.ajax({method:'GET',url:'url?name=ss&age=20',success:function(){}})
使用xhr发起post请求；
步骤：
创建xhr对象
调用xhr.open()函数
设置Content-Type属性（固定的写法）
调用xhr.send()函数，指定发送的数据；
监听xhr.onreadystatechange事 1 // 1. 创建 xhr 对象
2 var xhr = new XMLHttpRequest(); 3 // 2. 调用 open 函数 4 xhr.open("POST", "http://www.liulongbin.top:3006/api/addbook"); 5 // 3. 设置 Content-Type 属性（固定写法） 6 xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 7 // 4. 调用 send 函数 8 xhr.send(`bookname=yyds&author=yyds&publisher=yyds`); 9 // 5. 监听事件 10 xhr.onreadystatechange = function () { 11 if (xhr.readyState === 4 && xhr.status === 200) { 12 console.log(xhr.responseText); 13 console.log(typeof xhr.responseText); 14 //JSON.parse方法可以把服务器返回过来的JSON字符串数据转化为对象的形式； 15 var result = JSON.parse(xhr.responseText) 16 //控制台打印转化的完成的对象； 17 console.log(result) 18 //打印对象，以数组的形式返回 19 console.log(result.data) 20 //相反JSON.stringify()方法，可以把对象转化为JSON字符串数据的形式 21 var json=JSON.stringify(result)
console.log(json) 22 } 23 }
把数据对象 转换为 字符串的过程，叫做序列化，例如：调用 JSON.stringify() 函数的操作，叫做 JSON 序列化。
把字符串 转换为 数据对象的过程，叫做反序列化，例如：调用 JSON.parse() 函数的操作，叫做 JSON 反序列化。
