封装ajax

原生js对Ajax封装 文章目录封装1. AJAX 请求封装2. jQuery 中的 AJAX2.1. $.ajax2.2. $.get2.3. $.post2.4. 全局事件处理案例:正在加载中2.5. jQuery其他ajax操作函数3.综合案例:子页面局部加载进度条插件:nprogressindex.htmlcart.htmlorders.html 封装 1. AJAX 请求封装 函数就可以理解为一个想要做的事情,函数体中约定了这件事情做的过程,直到调用时才开始工作。 将函数作为参数传递就像是将一个事情交给别人,这就是委托的 阅读详情

/**
* readyState 0=未初始化,未调用send()方法
* 1=读取中,已调用send(),正在发送请求
* 2=已读取,send方法执行完成,接收到全部响应内容
* 3=交互中,正在解析响应内容
* 4=完成,响应内容解析完成
*
*
* ajax过程
* 1. 浏览器
* 2. ajax对象
* 3. open() 初始化
* 4. send()
* 5. onreadystatechange
* 6. readystate == 4 && status == 200
*/

function ajax(method, url, data, callback, flag) {
    // 创建全平台兼容的XMLHTTPREQUEST对象
    function getXHR() {
        var xhr = null
        if (window.XMLHttpRequest) {
            xhr = new XMLHttpRequest()
        } else if(window.ActiveXObject){
            try {
                xhr = new ActiveXObject("Msxml2.XMLHTTP") // MSXML3
            } catch(e) {
                try {
                    xhr = new ActiveXObject("Microsoft.XMLHTTP") // 兼容IE6, IE5很老的api,虽然浏览器支持,功能不一定完善
                } catch(e) {
                    alert("您的浏览器不支持Ajax!")
                }
            }
        }
        return xhr
    }
    var xhr = getXHR()
    var method = method.toUpperCase() // 转换成大写
    // 避免加载太快,没监听到事件变换,所以放在这个位置
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4) {
            if (xhr.status === 200) {
                callback(xhr.responseText)
            }
        }
    }
    xhr.onerror = function() {
        console.log("error")
    }
    if (method === 'GET') {
        var oDate = new Date(),
            timer = oDate.getTime()
        xhr.open(method, url+'?'+data+'&timer='+timer, flag)
        xhr.send()
    } else if(method === 'POST') {
        xhr.open(method, url, flag)
        xhr.setRequestHeader(''Content-Type', 'application/x-www-form-urlencoded'')
        xhr.send(data)
    }
}
基于ProXmoX VE的虚拟化家庭服务器(篇一)—ProXmoX VE 安装及基础配置 ProxmoxVE是一款套开源的虚拟化管理软件,用户可通过网页的方式来管理服务器上使用kvm以及lxc技术运行的虚拟机。同时提供了一些先进功能的支持,如集群、HA等。PVE虽然是开源,却是由一个商业公司在运营、更新以及维护。... 阅读详情

相关推荐

【PyTorch版本兼容性指南】如何在不同版本中正确使用torch.nn.attention

本文详细解析了PyTorch版本兼容性问题,特别是torch.nn.attention模块在不同版本中的使用差异。针对常见的ModuleNotFoundError错误,提供了三种实用解决方案:升级PyTorch版本、使用自定义实现和源码移植方案,并分享了最佳实践建议,帮助开发者有效避免兼容性问题。

weixin_29084231的博客 472

非常好的ajax效果

非常好的ajax效果http://www.miniajax.com/ 

Gaston 986

基于STM32F1XX 、HAL库的LTR-303ALS-01 环境光传感器驱动应用C语言程序设计

