初学AJAX总结

AJAX全称为Asynchronous JavaScript and XML。

也就是异步的JavaScript和XML。

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

在学习使用AJAX的过程中，不得不了解到一个对象：XMLHttpRequest。

所有的现代浏览器都支持XMLHttpRequest对象（IE5和IE6要用ActiveXObject）。

XMLHttpRequest用于在后台与服务器交换数据。

创建XMLHttpRequest对象的语法：

variable = new XMLHttpRequest();

老版本的IE5和IE6创建ActiveXObject对象：

variable = new AvtiveXObject("Microsoft.XMLHTTP");

我们可以通过JavaScript中的 window.XMLHttpRequest属性来判断浏览器支持哪种对象。

如果支持就使用XMLHttpRequest对象，不支持就使用AvtiveXObject对象。

判断代码如下：

var xmlhttp;
if (window.XMLHttpRequest)
{
    //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
    xmlhttp=new XMLHttpRequest();
}
else
{
    // IE6, IE5 浏览器执行代码
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

创建了与服务器进行数据交换的对象之后，我们来了解一下向服务器发送请求的两个方法。

open(method,url,async)：此方法规定请求的类型，URL以及是否异步处理请求。

method：请求的类型，GET或者POST；

url：文件在服务器上的位置；

async：true(异步)，false(同步)。

send(string)：将请求发送到服务器。

string：仅用于POST请求，GET请求发送字符串在情况在url后面加上要传的参数。

那么我们什么时候用GET请求，什么时候用POST请求呢。

与POST相比，GET更简单也更快，并且在大部分情况下都能用。

但是在如下几种情况中，请使用POST请求：

1.无法使用缓存文件（更新服务器上的文件或数据库）。

2.向服务器发送大量数据（POST没有数据量限制）。

3.发送包含未知字符的用户输入时，POST比GET更稳定也更可靠。

第一个方法第三个参数为true，使用异步请求的好处是：

在等待服务器响应时执行其他脚本，当响应就绪后对响应进行处理。

当我们获得服务器的响应时，服务器会给我们传回响应的数据，数据有两种形式，分别是Text形式和XML形式。

responseText：获得字符串形式的响应数据。

responseXML：获得XML形式的响应数据。

responseText和responseXML都是XMLHttpRequest的属性。

接下来让我们以一个例子来讲解如何使用AJAX，其中会用到一个onreadystatechange函数，我们在例子后面对它进行解析。

代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function loadXMLDoc()
{
	var xmlhttp;
	if (window.XMLHttpRequest)
	{
		//  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
		xmlhttp=new XMLHttpRequest();
	}
	else
	{
		// IE6, IE5 浏览器执行代码
		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	}
	//当readyState状态发生改变时，执行的回调函数
	xmlhttp.onreadystatechange=function()
	{
		//当请求已完成且已经响应成功时执行
		if (xmlhttp.readyState==4 && xmlhttp.status==200)
		{
			document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
		}
	}
	//设置请求类型并发送
	xmlhttp.open("GET","www.baidu.com",true);
	xmlhttp.send();
}
</script>
</head>
<body>

<div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div>
<button type="button" onclick="loadXMLDoc()">修改内容</button>

</body>
</html>

在如上代码的 loadXMLDoc()函数中进行了三个操作：

1.创建XMLHttpRequest对象。

2.当服务器响应就绪时执行函数。

3.把请求发送到我们服务器上面的文件。

在了解XMLHttpRequest的onreadystatechange函数之前，我们先来了解一下服务器响应时的一些状态变化。

readyState：存有XMLHttpRequest的状态，从0到4发生变化。

0：请求未初始化。

1：服务器连接已建立。

2：请求已接收。

3：请求处理中。

4：请求已完成，且响应已就绪。

status：响应的状态。

200：响应成功。

403：请求不允许。

404：没有发现请求的URL。

500：服务器产生内部错误。

在了解了服务器状态的改变之后，我们再来看看onreadystatechange函数。

onreadystatechange函数是一个回调函数，每当readyState状态发生一次改变，就会触发一次onreadystatechange函数事件。

也就是说一次完整的请求readyState状态从0变到4，onreadystatechange函数事件会被调用5次。

在我们的代码中，当 readyState==4 && status==200 也就是请求已完成且已经响应成功的时候，把请求返回的数据给输出到 id="myDiv"的标签中。

其实你可能会发现，在使用AJAX请求服务器的时候，很多地方是通用的，不同的地方只是我们请求的URL地址和回调函数执行的操作。

那么我们可以把相同的部分进行封装，这样当我们存在多个AJAX请求的时候，就可以重复调用了。

示例代码：

<!DOCTYPE html>
<html>
<head>
<script>
var xmlhttp;
function loadXMLDoc(url,cfunc)
{
if (window.XMLHttpRequest)
  {// IE7+, Firefox, Chrome, Opera, Safari 代码
  xmlhttp=new XMLHttpRequest();
  }
else
  {// IE6, IE5 代码
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=cfunc;
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
function myFunction()
{
	loadXMLDoc("/try/ajax/ajax_info.txt",function()
	{
		if (xmlhttp.readyState==4 && xmlhttp.status==200)
		{
			document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
		}
	});
}
</script>
</head>
<body>

<div id="myDiv"><h2>使用 AJAX 修改文本内容</h2></div>
<button type="button" onclick="myFunction()">修改内容</button>

</body>
</html>

猜你喜欢