手写实现ajax异步调用

2023-10-26

一个最重要的文件,ajax.js:

function send_request(callback, urladdress, isReturnData){    
        var xmlhttp = getXMLHttpRequest();
        xmlhttp.onreadystatechange = function(){
            	if (xmlhttp.readyState == 4) {//readystate 为4即数据传输结束
 				    try{
				    	if(xmlhttp.status == 200){
							if(isReturnData && isReturnData==true){
								callback(xmlhttp.responseText);
							}
						}else{
							callback("抱歉,没找到此页面:"+ urladdress +"");
						}
			        } catch(e){
			        	callback("抱歉,发送请求失败,请重试 " + e);
			        }
			   }
        }
        xmlhttp.open("GET", urladdress, true);
        xmlhttp.send(null);
}

function getXMLHttpRequest() {
        var xmlhttp;
		if (window.XMLHttpRequest) {
			try {
				xmlhttp = new XMLHttpRequest();
				xmlhttp.overrideMimeType("text/html;charset=UTF-8");//设定以UTF-8编码识别数据
			} catch (e) {}
		} else if (window.ActiveXObject) {
			try {
				xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (e) {
				try {
					xmlhttp = new ActiveXObject("Msxml2.XMLHttp");
				} catch (e) {
					try {
						xmlhttp = new ActiveXObject("Msxml3.XMLHttp");
					} catch (e) {}
				}
			}
		}
        return xmlhttp;
}

2.传入url后,从后台准备值:

//根据所选一级栏目动态改变所对应的二级栏目
function changSubitem(id)
{	
	var schoolItemid = get("school_" + id);//考区;很明确知道选择了这一个;直接使用getById获得
	var url="share_hall!searchRoomsBySiteId.action?siteId="+schoolItemid.options[schoolItemid.selectedIndex].value;
	var rooms = document.getElementsByName("rooms_"+id);
	send_request(function(datas){
		var str = eval(datas);//这个函数太牛B了,将这种格式的字符串解析成对象:"[["1","a"],["2","b"]]"
		for(var m=0;m<rooms.length;m++){//一共有六个联动单元
			for ( var i = 0; i < datas.length; i++) {
		        //remove option;一定要逆着减,否则会出错
		        for ( var x = rooms[m].options.length - 1; x >= 0;x--) {
		            rooms[m].options.remove(x);
		        }
		        //add option
		        for ( var x = 0; x < str.length; x++) {
		        	if(x==0){
			            rooms[m].options.add(new Option("请选择", "-1"));//为了让用户必须去触发onchange事件,所以加这个,一般不加,特殊处理
		        	}
		            var id = str[x][0];
		            var name = str[x][1];
		            rooms[m].options.add(new Option(name, id));
		        }
		    }
		}
	},url,true);
}

3.后台组合的值形如这种格式,手动凑出来就行:"[["1","a"],["2","b"]]",直接使用eval函数,转化为数组


本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

手写实现ajax异步调用 的相关文章

随机推荐

  • 3.3 CPU共享功能

    最后更新2021 08 11 Power VM共享CPU的策略由Power CPU架构 Hypervisor 和AIX进程调度功能综合实现 我们可以将这个过程分为两个阶段 AIX对进程 线程 进行调度 让线程尽量集中运行在 同一 物理CPU
  • Phabricator搭建

    最近一直想搭建一个代码审查的系统 最后选了Phabricator Phabricator这个软件就不多介绍了 直接切入主题 1 系统选择CentOS6 5 当然也可以在windows上安装 本人未尝试过 个人觉得毕竟多数开源软件都是基于Li
  • [bzoj3309] DZY Loves Math

    题目大意 对于正整数n 定义f n 为n所含质因子的最大幂指数 例如f 1960 f 2 3 5 1 7 2 3 f 10007 1 f 1 0 给定正整数a b 求 ai 1 bj 1f i j sum i 1 a sum j 1 b f
  • 分页与order_by

    作者 敖士伟 1 用ordery by进行排序时 并不能一定能得到一个确定的序列 因为有些列值相等 这样就要再添加一个排序条件如 select from tbKuCunJiLuBiao order by dt KCJLB RKShiJian
  • unreal-修改项目缓存地址

    更改UE4项目缓存路径 目录 更改UE4项目缓存路径 找到软件安装路径下的配置文件 BaseEngine ini 右键记事本打开 开始修改配置信息 找到软件安装路径下的配置文件 BaseEngine ini 例如 D Program Fil
  • ChatGPT应用于高职教育的四大潜在风险

    目前 ChatGPT还是一种仍未成熟的技术 当其介入高职教育生态后 高职院校师生在享受ChatGPT带来的便利的同时 也应该明白ChatGPT引发的风险也会随之进入高职教育领域 如存在知识信息 伦理意识与学生主体方面的风险与挑战等 如图1所
  • oh-my-zsh,让你的Linux命令终端从未这么爽过

    oh my zsh shell的类型有很多种 linux下默认的是bash 虽然bash的功能已经很强大 但对于以懒惰为美德的程序员来说 bash的提示功能不够强大 界面也不够炫 并非理想工具 而zsh的功能极其强大 只是配置过于复杂 起初
  • Python数据库 -- 查询结果处理、SQL表内数据去重

    目录 需求 Python脚本查询数据库及返回结果的处理 MySQL表内既有数据的去重思想及SQL语句 需求 每次在爬动态的时候都会把前几条重复爬取 以前想着先把功能完善了再说 终于 功能做完了 要面对这个数据问题了 想法是先看看领英的帖子是
  • 云计算与大数据概论(1) 云计算,大数据是什么

    云计算与大数据概论 1 云计算 大数据是什么 云计算的应用场景 云计算概念 云计算简史 云计算定义 云计算基本特征 大数据应用场景 大数据概念 大数据简史 大数据定义 大数据基础特征 两者之间的关系 本文同步发在印象笔记 https www
  • 区块链:Solidity合约结构

    一个完整的合约 一个完整的合约 我们可以理解为一个类 代码如下 pragma solidity 0 4 4 contract Counter uint count 0 address owner function Counter owner
  • windows mysql dump_mysqldump备份(Windows)

    先说下思路 每天凌晨1点备份线上云服务器上的MySQL数据库 将备份的sql文件拷贝下来 第二步 Windows脚本代码 echo 取日期 时间变量值set yy date 4 set mm date 5 2 set dd date 8 2
  • ChromeDriver/Selenium/Python浏览器自动化初体验

    目录 ChromeDriver安装 Selenium安装 Python脚本 ChromeDriver安装 在浏览器地址栏输入 查看chrome当前版本 chrome version 在浏览器地址栏输入 查找chrome当前版本的Chrome
  • linux 下解压及创建 tar.xz

    一 在linux 下解压 tar xz 文件步骤 以linux 2 6 30 tar xz 文件为例进行讲解 1 xz d linux 2 6 30 此时会生成linux 2 6 30 tar 文件 PS xz 命令解压时 加 k 参数可以
  • windows安装linux

    https www cnblogs com liuqingzheng p 16271895 html 咱们安装linux系统是centos7 准备工作 安装软件 vmware 虚拟机 官网下载地址 下载 VMware Workstation
  • 从哪里可以获取QT应用开发用到的图标资源?

    Qt官方网站 Qt官方网站提供了大量的Qt应用开发的图片资源 您可以通过访问Qt官方网站并搜索 Qt icons 或 Qt images 来找到它们 https www qt io Qt Creator Qt Creator是Qt的官方集成
  • hanlp2.x使用与语义角色标注任务

    hanlp 2 x的文档逻辑不太好看 这里记录一下语义角色标注任务的相关代码与文档中的重要内容 hanlp github地址 https github com hankcs HanLP hanlp各种任务缩写 https hanlp han
  • stata外部命令大全(包含面板门槛、系统GMM、空间计量、Pvar、中介效应等)

    1 数据来源 自主整理 2 时间跨度 无 3 区域范围 无 4 指标说明 该些外部命令包含面板门槛 系统GMM 空间计量 pvar 中介效应等涵盖全部 以下是部分命令截图 空间计量 系统GMM 动态广义矩估计 使用介绍 各位朋友使用时把pl
  • find_package()函数

    find package函数 引言 1 find package用法 2 find package原理 3 A required library with LAPACK API not found 错误解决 4 添加findpackage查
  • Java 应用配置 GC 日志输出内容

    Java 应用配置 GC日志输出文件 GC 日志部分配置项 基本 GC 日志信息 XX PrintGCDetails XX PrintGCDateStamps XX PrintGCTimeStamps GC 后对象年龄分布信息 XX Pri
  • 手写实现ajax异步调用

    一个最重要的文件 ajax js function send request callback urladdress isReturnData var xmlhttp getXMLHttpRequest xmlhttp onreadysta