存在多个 AJAX 任务
实现的效果:
这两个Ajax任务可同时实现,也可单独实现。



标准的函数:
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 = '<h2>' + xmlhttp.responseText + '</h2>';
}
});
}
function func(){
loadXMLDoc("../文档/1.txt",function(){
if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
document.getElementById("app").innerHTML = '<h2>' + xmlhttp.responseText + '</h2>';
}
});
}
在标准函数中:
1.两个参数:url,cfunc,第一个参数表示请求服务器的文档,第二个参数表示服务器响应时onreadystatechange事件需调用的函数。
2.创建XMLHttpRequest对象。
3.向服务器发送请求,xmlhttp.open("GET",url,true);xmlhttp.send();
4.增加onreadystatechange事件,xmlhttp.onreadystatechange=cfunc;
如此,凡是执行Ajax任务的函数都可以使用该标准函数,只需要自己填写标准函数中的两个参数即可。
多个Ajax任务:
1.使用标准函数
2.编写标准函数中的两个参数,这两个参数均可自行改变,即请求服务器的文档,服务器响应实现的方法都可不同。
完整代码:
<html>
<head>
<script type="text/javascript">
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 = '<h2>' + xmlhttp.responseText + '</h2>';
}
});
} function func(){
loadXMLDoc("../文档/1.txt",function(){
if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
document.getElementById("app").innerHTML = '<h2>' + xmlhttp.responseText + '</h2>';
}
});
} </script>
</head>
<body> <button type="button" onclick="myFunction()">一个Ajax</button>
<button type="button" onclick="func()">另一个Ajax</button>
<div id="myDiv"><h2>一个Ajax</h2></div>
<div id="app"><h2>另一个Ajax</h2></div> </body>
</html>
欢迎留言讨论。
存在多个 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 ...
随机推荐
- python之单元测试_生成测试报告
(1)HTMLTestRunner.py的下载路径:https://pan.baidu.com/s/1Yk2E8d8bIo5_rmpussOE9Q 提取码:0jae (2)HTMLTestRunner ...
- 二、Windows Server 2016 AD 组织单位、组、用户的创建
简介: 组织单位简称OU,OU是(Organizational Unit)的缩写,组织单位是可以将用户.组.计算机和组织单位放入其中的容器.是可以指派组策略设置或委派管理权限的最小作用域或单元. 建立 ...
- 基于udp简单聊天的系统
老师博客:http://www.cnblogs.com/Eva-J/articles/8244551.html#_label4 基于udp的简单的聊天代码 说明:这段代码,显示有client向serv ...
- Redis其他常用操作
详细Redis操作手册: http://doc.redisfans.com/ ============================================================= ...
- C#基础知识之关键字
关键字是 C# 编译器预定义的保留字.这些关键字不能用作标识符,但是,如果您想使用这些关键字作为标识符,可以在关键字前面加上 @ 字符作为前缀.在 C# 中,有些关键字在代码的上下文中有特殊的意义,如 ...
- ASP.NET MVC学习系列(4)——MVC过滤器FilterAttribute
1.概括 MVC提供的几种过滤器其实也是一种特性(Attribute),MVC支持的过滤器类型有四种,分别是:AuthorizationFilter(授权),ActionFilter(行为),Resu ...
- mn
http://image.uczzd.cn/10129986679866437816.jpg?id=0&from=export https://www.cnblogs.com/ityoukno ...
- Spring Security(三十七):Part IV. Web Application Security
Most Spring Security users will be using the framework in applications which make user of HTTP and t ...
- IDEA+循环语句 or 输出语句 快捷操作
IDEA+循环语句 or 输出语句 快捷操作:https://blog.csdn.net/shijiebei2009/article/details/44726433 for循环:仅输入fori然后回 ...
- 基于 HTML5 WebGL 的 3D 工控裙房系统
前言 工业物联网在中国的发展如火如荼,网络基础设施建设,以及工业升级的迫切需要都为工业物联网发展提供了很大的机遇.中国工业物联网企业目前呈现两种发展形式并存状况:一方面是大型通讯.IT企业的布局:一方 ...