原生ajax请求的使用

0x584a 发布于2019-08-23 10:38 / 1871人阅读

摘要：注请求地址是自己的项目地址，请自行更改。这只是一个简单的原生的使用，之后会发如何封装原生实现的第一步创建对象。第四步发送请求数据。但是一般情况下数据的请求都是异步的，那么就要使用这个事件对数据进行处理。

注：请求地址是自己的项目地址，请自行更改。

这只是一个简单的原生XMLHttpRequst的使用，之后会发如何封装原生ajax实现jequery的ajax

第一步：创建xhr对象。

const xhr = new XMLHttpRequest();

第二步：open()设置。

xhr.open("PUT","http://118.24.84.199:8080/sm/accept/list",false);

第三步：设置接口需要的头部。

xhr.setRequestHeader("token","515b8c62-ddf4-41ef-a7c8-93957e1c589e");
xhr.setRequestHeader("Accept","application/json");
xhr.setRequestHeader("Content-Type","application/json");

第四步：发送请求数据。

注意：这里的数据需要进行处理，处理为json文件，使用JSON.stringify处理。

let data = {
                page:1,
                pageSize:10,
            };
data = JSON.stringify(data);
xhr.send(data);

到这里就已经发送了，可以在浏览器的网络请求中查看请求的情况。

但是在页面中还没有进行数据处理

如果数据是同步请求：直接在send()语句之后对数据进行处理。

console.log(xhr.response);

但是一般情况下数据的请求都是异步的，那么就要使用onreadystatechange这个事件对数据进行处理。
接收到数据之后将其打印。

xhr.onreadystatechange = function(event){
    if (xhr.readyState == 4){
        if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
            console.log(JSON.parse(xhr.response));
        } else {
            console.log("Request was unsuccessful: " + xhr.status);
        }
    }
};

云服务器 GPU云服务器 js使用ajax异步请求数据 js中使用ajax请求数据 ajax的异步请求 ajax的post请求

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96541.html

原生JS与jQuery对AJAX的实现

摘要：原生与对的实现一定义里这么解释异步的和。二原生实现所有现代浏览器以及均内建对象。一般是正常未找到页面，一般是错误，或者后台没有创建相应的内部服务错误，多为后台错误。基本上通过发送的数据及传回的数据就能定位问题所在了。原生JS与jQuery对AJAX的实现一、定义 W3C里这么解释AJAX： AJAX = Asynchronous JavaScript and XML（异步的 Jav...

Chaz 2019-08-21 10:37 评论0 收藏0
原生JS封装ajax以及request

摘要：一封装原生的为类以及用法见之前的文章根据确定请求的头部以及别的信息。二封装实用性的类在项目中经常需要将进行封装，使用类发起请求。请求不带请求带请求不带请求带请求不带请求带这个方法感觉可以再次进行封装。完整代码点击查看以上。一、封装原生的xhr为ajax类 xhr以及用法见之前的文章 1、根据url确定请求的头部以及别的信息。 var _headerConfig = {}; ...

james 2019-08-23 13:10 评论0 收藏0
原生JavaScript实现AJAX、JSONP

摘要：在这里讲解一下用原生如何实现。当然，前面也说过，你可以给定固定回调函数名最后我已经将和请求合并在一起了，下载链接原文链接原生实现如有问题，欢迎在下方留言相信大多数前端开发者在需要与后端进行数据交互时，为了方便快捷，都会选择JQuery中封装的AJAX方法，但是有些时候，我们只需要JQuery的AJAX请求方法，而其他的功能用到的很少，这显然是没必要的。其实，原生JavaScript...

xcc3641 2019-08-20 14:06 评论0 收藏0
Jquery ajax, Axios, Fetch区别之我见

摘要：我们都知道因为同源策略的问题，浏览器的请求是可能随便跨域的一定要有跨域头或者借助，但是，中可以设置为不跨域，如下所示这样之后我们会得到一个为的返回。免费帮忙内推阿里等各大IT公司的岗位，有兴趣可以带简历加微信angeltune 引言前端技术真是一个发展飞快的领域，我三年前入职的时候只有原生XHR和Jquery ajax，我们还曾被JQuery 1.9版本版本以下不支持大文件请求这个...

YanceyOfficial 2019-08-22 13:49 评论0 收藏0