js的封装ajax - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

自己原生js封装的ajax请求

前言这几天在恶(xue)补(xi)node.js，其中老师讲到了ajax，以前学习js都是东一点、西一点。不系统，当然，原因也很多。...当时一些js基础知识也欠缺（虽然现在也不咋的），想要自己封装，难度也很大。今天也终于自己封装一个简易的ajax。...= function () { if (ajax.readyState === 4) { if (ajax.status === 200 ||...viewport" content="width=device-width, initial-scale=1.0"> Title ajax.js...也可以是对象{} success: function (res) { console.log(res); }, dataType: 'json' }) 压缩文件下载：ajax.min.js

5K3 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

4.2K1 0

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

是的

没有找到

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

老铁们，还记得如何对原生ajax进行封装吗？注释较少，看看是否还能看的明白？...封装如下： function ajax(obj){ //指定提交方式的默认值 obj.type = obj.type || "get"; //设置是否异步，默认为true(异步)...obj.async = obj.async || true; //设置数据的默认值 obj.data = obj.data || null; var params=_params...new Date()).getTime()+Math.random()); if(obj.type.toLowerCase()=="get" && params.length>0){//将转换后的data...encodeURIComponent(i) + '=' + encodeURIComponent(data[i])); } return arr.join("&"); } } 调用如下： ajax

3.1K2 0

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

一、Ajax的实现主要分为四部分： 1、创建Ajax对象 1 // 创建ajax对象 2 var xhr = null; 3 if(window.XMLHttpRequest){ 4 xhr =...1 // 处理返回数据 2 /* 3 ** 每当readyState改变时，就会触发onreadystatechange事件 4 ** readyState属性存储有XMLHttpRequest的状态信息...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

ajax的再次封装！

js的动态加载、缓存、更新以及复用系列有点卡文，放心会继续的。先来点更基础的，为js的加载做点铺垫。　　jQuery的ajax本来就很方便了，为啥还要在进一步的封装呢？...这个首先要看项目的具体需求了，如果觉得不需要，那么完全可以直接用jQuery提供的各种ajax的方法。如果像我似地，感觉不太方便的话，那么完全可以按照自己的想法和需求来再次封装一下。...//对ajax的封装 Nature.Ajax = function (ajax) { //最基础的一层封装 //定义默认值 var defaultInfo...，然后是根据URL的封装，其实就是避免在代码里到处写URL的问题。...一般提到跨域，想到的都是JSONP，但是JSONP是伪装成来实现的跨域，由于js并不支持post，所以导致无法实现post的跨域提交。现在HTML5.0解决了这个问题，就是cors。

1.4K8 0

简单的Ajax封装

; **error: 请求失败后的回调函数; */ function ajax(opts){ //一、设置默认参数 defaults = { url...+ defaults.data + defaults.cache; } //四、开始编写ajax //1、创建ajax对象 var oXhr = window.XMLHttpRequest...缓存只要是URL相同的GET请求，浏览器会使用缓存(当然还要看服务器的Cache-Control/Expires/Last-Modified/ETag头的设置)。...不缓存的办法： 1、在服务端加header("Cache-Control: no-cache, must-revalidate");(如php中) 2、在ajax发送请求前加上 anyAjaxObj.setRequestHeader...4、在 Ajax 的 URL 参数后加上"?

9949 0

简单的Ajax封装

; **error: 请求失败后的回调函数; */ function ajax(opts){ //一、设置默认参数 defaults = { url...+ defaults.data + defaults.cache; } //四、开始编写ajax //1、创建ajax对象 var oXhr = window.XMLHttpRequest...缓存只要是URL相同的GET请求，浏览器会使用缓存(当然还要看服务器的Cache-Control/Expires/Last-Modified/ETag头的设置)。...不缓存的办法： 1、在服务端加header("Cache-Control: no-cache, must-revalidate");(如php中) 2、在ajax发送请求前加上 anyAjaxObj.setRequestHeader...、在 Ajax 的 URL 参数后加上"?

1.1K6 0

简单的Ajax封装

; **error: 请求失败后的回调函数; */ function ajax(opts){ //一、设置默认参数 defaults = { url...+ defaults.data + defaults.cache; } //四、开始编写ajax //1、创建ajax对象 var oXhr = window.XMLHttpRequest...缓存只要是URL相同的GET请求，浏览器会使用缓存(当然还要看服务器的Cache-Control/Expires/Last-Modified/ETag头的设置)。...不缓存的办法： 1、在服务端加header("Cache-Control: no-cache, must-revalidate");(如php中) 2、在ajax发送请求前加上 anyAjaxObj.setRequestHeader...、在 Ajax 的 URL 参数后加上"?

7232 0

JS示例11-ajax对象（未封装请求）

一、知识要点 1、ajax对象（XMLHttpRequest和ActiveXObject） 2、如何兼容IE6浏览器二、源码参考未封装请求 ...= document.getElementById('div1'); oBtn.onclick = function () { //1.创建Ajax

2.8K1 0

封装ajax函数

/* *封装ajax函数 * @param options * options = { * type : "get|post", // 请求方式，默认为 get * url...: "", // 请求服务器资源url * data : {username:"xxx", password:""}, // 向服务器传递的数据 * dataType :..."text|json", // 预期从服务器返回数据的格式 * success : function(responseData){}, // 请求成功时执行的函数 * error...: function(err){} // 请求失败时执行的函数 * } */ function ajax(options){ options = options || {}; var method

1.3K3 0

简单的封装ajax函数

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

1.2K7 0

jQuery封装的AJAX使用

jQuery 中的 Ajax jQuery为我们提供了更强大的Ajax封装 $.ajax({}) 可配置方式发起Ajax请求 $.get() 以GET方式发起Ajax请求 $.post() 以POST方式发起...介绍 http://www.w3school.com.cn/jquery/jquery_ref_ajax.asp jQuery 中的 Ajax url: 要求为String类型的参数，（默认为当前页地址...dataFilter：要求为Function类型的参数，给Ajax返回的原始数据进行预处理的函数。提供data和type两个参数。...data是Ajax返回的原始数据，type是调用jQuery.ajax时提供的dataType参数。函数返回的值将由jQuery进一步处理。...设置为false将不会触发全局ajax事件，ajaxStart或ajaxStop可用于控制各种ajax事件。 ifModified：要求为Boolean类型的参数，默认为false。

4.1K6 0

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

前言抛出一个问题，其实所谓的熟悉原生JS，怎样的程度才是熟悉呢？用原生Js封装了一个Ajax插件，引入一般的项目，传传数据，感觉挺可行的。。。...简单说说思路，有兴趣的可以自己跟着写一个，顺便熟悉一下原生的Ajax......Ajax核心，创建XHR对象 Ajax技术的核心是XMLHttpRequest对象（简称XHR），IE5是第一款引入XHR对象的浏览器，而IE5中的XHR对象是通过MSXML库中的一个ActiveX对象实现的...所谓同源是指协议、域名和端口都一致的情况。浏览器会阻止ajax请求非同源的内容。 JSONP(JSON with Padding) 是一种跨域请求方式。...主要原理是利用了script 标签可以跨域请求的特点，由其 src 属性发送请求到服务器，服务器返回 JS 代码，网页端接受响应，然后就直接执行了，这和通过 script 标签引用外部文件的原理是一样的

3.8K2 1

前端基础-Ajax框架的封装

第6章 Ajax框架的封装如果一个页面中有十几个地方用到Ajax，那么我们需要写十几次open()、十几次send()、十几次获取xhr对象；代码重复相当多，而凡是有代码重复的地方，就有封装的可能...；创建新文件： ajax.js 6.1 餐前甜点之前我们为了方便使用，封装过使用指定 id 获取DOM对象及获取xhr对象；我们对之前的代码进行一次修改，使其更加优雅；定义一个自调用匿名函数...封装一个$函数，用于获取指定id的dom对象 (function(){ //封装$函数，获取指定 id 的DOM对象并返回给调用者 var $ = function(id){...$ 也可以被当作对象，我们就可以将ajax函数赋值给 $ ； (function(){ //封装$函数，获取指定 id 的DOM对象并返回给调用者 var $ = function(id...POST 方法到 ajax.js

1.4K1 0

前端ajax封装教程

AJAX（Asynchronous JavaScript and XML）是前端与后端进行异步通信的核心技术。封装AJAX可以提高代码复用性、统一处理错误和优化请求流程。...下面是一个实用的AJAX封装教程，包含完整实现和使用示例。...的AJAX封装，支持GET、POST等常用方法：三、使用方法1..../ajax.js';// 配置基础URLajax.setDefaults({ baseURL: 'https://api.example.com', headers: { 'Authorization...发送请求使用封装好的方法发送各种类型的请求：// GET请求async function getUserInfo(userId) { try { const data = await ajax.get

2680 0

封装ajax、axios请求

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

1.3K1 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

如何封装属于自己的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.status success && success(oAjax.responseText); }else{ fnFail && fnFail(oAjax.status); } } } } 大家如果有感兴趣的方向文章...，可以直接给我留言，我会去写你们感兴趣的文章。

1.2K7 0

AJax(XHR+Get和Post+AJax的封装)

@TOC目标:㈠XMLHttpRequest㈡GET 与 POST㈢封装 Ajax一、 XMLHttpRequestAjax 技术核心是 XMLHttpRequest 对象(简称 XHR), Ajax指向服务器请求额外的数据而无须卸载页面...这个属性有五个值：二、 GET 与 POST在提供服务器请求的过程中，有两种方式，分别是： GET 和 POST。在 Ajax 使用的过程中， GET 的使用频率要比 POST 高。...POST 请求三、封装 Ajax因为 Ajax 使用起来比较麻烦，主要就是参数问题，比如到底使用 GET 还是POST；我们需要封装一个 Ajax 函数，来方便我们调用。...封装var obj = {method:"GET",url:"js/data.json?...2.个人练习前端技术使用Bootstrap、JQuery、thymeleaf3.JavaScript入门及基础知识介绍4.AJax(XHR+Get和Post+AJax的封装)5.SpringBoot项目的

4761 0

原生JS的Ajax

转自：https://www.cnblogs.com/yufann/p/JS-Ajax.html 1.创建一个Ajax对象非IE6浏览器：var obj = new XMLHttpReuqest...Date().getTime(),true); 3.发送请求 obj.send(); 4.接收返回值请求状态监控:onreadystatechange事件：当自己的Ajax...---返回值responseText:从服务器返回的文本：obj.responseText（返回的为字符串） GET方式 function getAjax(){ var obj

12.8K2 0

点击加载更多

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