封装XHR对象

最新推荐文章于 2024-06-17 21:45:36 发布
最新推荐文章于 2024-06-17 21:45:36 发布
阅读量486 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Lz_King/article/details/78651985
版权
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>封装XHR对象</title>
</head>
<body>
<script>
    function getXhr() {
        // 声明XMLHttpRequest对象
        var xhr = null;
        // 根据浏览器的不同情况进行创建
        if (window.XMLHttpRequest) {
            // 表示除IE外的其他浏览器
            xhr = new XMLHttpRequest();
        } else {
            // 表示IE浏览器
            xhr = new ActiveXObject('Microsoft.XMLHttp');
        }
        return xhr;
    }
    // 创建核心对象
    var xhr = getXhr();
</script>
</body>
</html>
MiracleSol
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
XHR的简单封装xr.zip
07-19
xr 是 XMLHttpRequest 的超简单封装，并返回 ES6 Promise。示例代码：xr.get('/api/items', {take: 5})   .then(res => console.log(res.data)); xr.post('/api/item', {name: 'hello'})   .then(res => console.log("new item", res.data)); xr({   method: xr.Methods.GET,   url: '/api/items',   params: {take: 5},   events: {     progress: (xhr, xhrProgressEvent) => {       console.log("xhr", xhr);       console.log("progress", xhrProgressEvent);     }   } });
js实现对ajax请求面向对象的封装
10-23
面向对象封装的结果应允许开发者以更简洁的方式发起请求，并指定成功或失败的回调函数来处理特定业务逻辑，而不是将这些逻辑混入到请求处理函数中。 一个典型的封装后的AJAX请求可以是这样的： ```javascript ...
封装通用的xhr对象(兼容各个版本)
aolohzd52984的博客
02-06 357
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...
XHR+Promise五分钟学会封装一个属于自己的axios
最新发布
jk0025的博客
06-17 736
XHR+Promise五分钟学会封装一个属于自己的axios
Axios 简版：XHR 的封装、函数和对象方式的请求、添加过滤器
Lovely Ruby 的手账
07-31 1140
文章目录简版 Axios目标说明目标1：实现基本请求、及多种调用方法类实例化函数式调用对象式调用添加过滤器附 简版 Axios 目标说明 实现 axios 的函数式调用、对象式调用、拦截器的实现等 目标1：实现基本请求、及多种调用方法 类实例化 如果前端想这么调用的话 首先写个简单的类，把 xhr 封装一下 class MyAxios { constructor() {} request(config) { return new Promise((resolve, re
封装XHR
weixin_57653722的博客
05-12 486
// 1.把参数进行处理 // 1.1 拼接为特定格式字符串！ // 1.2 需要对字符串处理 encodeURI(); let str="name=张三&age=18"; str = encodeURI(str); console.log(str); // 没有%？只能中文!传输数据编码格式 urlencoded 只支持ASCII; // 2.xhr实例化 let xhr = new XMLHttpRequest(); // 3.设置方式，url // 3.1 get x.
xhr简单封装ajax
weixin_小白鼠的博客
04-18 363
xhr简单封装ajax // 设置默认值 const defaults = { type: "get", url: "", async: true, data: {}, header: { ​ "Content-Type": "application/x-www-form-urlencoded", }, success: function () {}, error: function () {}, }; function dealParams(d
ajax封装实例代码
11-04
Ajax封装则是将常见的Ajax操作进行模块化处理，方便开发者在项目中快速、高效地实现数据交互。本篇文章将深入探讨Ajax封装实例代码及其相关知识点。 首先，我们来看Ajax的核心原理：通过JavaScript创建...
封装原生ajax
01-08
封装原生ajax四个步骤：类似于手机打电话 创建XMLHttpRequest对象(买手机) 打开与服务器的连接(拨号) 发送到服务器(按下拨号键) 等待服务器的响应(有可能关机，不在服务区，无人接听，有人接听) function ajax(obj){...
简易封装Ajax.zip
04-11
1. **创建XMLHttpRequest对象**：这是Ajax的基础，几乎所有的现代浏览器都内置了这个对象，用于在后台与服务器通信。 2. **发送请求**：通过XMLHttpRequest对象的`open()`方法设定请求类型（GET或POST）、URL和是否...
vue-ajax小封装实例
08-29
下面我们将详细解释Vue.prototype.ajax对象的封装方法。 首先，让我们看一下提供的代码片段。Vue.prototype是一个对象，它扩展了Vue实例的默认功能。在这里，我们添加了一个名为`ajax`的方法，以便于Vue组件内部...
封装Ajax请求/xhr与promise
willwe的博客
11-09 624
// 1. 创建对象 const xhr = new XMLHttpRequest(); // 2. 初始化 xhr.open('GET', 'https://api.apiopen.top/getJoke'); // 3. 发送 xhr.send(); // 4. 绑定事件，处理响应结果 xhr.onreadystatechange = function () { //判断 if (xhr.readyState === 4) { //判断响应状态码.
封装一个axios--利用xhr和promise
m0_46205209的博客
09-27 382
基本思路 一：创建一个promise对象，成功的结果为response, 异常的结果为error 二：利用xhr创建一个ajax请求 2.1创建xhr对象 2.2打开连接（初始化请求） 2.3 根据请求方式来决定要不要传请求体参数 2.4监视状态，如果请求成功调用reject()，失败resolve() //2.4.1获取状态 // 2.4.2如果请求成功(status在[200, 299])时执行resolve(response对象) // 2.4.3如果请求失败时执行reject(error对象) i
js封装xhr【重复造轮子】
weixin_34111819的博客
01-08 211
仿jquery ajax，不过功能没那么多。贴代码 --------------------------------------分割线------------------------------------------ //MyXhr对象 var MyXhr = function(config){ this.config = config; var that = th...
封装原生ajax（缓存+xhr单例）
每天多一点干货
03-02 866
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;封装原生的ajax&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;script type="text/javascript"&gt; function XAjaxRequester(bool)
ajax如何封装XHR,JavaScript_用原生JS对AJAX做简单封装的实例代码，首先，我们需要xhr对象。这对 - phpStudy...
weixin_36239866的博客
08-06 344
用原生JS对AJAX做简单封装的实例代码首先，我们需要xhr对象。这对我们来说不难，封装成一个函数。var createAjax = function() { var xhr = null; try { //IE系列浏览器 xhr = new ActiveXObject("microsoft.xmlhttp");} catch (e1) { try { //非IE浏览器 xhr = new XML...
从XHR、Promise到手动封装简易axios
CaptainDrake的博客
07-18 1121
从XHR、Promise到手动封装简易axios
封装一个通用的ajax请求
qq_39897978的博客
02-22 329
//封装ajax function useajax(method, url, data, callback, type) { //创建兼容对象 var xhr; if (window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else { xhr = new ActiveXObject("Microsoft.X...
用 TypeScript 写一个轻量级的 UI 框架之五：xhr 模块
zhangxin09的专栏
01-18 551
关于 XHR（XMLHttpRequest），就是 AJAX程序。既然为 AJAXS程序，自然少不了 XHR 的调用。在我之前的累积基础上，升级代码到 ts。 《用 XHR + curl.exe 制作 ddns 客户端札记》（https://blog.csdn.net/zhangxin09/article/details/6740558） 《简易封装 XHR：支持 GET/POST/PUT/DELETE/JSONP/FormData》（https://blog.csdn.net/zhangxin09/ar
js用async封装XHR
04-05
在JS中，可以使用async函数来封装XHR请求。async函数是ES6中引入的一种异步编程方式，可以更方便地处理异步操作，使代码更加简洁易读。 以下是一个使用async函数封装XHR请求的示例代码： ``` async function request(url, method, data) { return new Promise((resolve, reject) => { const xhr = new XMLHttpRequest(); xhr.open(method, url); xhr.setRequestHeader('Content-Type', 'application/json'); xhr.onreadystatechange = function() { if (xhr.readyState === 4) { if (xhr.status === 200) { resolve(JSON.parse(xhr.responseText)); } else { reject(xhr.statusText); } } }; xhr.onerror = function() { reject('Network Error'); }; xhr.send(JSON.stringify(data)); }); } // 使用示例 async function getData() { try { const result = await request('/api/data', 'GET'); console.log(result); } catch (error) { console.error(error); } } async function postData() { try { const result = await request('/api/data', 'POST', { name: 'John' }); console.log(result); } catch (error) { console.error(error); } } ``` 在上述代码中，request函数接收三个参数：请求的URL、请求方法和请求数据。该函数返回一个Promise对象，用于处理异步操作的结果。 在使用时，可以通过async/await语法来调用request函数，以获取异步操作的结果。如果异步操作成功，将返回请求的数据；如果异步操作失败，将返回错误信息。 以上是一个基本的异步请求示例，可以根据实际需求进行修改和扩展。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值