AJAX入门知识（1）

认识AJAX

1、AJAX指异步JavaScript及XML

2、AJAX不是一个新的编程语言，而是一种用于创建更好更快以及交互性更强的 Web 应用程序的技术。它可使因特网应用程序更小、更快，更友好。

3、AJAX使用Http请求，由于每当用户提交输入后服务器都会返回一张新的页面，传统的 web 应用程序变得运行缓慢，且越来越不友好。通过利用 AJAX，您的 JavaScript 会通过 JavaScript 的XMLHttpRequest 对象，直接与服务器来通信。通过使用 XMLHttpRequest 对象，web 开发者可以做到在页面已加载后从服务器更新页面！

4、游览器对AJAX的支持，由于AJAX的要点是XMLHttpRequest 对象，针对不同的游览器，创建 XMLHttpRequest 对象的方法是有差异的，我们可以是用一下代码来根据不同的游览器来实现创建 XMLHttpRequest 对象：

function ajaxFunction(){
	var xmlHttp;
	try{
		//Firefox,Opera8.0+,Safari
		xmlHttp = new XMLHttpRequest();
		alert("success!");
	}catch(e){
		//IE 6.0+
		try{
			xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
			alert("success!");
		}catch(e){
			try{
				//IE5.0+
				xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
				alert("success!");
			}catch(e){
				alert("您的游览器不支持AJAX");
				return false;
			}
		}
	}
}

当然我们也可以这样判断一个游览器是否支持XMLHttpRequest 对象，并且创建相应的对象实例

function funXHR(){
	var xmlHttp;
	if(window.XMLHttpRequest){
		// code for IE7+, Firefox, Chrome, Opera, Safari
		xmlHttp = new XMLHttpRequest();
	}else{
		// code for IE6, IE5
		xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
	}
}

AJAX基础知识

1、关于XMLHttpRequest对象

a)onreadystatechange属性，onreadystatechange属性存有处理服务器相应的函数，

xmlHttp.onreadystatechange=function(){ 
//代码段  定义一个空函数，可同时对 onreadystatechange 属性进行设置
}

b)readyState属性，readyState 属性存有服务器响应的状态信息。每当 readyState 改变时，onreadystatechange 函数就会被执行。

readyState可能值：0（请求未初始化在调用 open() 之前）、1（请求已提出，调用 send() 之前）、2（请求已发送，这里通常可以从响应得到内容头部）3、（请求处理中，响应中通常有部分数据可用，但是服务器还没有完成响应）4,、（请求已完成，可以访问服务器响应并使用它）

xmlHttp.onreadystatechange=function(){ 
	//请求已经完成
	if(xmlHttp.readyState == 4){
		//从服务器的response获得数据
	}
}

c)responseText属性，可以通过该属性取回由服务器返回的数据

xmlHttp.onreadystatechange=function(){ 
	//请求已经完成
	if(xmlHttp.readyState == 4){
		//从服务器的response获得数据
		document.getElementById("time").value = xmlHttp.responseText;//将一个ID为time的HTML元素的值设置为responseText
	}
}

2、向服务器发送请求

如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：

xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();

open（ method, url, async）参数：method表示请求类型，有GET或POST（推荐使用POST）；url表示请求的文件在服务器上的位置，async表示异步（true）或同步（false）

send（）方法表示将请求发送到服务器。

3、服务器的响应

如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText(字符串方式的响应) 或 responseXML 属性（XML 形式的响应）。

对于responseText方式可以直接使用其值

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;//设置一个ID为myDiv的HTML元素的值为responseText；

对于responseXML，其响应内容为responseXML对象，需要对其内容进行提取后使用。