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

  • A+
所属分类:Web前端
摘要

用原生js发起网络请求: 首先要明确的是,什么是XMLHttpRequest? (XMLHttpRequest)简称xhr,是浏览器提供的javascript对象,我们可以通过与这个对象,请求服务器上面的数据资源,不管是jQuery的Ajax函数还是别的框架,都是基于xhr,进行封装出来的;

用原生js发起网络请求:

首先要明确的是,什么是XMLHttpRequest?

(XMLHttpRequest)简称xhr,是浏览器提供的javascript对象,我们可以通过与这个对象,请求服务器上面的数据资源,不管是jQuery的Ajax函数还是别的框架,都是基于xhr,进行封装出来的;用原生js的方式发起网络请求

 

 

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