一个事件中可以写多个ajax吗,存在多个 AJAX 任务

最新推荐文章于 2021-08-06 13:11:34 发布
最新推荐文章于 2021-08-06 13:11:34 发布
阅读量580 收藏
点赞数
文章标签： 一个事件中可以写多个ajax吗
本文详细介绍了如何使用JavaScript实现Ajax异步请求，包括创建标准的Ajax函数，以及如何执行多个Ajax任务。通过示例代码，展示了如何通过XMLHttpRequest对象发送GET请求，并处理服务器响应。此外，还探讨了Ajax在前端开发中的应用和重要性，以及可能出现的错误处理。
摘要由CSDN通过智能技术生成

实现的效果：

这两个Ajax任务可同时实现，也可单独实现。

fdaaaaffb74d54b4235190bb168b92bd.png

bfea7e4d13b23de8437efc1a78155d33.png

d130247b37a22e06309907b1a890b776.png

标准的函数：

var xmlhttp;

function loadXMLDoc(url,ufunc){

if(window.XMLHttpRequest){

xmlhttp = new XMLHttpRequest;

}

else {

xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

}

xmlhttp.open("get",url,true);

xmlhttp.send();

xmlhttp.onreadystatechange = ufunc;

}

多个Ajax任务：

function myFunction(){

loadXMLDoc("../文档/2.txt",function(){

if(xmlhttp.readyState == 4 && xmlhttp.status == 200){

document.getElementById("myDiv").innerHTML = '

' + xmlhttp.responseText + '

';

}

});

}

function func(){

loadXMLDoc("../文档/1.txt",function(){

if(xmlhttp.readyState == 4 && xmlhttp.status == 200){

document.getElementById("app").innerHTML = '

' + xmlhttp.responseText + '

';

}

});

}

在标准函数中：

1.两个参数：url,cfunc，第一个参数表示请求服务器的文档，第二个参数表示服务器响应时onreadystatechange事件需调用的函数。

2.创建XMLHttpRequest对象。

3.向服务器发送请求，xmlhttp.open("GET",url,true);xmlhttp.send();

4.增加onreadystatechange事件，xmlhttp.onreadystatechange=cfunc;

如此，凡是执行Ajax任务的函数都可以使用该标准函数，只需要自己填写标准函数中的两个参数即可。

多个Ajax任务：

1.使用标准函数

2.编写标准函数中的两个参数，这两个参数均可自行改变，即请求服务器的文档，服务器响应实现的方法都可不同。

完整代码：

var xmlhttp;

function loadXMLDoc(url,ufunc){

if(window.XMLHttpRequest){

xmlhttp = new XMLHttpRequest;

}

else {

xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

}

xmlhttp.open("get",url,true);

xmlhttp.send();

xmlhttp.onreadystatechange = ufunc;

}

function myFunction(){

loadXMLDoc("../文档/2.txt",function(){

if(xmlhttp.readyState == 4 && xmlhttp.status == 200){

document.getElementById("myDiv").innerHTML = '

' + xmlhttp.responseText + '

';

}

});

}

function func(){

loadXMLDoc("../文档/1.txt",function(){

if(xmlhttp.readyState == 4 && xmlhttp.status == 200){

document.getElementById("app").innerHTML = '

' + xmlhttp.responseText + '

';

}

});

}

一个Ajax

另一个Ajax

一个Ajax

另一个Ajax

欢迎留言讨论。

jQuery之ajax实现篇

jQuery的ajax方法非常好用,这么好的东西,你想拥有一个属于自己的ajax么?接下来,我们来自己做一个简单的ajax吧. 实现功能 由于jq中的ajax方法是用了内置的deferred模块,是P ...

Ajax及跨域

概念 Ajax Ajax,Asynchronous JavaScript and XML,字面意思:异步的 JavaScript 和 XML,是指一种创建交互式网页应用的网页开发技术. 用于异步地去获 ...

一个粗心的Bug，JSON格式不规范导致AJAX错误

一.事件回放  今天工作时碰到了一个奇怪的问题,这个问题很早很早以前也碰到过,不过没想到过这么久了竟然又栽在这里. 当时正在联调一个项目,由于后端没有提供数据接口,于是我直接本地建立了一个 json ...

