ajax基础

一、简介:

AJAX即“Asynchronous Javascript + XML ”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。
AJAX = 异步 JavaScriptXML标准通用标记语言的子集)。
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();
}

 

相关推荐