现在的位置: 首页 > web前端 > 正文

手写实现ajax异步调用

2017年04月15日 web前端 ⁄ 共 1667字 ⁄ 字号 评论关闭

一个最重要的文件,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函数,转化为数组

抱歉!评论已关闭.