ABP文档 - Javascript Api - AJAX

本节内容: AJAX操作相关问题 ABP的方式 AJAX 返回信息 处理错误 HTTP 状态码 WrapResult和DontWrapResult特性 Asp.net Mvc 控制器 Asp.net ...

ajax异步请求

做前端开发的朋友对于ajax异步更新一定印象深刻,作为刚入坑的小白,今天就和大家一起聊聊关于ajax异步请求的那点事.既然是ajax就少不了jQuery的知识,推荐大家访问www.w3school.c ...

调用AJAX做登陆和注册

先建立一个页面来检测一下我们建立的用户名能不能用,看一下有没有已经存在的用户名吗 可以通过ajax提示一下 $("#uid").blur(function(){ //取用户名 va ...

Ajax 概念 分析 举例

Ajax是结合了访问数据库,数据访问,Jquery 可以做页面局部刷新或者说是页面不刷新,我可以让页面不刷新,仅仅是数据的刷新,没有频繁的刷页面,是现在比较常用的一种方式做页面那么它是怎么实现页面无刷 ...

ajax

常见的HTTP状态码状态码:200 请求成功.一般用于GET和POST方法 OK301 资源移动.所请求资源移动到新的URL,浏览器自动跳转到新的URL Moved Permanently304 未修 ...

学习笔记之MVC级联及Ajax操作

由于刚转型到MVC,MVC的架构模式很多不是很清楚,比如今天就想做个级联的操作,因为之前的ASP.NET的方式是通过:控件-->添加事件-->后台编写级联事件进行触发,但是这个MVC就不同 ...

javascript表单的Ajax 提交插件的使用

Ajax 提交插件 form.js 表单的下载地址:官方网站:http://malsup.com/jquery/form/ form.js 插件有两个核心方法:ajaxForm()和ajaxSubmi ...

随机推荐

mongodb之使用explain和hint性能分析和优化

当你第一眼看到explain和hint的时候,第一个反应就是mysql中所谓的这两个关键词,确实可以看出,这个就是在mysql中借鉴过来的,既然是借鉴 过来的,我想大家都知道这两个关键字的用处,话不多 ...

利用tween.js算法生成缓动效果

在讲tween类之前,不得不提的是贝塞尔曲线了.首先,贝塞尔曲线是指依据四个位置任意的点坐标绘制出的一条光滑曲线.它在作图工具或动画中中运用得比较多,例如PS中的钢笔工具,firework中的画笔等等 ...

Java Web之Filter

Filter被称为过滤器或者拦截器,基本功能就是对调用servler过程的拦截,在servlet进行响应和处理前后实现一些特殊功能.其实,Filter过滤器就是一个实现了javax.servlet.F ...

【转载】关于Linux Shell 特殊字符

一.通配符     1.一般通配符       ① * (星号):匹配字符的0次或多次出现       举例:f*可以匹配f.fa.fls.a     注意:“.”和“/”必须显示匹配         ...

linux VM复制多个IP配置出错的处理

device eth0 does not seem to be present, delaying initialization (2012-09-13 21:16:38) 转载▼ 标签: 杂谈   ...

insert---插入记录

insert into table_name (column1,column2,.......) values(value1,value2,......); 例: insert into userin ...

基于Hadoop2.6.5(HA)的Hive1.2.1的MySQL方式配置

1.Hive配置MySQL Hive只是一个工具,无需配置多台机器,我在CentOS7One机器上配置Hive /usr/local/hive/apache-hive-1.2.1-bin/conf c ...

Linux中Redis的安装

一.下载redis redis官网地址:http://www.redis.io/ 下载地址:http://download.redis.io/releases/ redis中文文档地址:http:// ...

java简单正则验证手机号

import java.util.regex.Matcher; import java.util.regex.Pattern; /** * @Title:Tadesfza * @Description ...

[转]MVP+WCF+三层结构搭建项目框架

最近,我一直在重构之前做的一个项目,在这个过程中感慨万千.原先的项目是一个运用了WCF的C/S系统,在客户端运用了MVC模式,但MVC的View.Model耦合以及WCF端分布式欠佳等问题让我有了重构 ...

胖葫芦
关注
关于一个function内执行2个ajax
just_lover的博客
11-13 3367
$(function(){ $.ajax( type:post, url:url1, success:function(){ }, error:function(){ } ); $.ajax( type:post, url:url2, ...
一个页面里面两个ajax,一个页面多个ajax请求
weixin_28811345的博客
08-05 1323
你是在一个页面多个子页面，然后每个子页面里面使用了一个回调函数吧？wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww由于include加载页面时先后难分，而且这样XMLHttpRequest对象就只剩一个了...
多个ajax同时进行
03-26
ajax,多个ajax同时进行
一个js可以写两个ajax吗,用原生JS写一个AJAX
weixin_34869021的博客
08-06 406
1.什么是AJAXAJAX(Asynchronous Javascript And XML)：异步的JS和XML。2.AJAX三部曲使用XMLHttpRequest发请求服务器返回XML格式的字符串JS解析XML，并更新布局页面3.面试必问： 请用原生JS写一个AJAXlet request = new XMLHttpRequest() //创建一个XMLHttpRequest对象request....
一个方法中多个ajax请求,javascript – 管理多个ajax请求的正确方法是什么？
weixin_35323111的博客
08-06 317
我们都在AJAX教程中看到了一些发送一些数据的例子.他们都(或多或少)看起来像：var http = createRequestObject(); // shared between printResult() and doAjax()function createRequestObject() { /* if FF/Safari/Chrome/IE ... */ ... }function pr...
同一个页面多个div，ajax调用
Sky
11-24 763
        最近在做项目的时候发现两个问题，第一个问题是在主页面有多个div，在div里面有input元素的onclick事件，在第一次打开div的时候通过onclick调用ajax可以被执行，当关掉打开的div重新再打开的时候onclick事件不生效。第二个问题是两个div调用ajax时会相互影响，当打开第一个div并关闭的时候，第二个div的input元素的onclick事件不被执行了。...
vue一个页面发出多个异步请求_详解Ajax请求（四）——多个异步请求的执行顺序...
weixin_39822629的博客
12-20 2326
首先提出一个问题：点击页面上一个按钮发送两个ajax请求，其中一个请求会不会等待另一个请求执行完毕之后再执行？答案是：不会，这两个异步请求会同时发送，至于执行的快与慢，要看响应的数据量的大小及后台逻辑的复杂程度。从异步请求的执行原理来看，我们知道当一个异步请求发送时，浏览器不会处于锁死、等待的状态，从一个异步请求发送到获取响应结果的期间，浏览器还可以进行其它的操作。这就意味着多个异步请求的执行时并...
html同时执行多个ajax,JS 与 jQuery 等待多个异步请求结束后再统一执行方法
weixin_39815286的博客
06-18 1407
1.js用Promise方法// 封装地形 GeoJSON 数据接口// 将每个数据接口封装为一个返回 Promise 的函数function getArea () {return new Promise((resolve, reject) => {fetch('./resources/china.json').then(resp =>resp.json().then(china =&...
ajax同时调用两个方法,ajax请求多个url解决办法
weixin_31156651的博客
08-05 2065
最近在做调度系统，转接prometheus请求时遇到的问题，需要同时请求若干个url，并对其response处理后才能展示。觉得很有意思，就记录一下。一、ajax嵌套ajax嵌套ajax。跟疯狂for循环一样，这种方式只能串行发起ajax请求。弊端也很明显，随着ajax请求次数增加，嵌套层数也逐渐加深，代码很难维护。而且，效率也不高。function getData(){$.ajax({url: ...
ajax是宏任务还是微任务,宏任务和微任务的一个小事
weixin_39695954的博客
08-06 1527
本文首发于 vivo互联网技术 微信公众号链接：作者：Ivan本文根据 JavaScript 规范入手，阐述了JS执行过程在考虑时效性和效率权衡中的演变，并通过从JS代码运行的基础机制事件队列入手，分析了JS不同任务类型(宏任务、微任务)的差别，通过这些差别给出了详细分析不同任务嵌套的复杂 JS 代码执行的分析流程。一、事件队列与回调在使用JavaScript编程时，需要用到大量的回调编程。回调，...
多个Ajax实例案例
12-11
<script type="text/javascript"> $(document).ready(function() { $('#title').change(function() { $.ajax({ type: "GET", url:"check_title.php", dataType: "json", data:"title=" + $('#title').val(), success: function(data) { var str=""; for(op1 in data){ str += "<li><a target=blank href='/info/"+data[op1].cid+"/"+data[op1].id+".html'>"+decodeURIComponent(data[op1].title)+"</a></li>"; } str2 = "<ul>"+str+"</ul>"; $("#sampletitle").html(str2); } }); //close $.ajax( }); //close change( }); //close $( </script>
同一页面多个ajax请求后台堵塞问题
左直拳的马桶_日用桶
09-21 6359
有个小伙子告诉我，一个页面上同时开启多个ajax，向后台请求数据，会被堵塞。 “因为是同一个会话。但如果在控制器上加上这个特性就可以了”，小伙子说。 //session只读，避免同一会话中session锁导致请求阻塞 [SessionState(System.Web.SessionState.SessionStateBehavior.ReadOnly)] public cl...
JS中如何处理多个ajax并发请求？
热门推荐
work hard
03-09 4万+
js中的多并发处理。 通常 为了减少页面加载时间，先把核心内容显示处理，页面加载完成后再发送ajax请求获取其他数据 这时就可能产生多个ajax请求，为了用户体验，最好是发送并行请求，这就产生了并发问题，应该如何处理？ （1）并行改串行 如果业务逻辑和用户体验允许的情况下，可以改为串行，处理起来最简单 function async1(){ //do sth... as
前端js采坑,一个函数中同时有多个ajax()异步请求
Elliot_Ji的博客
04-23 4928
在近期的项目中: 问题:多个异步请求执行时,有两个请求的路径是相同的,导致结果只执行当中的一个异步请求? add: function(){ vm.showList = false; vm.title = “新增”; vm.role = {deptName:null, deptId:null}; vm.getDataTree(); vm.getMenuTree(null); vm.getDept()...
一个按钮提交两个Ajax请求
duxikuan的专栏
01-29 4659
var BPSQueryLimitsMenu = new Ext.menu.Item({  text:'查询CAN总线的滤波上\下限',  //style:'height:35;',  handler: function(){   var unitids = [];   var calls = [];   if (treeMenu.from == 3) {    unitids =
html同时执行多个ajax,Ajax方法详解以及多个Ajax并发执行
weixin_36329939的博客
06-10 899
AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。javascript先来一段代码html$.ajax({type: "GET或者post",url: url,data: data,dataType: "json",success: function(data){aler("请求成功");}error:function(dat...
处理多个ajax请求,你如何处理多个ajax请求？
weixin_35029527的博客
08-06 524
当我的第一个ajax请求获得完成回调时，当我通过相同的ajax请求将ResultJSON.two == true中的某个json属性返回到我的页面时，当我到达我的属性时，我将如何执行额外的ajax请求以上？下面，我在完成回调中执行其他ajax请求。我将再使用其中两个请求。有没有更好的方法来做到这一点，因为它目前无法正常工作。我创建函数ajaxUpdateTwo()，然后我调用它。欢迎任何建议。这是...
Jsp页面中有两个ajax为什么只用了第一个，第二个没有使用，求解谢谢
HHHX_i的博客
12-06 692
Jsp页面中有两个ajax为什么只用了第一个，第二个没有使用，求解谢谢 我写的ajax是用于验证输入的值是否在数据库中存在，不知道为什么只能验证第一个ajax，第二个无法验证，求解谢谢 ...
多个ajax异步执行,初探关于ajax多个请求，但需要全部完成后才能执行的方法
weixin_39932479的博客
08-05 933
本文主要总结一下需要等待多个ajax请求完成后再执行操作的方法最近在做一个英雄榜项目遇到一个问题，需要用到6次Ajax来获取各个榜单的数据再进行操作。一、ajax嵌套ajax，传说中的嵌套金字塔，以及这种方式只能串联发起ajax请求function getDataFun(){$.ajax({url: "/equip_rank",type:'GET',dataType:'jsonp',success...
这样需要写多个 $.ajax ，可以优化一下吗？
最新发布
07-09
是的，你可以通过优化代码来避免重复写多个 `$.ajax`。以下是一种优化的方法： ```javascript var data = {}; if (condition1) { data = { param1: 'value1' }; } else if (condition2) { data = { param2: '...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值