存在多个 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 ...
随机推荐
- 程序员利器Tmux使用手册
转:https://blog.csdn.net/chenqiuge1984/article/details/80132042
- ueditor富文本编辑器使用百度地图自定义动态地图组件及兼容https及http协议
ueditor富文本编辑器默认支持百度地图组件,但是如果导入动态地图后会加很多默认的地图组件在上面.如果需要自定义动态地图的组件则需要修改ueditor特定的html. ueditor百度地图组件所在 ...
- LeetCode算法题-Binary Number with Alternating Bits（Java实现）
这是悦乐书的第292次更新,第310篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第160题(顺位题号是693).给定正整数,检查它是否具有交替位:即它的二进制数的任意两 ...
- LeetCode算法题-K-diff Pairs in an Array（Java实现）
这是悦乐书的第254次更新,第267篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第121题(顺位题号是532).给定一个整数数组和一个整数k,您需要找到数组中唯一的k- ...
- DRF项目创建流程(1)
一 web应用模式 前后端不分离 前后端分离 二 RESTFUL API规范 REST全称是Representational State Transfer,中文意思是表述(编者注:通常译为表征)性状态 ...
- parquet文件 读取 原理
学习一下parquet存储结构 原理 以及使用
- 2018-2019-2-20175332-实验二《Java面向对象程序设计》实验报告
一.单元测试 实验要求:参考 http://www.cnblogs.com/rocedu/p/6371315.html#SECUNITTEST 完成单元测试的学习 提交最后三个JUnit测试用例(正常 ...
- visual studio 各版本激活码
visual studio 各版本 激活码 版本 产品型号 激活码 vs2019 Enterprise(企业版) BF8Y8-GN2QH-T84XB-QVY3B-RC4DF vs2019 Profes ...
- 开放数据接口 API 简介与使用场景、调用方法
此文章对开放数据接口 API 进行了功能介绍.使用场景介绍以及调用方法的说明,供用户在使用数据接口时参考之用. 在给大家分享的一系列软件开发视频课程中,以及在我们的社区微信群聊天中,都积极地鼓励大家开 ...
- Leetcode 88. Merge Sorted Array(easy)
Given two sorted integer arrays nums1 and nums2, merge nums2 into nums1 as one sorted array. Note:Yo ...