ajax基础

一、简介：

AJAX即“Asynchronous Javascript + XML ”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。

AJAX = 异步 JavaScript和XML（标准通用标记语言的子集）。

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页面。

 

二、ajax请求

ajax 请求一般分成 4 个步骤。

1、创建 ajax 对象（XMLHttpRequest）

       在创建对象时，有兼容问题，使用以下代码判断：

var sender = null;
if(window.XMLHttpRequest){
    sender = new XMLHttpRequest();       //IE7+,Firefox,Chrome,Opera,Safari
}else{
    sender = new ActiveXObject('Microsoft.XMLHTTP');   //IE6,IE5
}

 

2、连接服务器

         在这里会用到 open() 方法。open() 方法有三个参数，第一个参数是连接方法即 GET 和 POST，第二

         个参数是 URL 即所要读取数据的地址，第三个参数是否异步，它是个布尔值，true 为异步，false 为同步。

sender.open('GET', url, true);

 

 

3、发送请求

        send() 方法。

sender.send();

 

4、接收返回值

onreadystatechange 事件。当请求被发送到服务器时，我们需要执行一些基于响应的任务。每当 readyState 改变时，就会触发 onreadystatechange 事件。

readyState：请求状态，返回的是整数（0-4）。

0（未初始化）：还没有调用 open() 方法。

1（载入）：已调用 send() 方法，正在发送请求。

2（载入完成）：send() 方法完成，已收到全部响应内容。

3（解析）：正在解析响应内容。

4（完成）：响应内容解析完成，可以在客户端调用。

status：请求结果，返回 200 或者 404。

200 => 成功。

404 => 失败。

responseText：返回内容，即我们所需要读取的数据。需要注意的是：responseText 返回的是字符串。

sender.onreadystatechange=function(){
    if(sender.readyState==4){
        if(sender.status==200){
            var file = sender.responseText;
        }
    }
};

 

 

测试范例：

ClassLoader.loadScriptSync = function(){
	if(arguments.length == 0){
		return 
	}
	var clsName;
	if(arguments.length == 1){
		clsName = arguments[0];
		if(ClassLoader.cacheScript[clsName]){
			return 
		}
	}
	
	//1、获取XMLHttpRequest对象
	var sender = ClassLoader.createNewTransport();
	var temp = new Date().getTime()
	var method = "GET"
	var url = clsName
	var reqString = ""
	if(typeof clsName == "object" && clsName.length > 0){
		method = "POST"
		url = "*"
		reqString = clsName.join("&_")
	}
	//2、连接服务器
	sender.open(method, url + ".js?temp=" + temp, false)
	sender.setRequestHeader('encoding' , 'utf-8');
	try{
	//3、发送请求到服务器	
		sender.send("")
	}catch (e){
		alert(e)
	}
	//4、接收返回值
	if(sender.readyState == 4){
			if(sender.status == 200){
				var file = sender.responseText
				if(file.length == 0){
					return;
				}
				ClassLoader.markCache(clsName);
				try{
					ClassLoader.eval(file);
				}catch(e){
					throw e;
					ClassLoader.clearCache(clsName);
					if(ClassLoader.debug){
						alert(clsName + " script file error : /r" + e.toString())
					}
				}
			}
	} else {
		if(ClassLoader.debug){
			alert(clsName + " class file load failed")
		}
	}
	//5、终止ajax请求
	sender.abort();
}