原生AJAX封装 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

使用原生 JavaScript 封装 Ajax 操作

封装举例 export class Ajax { static get(url, data, hook) { let xmlHttpRequest = new XMLHttpRequest...xmlHttpRequest.responseText) } }; xmlHttpRequest.send(formatData); } } 关于 XMLHttpRequest 其实 ajax...无非就是异步网络请求而已，各种语言都有自己的 http 库，只要使用 http 库基本上都能自己实现 ajax 的功能，在 js 中的原生 http 库则是 XMLHttpRequest，使用 XMLHttpRequest

1.2K4 0

自己原生js封装的ajax请求

当时一些js基础知识也欠缺（虽然现在也不咋的），想要自己封装，难度也很大。今天也终于自己封装一个简易的ajax。...ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); ajax.send(typeof...param(options.data) : options.data); } else { ajax.send(); } ajax.onreadystatechange...= function () { if (ajax.readyState === 4) { if (ajax.status === 200 ||...ajax.status === 301) { options.success(responseType(options.dataType, ajax.responseText

5K3 0

您找到你想要的搜索结果了吗？

是的

没有找到

不如封装一个原生Ajax

封装原生Ajax我们常常引用jq就是为了使用上面的ajax,方便又实用。但是jq文件一个高达几十kb,还有近几年jq的发展趋势不容乐观，jq中还迟迟没有改进。...于是自己造轮子，下面封装了原生JS ajax 。你可以直接复制拿过来用。...function ajax(obj) { // 对实参处理 obj = obj || {}; // 定义局部变量 var xmlhttp, type, url, async, dataType, data

3641 0

第110天：Ajax原生js封装函数

一、Ajax的实现主要分为四部分： 1、创建Ajax对象 1 // 创建ajax对象 2 var xhr = null; 3 if(window.XMLHttpRequest){ 4 xhr =...if(failed){ 25 failed(xhr.status); 26 } 27 } 28 } 29 } 二、Ajax...封装函数： 1 function Ajax(type, url, data, success, failed){ 2 // 创建ajax对象 3 var xhr = null;...} 47 } 48 } 49 } 50 51 // 测试调用 52 var sendData = {name:'asher',sex:'male'}; 53 Ajax

3.4K2 0

原生js模仿jQuery实现对Ajax的封装

老铁们，还记得如何对原生ajax进行封装吗？注释较少，看看是否还能看的明白？...封装如下： function ajax(obj){ //指定提交方式的默认值 obj.type = obj.type || "get"; //设置是否异步，默认为true(异步)...encodeURIComponent(i) + '=' + encodeURIComponent(data[i])); } return arr.join("&"); } } 调用如下： ajax

3.1K2 0

原生JS封装Ajax插件(同域&&jsonp跨域)

前言抛出一个问题，其实所谓的熟悉原生JS，怎样的程度才是熟悉呢？用原生Js封装了一个Ajax插件，引入一般的项目，传传数据，感觉挺可行的。。。...简单说说思路，有兴趣的可以自己跟着写一个，顺便熟悉一下原生的Ajax......Ajax核心，创建XHR对象 Ajax技术的核心是XMLHttpRequest对象（简称XHR），IE5是第一款引入XHR对象的浏览器，而IE5中的XHR对象是通过MSXML库中的一个ActiveX对象实现的...时指定的success函数 } }else{ if(params.fail){ params.fail();//执行调用ajax时指定的fail...浏览器会阻止ajax请求非同源的内容。 JSONP(JSON with Padding) 是一种跨域请求方式。

3.8K2 1

原生——ajax

什么是Ajax？...（前后端数据交互） Asynchronous JavaScript and XML（异步JavaScript和XML） a.节省用户操作时间，提高用户体验，减少数据请求 b.传输、获取数据 ajax流程...工作状态 responseText:ajax请求返回的内容就被存放到这个属性下面 * */ xhr.onreadystatechange=function(){...} } 封装...ajax.js function ajax(method, url, data, success) { var xhr = null; try {

2.4K4 0

js书写原生ajax,JS 原生ajax写法

ajax 原文链接:http://caibaojian.com/ajax-jsonp.html 一.JS原生ajax ajax:一种请求数据的方式,不需要刷新整个页面: ajax的技术核心是 XMLHttpRe...… JS原生ajax与Jquery插件ajax深入学习序言: 近来随着项目的上线实施,稍微有点空闲,闲暇之时偶然发现之前写的关于javascript原生xmlHttpRequest ajax方法以及后来...jquery插件ajax方法,于是就行了一些总结,因 … js原生Ajax的封装与使用一.原生Ajax代码的封装如下: (function() { var XHR = { createStandardXHR...: function() { return new XMLHttpRequest … js原生Ajax 的封装和原理原理及概念 AJAX即“Asynchronous Javascript And XML...删除用户，使用了js原生ajax 主要复习了php的pdo数据库操作,和js的ajax,真麻烦,希望jquery的ajax简单点. index.php: 1 2 [代码]JS原生

18.3K4 0

封装ajax函数

/* *封装ajax函数 * @param options * options = { * type : "get|post", // 请求方式，默认为 get * url...function(responseData){}, // 请求成功时执行的函数 * error : function(err){} // 请求失败时执行的函数 * } */ function ajax

1.3K3 0

2、原生AJAX

*********************** // request : 是对请求报文的封装 // response ：是对响应报文的封装 response.setHeader('Access-Control-Allow-Origin...', '*');// 设置响应设置允许跨域 response.send('HELLO AJAX'); // 回应请求，返回页面的信息 // send方法：只能发送字符串和buffer (1)ajax...'); 的 HELLO AJAX console.log(xhr.responseText); // HELLO AJAX...********************************** ajax ********************************* 发送请求未到3s，这个时候需要终止ajax请求，...我们需要调用xhr对象上的abort方法 : 终止AJAX 请求 xhr.abort(); （1）ajax 点击发送

4261 0

原生Ajax总结

HTTP协议传统的请求和Ajax请求 Ajax定义 Asynchronous JavaScript and XML....Ajax异步的，JavaScript程序希望与服务器直接通信而不需要重新加载页面。...Ajax基本流程 1.创建请求对象 function requestObject(){ if(window.XMLHttpRequest){ return...console.log(request.status+":"+request.statusText); } } jQuery中Ajax...模块参考内容: 图解HTTP jQuery源码Ajax模块分析使用jQuery

1.2K7 0

原生 AJAX 详解

用户的计算机中无法存储大量的数据,因此就需要将数据存储在后台数据库中，前端页面中需要使用数据的时候,就向后台数据库发送请求获取数据进而渲染数据显示页面示例如下分三步发请求后台做响应前端接到数据做渲染原生...== 304) { console.log(ajax.responseText) } } } 封装一个 Ajax 方法...-- 引入封装的 ajax --> ajax.js"> ajax('....console.log(res, typeof res) }) ---控制台--- [1,2,3,4,5,6] string 原生...-- 引入封装的 ajax --> ajax.js"> ajax('.

5651 0

简单的Ajax封装

application/x-www-form-urlencoded'; **success: 请求成功后的回调函数; **error: 请求失败后的回调函数; */ function ajax...+ defaults.data + defaults.cache; } //四、开始编写ajax //1、创建ajax对象 var oXhr = window.XMLHttpRequest...name: 'ivan', sex: 'male', age: '23'}, 　　success: function (data){ alert('返回数据是：' + data); } }); ajax...("If-Modified-Since","0"); 3、在ajax发送请求前加上anyAjaxObj.setRequestHeader("Cache-Control","no-cache");...4、在 Ajax 的 URL 参数后加上"?

9949 0

ajax的再次封装！

jQuery的ajax本来就很方便了，为啥还要在进一步的封装呢？这个首先要看项目的具体需求了，如果觉得不需要，那么完全可以直接用jQuery提供的各种ajax的方法。...如果像我似地，感觉不太方便的话，那么完全可以按照自己的想法和需求来再次封装一下。需求：　　1、调用的时候更加的简单。　　2、可以灵活的做各种设置和变化。　　3、可以满足一些通用的需求。...//对ajax的封装 Nature.Ajax = function (ajax) { //最基础的一层封装 //定义默认值 var defaultInfo...，然后是根据URL的封装，其实就是避免在代码里到处写URL的问题。...ajax有可能出错，出错了就应该有个提示。但是一个页面往往有多个ajax，到底是哪个出错了？

1.4K8 0

简单的Ajax封装

application/x-www-form-urlencoded'; **success: 请求成功后的回调函数; **error: 请求失败后的回调函数; */ function ajax...+ defaults.data + defaults.cache; } //四、开始编写ajax //1、创建ajax对象 var oXhr = window.XMLHttpRequest...name: 'ivan', sex: 'male', age: '23'}, 　　success: function (data){ alert('返回数据是：' + data); } }); ajax...("If-Modified-Since","0"); 3、在ajax发送请求前加上anyAjaxObj.setRequestHeader("Cache-Control","no-cache"); 4...、在 Ajax 的 URL 参数后加上"?

1.1K6 0

Promise封装AJAX请求

AJAX简介AJAX（Asynchronous JavaScript and XML）是一种用于在后台与服务器进行异步数据交互的技术。...常用的AJAX请求方法有XMLHttpRequest对象和fetch函数。在本文中，我们将使用fetch函数作为示例来封装AJAX请求。...封装AJAX请求为Promise下面是将AJAX请求封装为Promise的代码示例：function ajaxRequest(url, options) { return new Promise((resolve...在Promise的执行器函数中，我们使用fetch函数进行实际的AJAX请求。...使用Promise封装的AJAX请求现在我们可以使用封装好的ajaxRequest函数来发送AJAX请求，并处理请求的结果和错误。

7441 0

封装ajax、axios请求

一般交互都是基于JavaScript的XMLHttpRequest来做封装，目前比较常用的有Ajax、Fetch、axios等。但是很多开发的时候都是直接用这几个给的方法，没有二次封装。...由于本人从未用过Fetch,所以只讲解一下Ajax和axios本人的封装。...我们都知道，Ajax除了这些参数之外还有好多，比如穿文件、同步还是异步等等，需要的话可以封装上去，但是个人认为那些用的少的，需要用到的时候重新写一个Ajax会更好。...Axios封装跟Ajax差不多，反而更简单，因为axios已经帮我们设定好了响应和请求的过程。...以上就是想要分享的封装请求，我封装的并不是很好，只是想让大家知道请求最好是自己分装一个适合的。（完）

1.3K1 0

简单的Ajax封装

application/x-www-form-urlencoded'; **success: 请求成功后的回调函数; **error: 请求失败后的回调函数; */ function ajax...+ defaults.data + defaults.cache; } //四、开始编写ajax //1、创建ajax对象 var oXhr = window.XMLHttpRequest...name: 'ivan', sex: 'male', age: '23'}, 　　success: function (data){ alert('返回数据是：' + data); } }); ajax...("If-Modified-Since","0"); 3、在ajax发送请求前加上anyAjaxObj.setRequestHeader("Cache-Control","no-cache"); 4...、在 Ajax 的 URL 参数后加上"?

7232 0

前端ajax封装教程

AJAX（Asynchronous JavaScript and XML）是前端与后端进行异步通信的核心技术。封装AJAX可以提高代码复用性、统一处理错误和优化请求流程。...下面是一个实用的AJAX封装教程，包含完整实现和使用示例。...一、封装核心思路统一处理请求参数和 headers集中处理错误和异常情况支持Promise，方便使用async/await实现请求拦截和响应拦截处理超时和取消请求二、完整封装实现下面是一个基于原生XMLHttpRequest...的AJAX封装，支持GET、POST等常用方法：三、使用方法1....，减少重复请求实现请求重试机制，应对临时网络问题支持取消请求，避免无用请求消耗资源添加请求队列，控制并发请求数量通过这个封装，你可以在项目中更高效、更规范地处理AJAX请求，提升开发效率和代码质量。

2690 0

Ajax工作流程(原生Ajax)

Ajax通过XMLHttpRequest对象实现异步方式在后台发送发送请求。主要有以下四个步骤：（1）初始化XMLHttpRequest对象。...以下是一个用Ajax判断用户名是否正确的样例： index.jsp文件： page language="java" contentType="text/html; charset=UTF-8"

9772 0

点击加载更多

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