printf("制造商ID: 0x%02X\r\n", LTR303_ReadManufacID());printf("器件ID: 0x%02X\r\n", LTR303_ReadPartID());LTR-303ALS-01是一款数字环境光传感器(ALS),由Lite-On公司生产。printf("LTR-303ALS初始化失败!printf("LTR-303ALS初始化成功!printf("数据无效\r\n");* @param mode: 0-待机, 1-激活。

PP_Cottage的博客 1033

更新Xcode9后phoneGap中的ajax操作

Xcode9默认要求App中的网络请求都通过https方式执行。所以phoneGap中的ajax访问如果不用https的方式就会得不到结果。 在jQuery的ajax访问中,error函数的XmlHttpRequest对象返回码是404,textStatus的到“error”结果。这需要在Xcode中为工程配置一下。在工程的plist中,添加App Transport Security Setti

临碣秘藏 877

学Simulink——基于Simulink的输入-输出线性化精确转矩控制

本文详细介绍了基于Simulink的永磁同步电机(PMSM)输入-输出线性化(IOL)精确转矩控制方法。针对传统解耦控制在非线性转矩特性下的局限性,提出通过精确反馈线性化实现转矩指令与实际转矩的严格线性关系。文章系统阐述了IOL原理、PMSM控制器推导过程,并提供了完整的Simulink建模步骤,包括电机模型搭建、IOL控制器实现和闭环系统构建。通过仿真对比验证了IOL方法在转矩跟踪精度、动态响应和参数鲁棒性方面的显著优势,最后讨论了工程实现要点和扩展应用方向。该方法为高性能伺服系统开发提供了有效解决方案。

amy_mhd的博客 61

​​手把手教你学PCIE--ATU 的 Bar 匹配模式与地址匹配模式详解​

摘要: ATU(地址转换单元)提供两种地址匹配模式:Bar匹配模式基于PCI设备的BAR寄存器自动映射虚拟地址(只需配置物理基址),适用于标准PCI设备DMA;地址匹配模式需显式配置虚拟与物理地址范围,适合自定义映射场景。核心区别在于匹配依据(BAR自动推导vs人工定义),Bar模式简化配置,地址模式更灵活。

MHD0815的博客 380

Xcode9中开发phoneGap应用ajax异常的解决办法

Xcode9默认要求App中的网络请求都通过https方式执行。所以phoneGap中的ajax访问如果不用https的方式就会得不到结果。 在jQuery的ajax访问中,error函数的XmlHttpRequest对象返回码是404,textStatus的到“error”结果。这需要在Xcode中为工程配置一下。在工程的plist中,添加NSAppTransportSecurity选项,类型为

临碣秘藏 1170

YOLO26 网络结构逐模块解析:Backbone/Neck/Head

本文解析了YOLO26目标检测网络的架构设计,重点介绍其在Backbone、Neck和Head三个核心组件的创新优化。Backbone采用改进的CSP模块与轻量级注意力机制,提升特征提取效率;Neck使用改进的BiFPN结构实现高效多尺度特征融合;Head采用完全解耦设计简化回归流程。文章详细分析了各模块的技术演进、实现细节和设计思想,通过流程图和代码示例展示了YOLO26的整体架构和关键组件实现。该研究对模型优化、定制开发和硬件部署具有重要指导意义。

一键难忘的博客 1248

ajax方法封装

// ajax get 五部曲 function ajax_get(url,data){ var ajax=new XMLHttpRequest(); //url方法,如果发送数据段格式为xxx。php?name=jack&age=18,需要拼接 if(data){ url+='?'; url+=data; }...

zuo_zuo_blog的博客 1万+

2024年12月中国电子学会青少年软件编程(Python)等级考试试卷(六级)答案 + 解析

2024年12月中国电子学会青少年软件编程(Python)等级考试试卷(六级)答案 + 解析

伶俐角少儿编程 731

白话讲解帕累托前沿点(Pareto Frontier)基础知识与实例解析

排除所有“劣解”,缩小决策范围;量化目标间的“权衡关系”(如“每增加1千元成本,续航提升多少小时”);支持不同场景下的个性化选择,平衡冲突目标。无论是手机选购、汽车设计,还是城市规划,帕累托前沿都是从“混乱的多目标”到“清晰的权衡”的关键桥梁,是现代决策科学中不可或缺的工具。通过数学建模,工程很多问题都可以建模成帕累托前沿求解问题,通过线性规划CPLEX、Gurobi 等优化工具,可以方便进行求解。

2138

ajax请求封装,封装的ajax请求

在做登录注册这类提交表单数据时,我们经常需要局部刷新网页来验证用户输入的信息,这就需要用到ajax请求,我们通常需要获取表单中的数据,发起ajax请求,通过服务程序,与数据库的数据进行比对,判断信息的正确与否。这儿也将ajax请求进行了封装,当我们在项目中需要多次ajax请求时,就可以用封装的函数了,不用每次都写ajax请求,提高了代码的利用率和工作效率。当然封装得不一定很完美,网上也有很多优秀的...

weixin_33676046的博客 1761

FPGA实现串口升级及MultiBoot(九)BPI FLASH相关实例演示

与SPI相关知识并没有什么太多区别(别杠硬件或者架构上),相关知识点都在上面指出,大家有什么其他需要注意点,欢迎留言讨论。关于“四样错误”就不演示了,没什么太大区别,下一讲我们开始串口升级。PS:为了扩展ICAPE2原语的使用,在原来的基础上增加了几个常用FPGA ID,并在触发启动时候增加了可选电平触发或上升/下降沿触发(例化IP时选择),新版本号V1.1。

OpenFPGA的博客 1446

Ajax的封装

前端封装Ajax

weixin_51445423的博客 7618

大中型超市收银系统(可直接运行)

光步前台收银系统系统功能:商品销售、商品退货、挂单、收银员权限、会员销售、单品取消、整单取消、商品查询、脱机销售、脱机数据上传,基本资料下载,开钱箱、小票打印、收款结算,支持多币种付款方式(现金、储值卡、礼券、微信等),支持多种促销。运行环境:.net 4.0登陆信息用户名:1001 密码:123456内置商品信息,商品编码可输入00001000 - 00010000,测试效果相关功能键F5 结算 F9挂单 F11商品查询 F8退货 Insert单品取消 Del整单取消 F12开钱箱F2 会员 Ctrl+Z退出系统 Home 锁屏 相关源码待公开

WINCC7.3破解文件

WINCC7.3硬件够破解文件,有需要的下载!WINCC7.3硬件够破解文件,有需要的下载!

Ajax的封装及使用

ajax 全名 async javascript and XML(异步JavaScript和XML) 目录 封装好后ajax的具体使用 Ajax的具体封装步骤及文件原版 然后我们写一个index.js文件,写一些我们要用到方法 工具模块utils 默认参数模块defaults 常量模块 我们在日常的使用中可能都需要写这些东西 const xhr = new XMLHttpRequest(); xhr.onreadystatechange = () =>...

qq_55791710的博客 2369

win10 跳过U8环境检测的IE WebControls.rar

win10 安装u8的时候 提示IE WebControls 不通过,这个工具可以欺骗u8的检查。 跳过U8环境检测的IE WebControls。提示导入失败后,重新检测通过。

ajax的封装

封装ajax的方法

太阳与星辰的博客 587

假人有限元模型

假人模型,车辆碰撞假人有限元模型,适合做乘员安全的研究者利用

封装Ajax函数

Ajax 说道ajax到底什么是ajax? ajax是一种创建交互网页应用的一门技术。 ajax的应用场景有:(地图)实时更新,表单验证等等.... 所以要再次结合promise对Ajax进行封装以便于项目开发 ajax请求函数模块 返回值: promise对象(异步返回的数据是: response.data) */ import axios from 'axios' export default function ajax(url, data = {}, type = 'GET') { r.

往事不回头,余生不将就 1万+

jquery Ajax 全局调用封装

有一种情况:全站都要用异步方式来调用 数据,提交数据,那么你每次操作 都会要$.ajax({.....})写重复的方法 和代码,冗余太大, 也浪费时间,虽说你有代码自动提示补全,但真的不优雅,身为前端极客,是不能允许的!【嘿嘿!虽说我现在基本不用jquery了 ,不过异步概念 是永远要用的,就帮助下新人】jQuery Ajax通用js封装第一步:引入jQuery库第二步:开发Ajax封装类,已测试

小北哥哥和北妈 2万+

ajax封装

封装ajax html代码 : <button id='get1'>get</button> <button id='post1'>post</button> js代码 : <script> function $ajax({method="get",url,data,success,error,asnyc=true}){ xhr = null //存放ajax对象用的变量 try{ xhr = new XMLHttpReques

ZZZ___jh的博客 373

咋封装ajax,ajax怎么实现网络请求的封装

这次给大家带来ajax怎么实现网络请求的封装,ajax实现网络请求封装的注意事项有哪些,下面就是实战案例,一起来看一下。实例代码:// 封装的ajax网络请求函数// obj 是一个对象function AJAX(obj){//跨域请求if (obj.dataType == "jsonp") {//在这里 callback 必须是全局变量 保证函数消失的时候 这个变量不可以被销毁//处理一下函数名...

weixin_39804603的博客 681

ajax封装 使用,自己动手封装AJAX

一、手写AJAX首先我们先用原生JS手写一个AJAX:let xhr = new XMLHttpRequest()xhr.open('POST', '/xxx')xhr.onreadystatechange = (e) => {if(xhr.readyState === 4){if(xhr.status >= 200 && xhr.status < 300){co...

weixin_32561279的博客 670

使用promise封装ajax请求

首先作为前端开发人员,大家都应该使用过Ajax发送请求,目前市面上流行的发送Ajax请求的方式为以下三种: Jquery的$.ajax() 尤雨溪推荐的axios es6新出的fetch方法 这三种方法的区别详见文章ajax三种方式的区别,这里不再详细解释。 本篇文章主要讲工作中是如何使用ajax请求,也就是让ajax结合promise使用。 1.为什么要包装ajax? 小明同学说:“直接发送ajax请求不就得了,干嘛那么麻烦。”于是小明很顺畅的写下以下代码: //以$.ajax发送...

zjjcchina的博客 5479

【Ajax】Ts封装ajax

用TypeScript简单的封装了一下ajax,类似Jqurey 代码如下: let $ = { createXHR: function (): XMLHttpRequest { if (window.XMLHttpRequest) { // 若浏览器支持,则创建XMLHttpRequest对象 return new XMLHttpRequest(); } else { // 若不支持,则创建ActiveXobject对象 return

Waker的博客 980

怎样封装一个简单的ajax请求,自己动手封装一个AJAX函数

简单封装了一个ajax请求,做一下统一处理,少写重复代码,只是一个初步的代码,没有经过优化。 $.extend({ myAjax: function (option, rollBack) { var that = this; var myOption = { type: "post", timeout: 10000, success: function (data) {

zhongmaizhouxi的博客 719

ajax封装,promise封装ajax,axios封装

前后端数据交互,前端操作

flhhly的博客 693

ajax 封装

调用 ajax({ method:"get", url:"http://localhost:3000/first", params:{ name:"xx", age:18 } }).then(res=>{ console.log(res) }) 封装 /** * ajax封装 * @paraams options 参数对象 * method 请求参数 默认get * url 请求路径 * asyncs

weixin_42448623的博客 147
上一篇: vue项目中引入svg的问题
下一篇: HTTP知识总结
ccxCode
博客等级 码龄8年 1粉丝 31原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值