自封装Ajax函数 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

封装ajax函数

/* *封装ajax函数 * @param options * options = { * type : "get|post", // 请求方式，默认为 get * url...dataType : "text|json", // 预期从服务器返回数据的格式 * success : function(responseData){}, // 请求成功时执行的函数...* error : function(err){} // 请求失败时执行的函数 * } */ function ajax(options){ options = options...=== 200){ var data = xhr.responseText; if(options.dataType === "json") 更多内容请见原文，文章转载自：

9223 0

简单的封装ajax函数

//封装一个ajax函数 // 参数约定: // url 必须 // method 可选, 默认是 get // data 可选, 可以是字符串, 也可以是对象( 键值对...) // fn 处理响应回来的数据, 函数需要有参数, 即响应回来的数据 function ajax( options ){ //定义参数 var url=options.url...){ tmp.push(k + "=" + data[k] ); } data=tmp.join("&"); } //开始发送ajax

8247 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

2.9K2 0

不懂JQuery的孩子：自封装Ajax函数

前言　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　一直没痛下决心学习JQuery，但平时项目中又要用到Ajax，于是自己写一个函数封装一下方便项目中偷懒吧！...今天一不小心看到介绍xmlHttp对象的博客，细读一下重新认识了一下xmlHttp对象，获益良多，顺便重构一下自己写的Ajax函数。　　...method=="function") 54 OnLoading = method; 55 } 56 //当status不为200时触发,有默认处理函数...get 20 { 21 return false; 22 } 23 } 24 } Ajax...封装包基本写好了，不过对于JavaScript依然有很多不清楚的地方，要好好学一下才行。

1.4K10 0

ajax的再次封装！

jQuery的ajax本来就很方便了，为啥还要在进一步的封装呢？这个首先要看项目的具体需求了，如果觉得不需要，那么完全可以直接用jQuery提供的各种ajax的方法。...ajax获得数据的同时，还会附带一段调试信息，需要显示出来。有专门的处理函数，但是需要调用。实现：　　　　直接上代码吧。...//对ajax的封装 Nature.Ajax = function (ajax) { //最基础的一层封装 //定义默认值 var defaultInfo...，然后是根据URL的封装，其实就是避免在代码里到处写URL的问题。...ajax访问，难免会出现点小意外，有的是服务器返回的值有问题，有时候是服务器报错了。那么要怎么办呢？于是就出现了这个error的统一处理函数。

1.2K8 0

简单的Ajax封装

默认值:true; **contentType: HTTP头信息，默认值：'application/x-www-form-urlencoded'; **success: 请求成功后的回调函数...; **error: 请求失败后的回调函数; */ function ajax(opts){ //一、设置默认参数 defaults = { url...+ defaults.data + defaults.cache; } //四、开始编写ajax //1、创建ajax对象 var oXhr = window.XMLHttpRequest...("If-Modified-Since","0"); 3、在ajax发送请求前加上anyAjaxObj.setRequestHeader("Cache-Control","no-cache");...4、在 Ajax 的 URL 参数后加上"?

7799 0

简单的Ajax封装

默认值:true; **contentType: HTTP头信息，默认值：'application/x-www-form-urlencoded'; **success: 请求成功后的回调函数...; **error: 请求失败后的回调函数; */ function ajax(opts){ //一、设置默认参数 defaults = { url...+ defaults.data + defaults.cache; } //四、开始编写ajax //1、创建ajax对象 var oXhr = window.XMLHttpRequest...("If-Modified-Since","0"); 3、在ajax发送请求前加上anyAjaxObj.setRequestHeader("Cache-Control","no-cache"); 4...、在 Ajax 的 URL 参数后加上"?

9196 0

简单的Ajax封装

默认值:true; **contentType: HTTP头信息，默认值：'application/x-www-form-urlencoded'; **success: 请求成功后的回调函数...; **error: 请求失败后的回调函数; */ function ajax(opts){ //一、设置默认参数 defaults = { url...+ defaults.data + defaults.cache; } //四、开始编写ajax //1、创建ajax对象 var oXhr = window.XMLHttpRequest...("If-Modified-Since","0"); 3、在ajax发送请求前加上anyAjaxObj.setRequestHeader("Cache-Control","no-cache"); 4...、在 Ajax 的 URL 参数后加上"?

5482 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请求，并处理请求的结果和错误。

4891 0

封装ajax、axios请求

一般交互都是基于JavaScript的XMLHttpRequest来做封装，目前比较常用的有Ajax、Fetch、axios等。但是很多开发的时候都是直接用这几个给的方法，没有二次封装。...由于本人从未用过Fetch,所以只讲解一下Ajax和axios本人的封装。...我们都知道，Ajax除了这些参数之外还有好多，比如穿文件、同步还是异步等等，需要的话可以封装上去，但是个人认为那些用的少的，需要用到的时候重新写一个Ajax会更好。...Axios封装跟Ajax差不多，反而更简单，因为axios已经帮我们设定好了响应和请求的过程。...=> { })}); 因为es6的Promise语法，我这边返回了Promise对象，只是为了需要同步的时候可以使用Promise.all()方法，但是如果项目对同步的需求很少，那么我建议不要用回调函数返回

