用原生js的方式发起网络请求

当前位置:

首页 > temp > JavaScript教程 >

用原生js的方式发起网络请求

用原生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 反序列化。

来源：https://www.cnblogs.com/ccayn/p/15574041.html

栏目列表