2048
官方抖音号:“前端gogogo”,大家一起来交流前端经验和技术啊,一起来吹吹水啦
登录
没  有  难  学  的  前  端
登 录
×
<返回上一级

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

网络请求原生jsajax作者:Jeanie

用原生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         x浏打都需些前理的发不前请也端难本浏楚判现hr.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         x浏打都需些前理的发不前请也端难本浏楚判现hr.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 反序列化。

 

本文来源于网络:查看 >
【推荐】帖子搞不懂,找猿2048老师指导一下?
« 上一篇:el-autocomplete输入时搜索
» 下一篇:Three.js实现脸书元宇宙3D动态Logo
猜你喜欢
(十万案例免费下载)
评论
点击刷新
评论
阿里云
相关博文
推荐案例
×添加代码片段