1.1K1 0

Ajax设置请求和接收响应、自己封装简易jQuery.Ajax、回调函数

Ajax设置请求和接收响应、自己封装简易jQuery.Ajax 这篇文章是承接前几篇博客的,是前几篇继续学习包括Ajax学习与理解和简化版自己实现jQuery等这篇文章只算是我的个人学习笔记,内容没有精心排版...B: 可以连我,你连吧 A:那我连你了说明B可以发送信息,A可以接受信息 3 自己封装jQuery.Ajax(简单原理) 所有代码在历史commit里(AjaxStudy---github) 3.1...,第二,如果没有参数就会出现类似于$.ajax("post",null,successFn,null)的情况,必须传有结构的参数(对象) 3.2什么是回调在上面的代码中,在ajax函数中传了一个successFN...只要满足这个条件就叫回调而已.他是一个函数,只不过在别的地方执行了所以看上去没有执行,实际上success了就执行传进去的这个函数 3.3封装方法二:传有结构的参数(对象) let myButton...如何实现这种封装?

2.6K5 0

jQuery封装的AJAX使用

jQuery 中的 Ajax jQuery为我们提供了更强大的Ajax封装 $.ajax({}) 可配置方式发起Ajax请求 $.get() 以GET方式发起Ajax请求 $.post() 以POST方式发起...使用SONP形式调用函数时，例如myurl?callback=?，JQuery将自动替换后一个“?”为正确的函数名，以执行回调函数。 text：返回纯文本字符串。...ajax事件函数如下： function(XMLHttpRequest, textStatus, errorThrown){ //通常情况下textStatus和errorThrown只有其中一个包含信息...dataFilter：要求为Function类型的参数，给Ajax返回的原始数据进行预处理的函数。提供data和type两个参数。...data是Ajax返回的原始数据，type是调用jQuery.ajax时提供的dataType参数。函数返回的值将由jQuery进一步处理。

2.9K6 0

前端基础-Ajax框架的封装

第6章 Ajax框架的封装如果一个页面中有十几个地方用到Ajax，那么我们需要写十几次open()、十几次send()、十几次获取xhr对象；代码重复相当多，而凡是有代码重复的地方，就有封装的可能...；创建新文件： ajax.js 6.1 餐前甜点之前我们为了方便使用，封装过使用指定 id 获取DOM对象及获取xhr对象；我们对之前的代码进行一次修改，使其更加优雅；定义一个自调用匿名函数...封装一个$函数，用于获取指定id的dom对象 (function(){ //封装$函数，获取指定 id 的DOM对象并返回给调用者 var $ = function(id){...报错原因：函数 $ 为局部变量；让 $ 局部变量全局化 (function(){ //封装$函数，获取指定 id 的DOM对象并返回给调用者 var $ = function(id)...get方法 ajax代码我们都会写，问题是：如何把代码放进匿名函数中并且外部可以调用？

1.1K1 0

JQuery 封装 Ajax Post 请求示例

>本文不涉及然和的介绍和其它的相关内容，只是博主简单的记录一下封装 POST 的代码：myAjax.js：const obj2str = (obj) => { // 如果没有传参, 为了添加随机因子...>在经过博主前几篇的文章过来之后，本文首先将介绍一下使用 jQuery 当中的 Ajax，说明，在看本文的 jquery 当中的 Ajax 需要导入 jQuery，官方文档地址：https://jquery.cuishifeng.cn...方法之后然后我们再来看看我们自己封装的 ajax 试着与 jQuery 当中的 ajax 的特点去试着发送请求看一下，导入我们自己的 ajax 方法：发送请求图片很显然是不可以的，那么我们这个时候就需要在完善一下我们自己封装...请求到服务器 ajax({ type: "get", url: "ajax-test.php",

2720 0

如何封装属于自己的ajax

如何封装属于自己的ajax？小编带你探探路。。...// 1准备一个电话准备ajax // 2 拨号建立建立连接 (跟服务器) // 3 发送 ajax 发送 // 4 等待通了说话监听状态 4 200...-300 304 function ajax(){ if(window.XMLHttpRequest){ //创建ajax ie7++ chorme firefox var oAjax=new XMLHttpRequest...oAjax.open('get',url,true); true 异步一起去执行 false 同步一个一个去执行 //发送 oAjax.send(); // oAjax.readyState 0 创建ajax

9197 0

使用原生 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...如果是异步请求，则需要设定完成相应之后的回调 // 这个是指readystate变化的时候触发的事件，如果请求成功，会返回200或者304，所以我们在这里面调用回调，当然你也可以在这里设置出错的时候调用的回调函数...然后则可以发送请求 // 如果是get，则数据以键值对的形式带在url中发送，如果是post，发送的data应该写在这里 xmlHttpRequest.send(DATA); 请求完成后悔自动调用之前设定的钩子函数

9304 0

一个兼容get请求和post请求的Ajax封装函数

今天在看某风网老师录制的 Ajax 函数封装的视频，get 和 post 请求都考虑到了，我在这里也做一下笔记。我把考虑到的都备注上了，以往可以给大家一点参考。...代码如下： JavaScript： function ajax(method, url, data, callback) { // method:请求方式,url:请求的地址,data:数据,callback...:回调 if (method == "post") { //如果是post请求 data = (function (obj) { // 自动执行的匿名函数 (function()...如果需要调用： function send() { var obj = {name: "Marry", age: "26"}; ajax("post...} }) } 声明：本文由w3h5原创，转载请注明出处：《一个兼容get请求和post请求的Ajax封装函数》 https://www.w3h5.com/post

1.6K1 0

使用Promise封装一个 Ajax

Promise的使用，包含 Promise#then，Promise#catch，Promise.resolve，Promise.reject； XHR 的使用，包含低版本浏览器实现的兼容操作等；函数的使用...，包含回调，传递，执行等； XMLHttpRequest 实现请求函数封装首先， XMLHttpRequest （XHR）对象可以与服务器交互。...在 Ajax 编程中 XMLHttpRequest 被大量使用。 ? XMLHttpRequest()该构造函数用于初始化一个 XMLHttpRequest 对象。...在调用下列任何其他方法之前，必须先调用该构造函数，或通过其他方式间接得到一个 XMLHttpRequest 对象。...使用此响应类型时，响应中的值仅在 progress 事件的处理程序中可用，并且只包含上一次响应 progress 事件以后收到的数据，而不是自请求发送以来收到的所有数据。

1.9K1 1

自己原生js封装的ajax请求

当时一些js基础知识也欠缺（虽然现在也不咋的），想要自己封装，难度也很大。今天也终于自己封装一个简易的ajax。...ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); ajax.send(typeof...= function () { if (ajax.readyState === 4) { if (ajax.status === 200 ||...ajax.status === 301) { options.success(responseType(options.dataType, ajax.responseText...= ajax; })(window); 其中param函数是参考：https://www.cnblogs.com/daysme/p/6651382.html 目的是发送post时，如果data参数是对象

4.1K3 0

JS示例12-ajax请求封装

一、知识要点 1、如何封装一个ajax请求 2、如何处理成功失败回调二、源码参考 image.png 封装ajax请求 ajax.js"> window.onload = function () { var oBtn = document.getElementById...var div1 = document.getElementById('div1'); oBtn.onclick = function () { ajax... function ajax

3.5K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