Ajax学习小结

Ajax(Asynchronous Javascript And XML)是异步的javascript和xml,它是为了解决传统web应用当中“发送请求 - 等待响应”这种模式的弊端(浏览器在发送完请求之后,只能等待服务器的响应,用户不能进行其他的操作,浏览器发送完请求,会抛弃整个页面,等待服务器返回新的页面,浏览器和服务器之间的交互的数据量很大,不能够做到按需获取数据)而创建的技术。该技术的本质是:通过浏览器内置的一个对象XMLHttpRequest异步的向服务器发送请求(所谓异步,指的是浏览器并没有抛弃整个页面,用户仍然可以操作原有的页面,也就是,不是通过表单提交的方式向服务器发送请求),服务器在处理完请求以后,返回数据给XMLHttpRequest,通过javascript可以获取XMLHttpRequest中的数据,然后,使用该数据更新页面。整个过程当中,用户不用等待服务器的响应。

(一)创建XMLHttpRequest对象

由于有些老版的浏览器并没有实现标准化,不支持该对象,所以在创建XMLHttpRequest对象的时候,要考虑下浏览器及版本问题,可以使用如下的创建代码。

<script type="text/javascript">
	// 创建XMLHttpRequest对象
	var xmlHttpRequest;
	if (window.XMLHttpRequest) {
		//for ie7+, Firefox, Chrome, Opera, Safari
		xmlHttpRequest = new XMLHttpRequest();
	} else {
		// for ie5, ie6
		xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
	}
</script>

(二)向服务器发送请求

向服务器发送请求的时候,有两种发送方式:GET和POST,对于这两种发送方式,写Ajax代码的时候也略有不同,不同之处,后面会总结到。向服务器发送请求的时候,主要使用XMLHttpRequest对象的open()和send()方法:

方法 描述
open(method, url, async)
规定请求的类型(GET或POST,大小写均可)、URL(文件在服务器上的位置)以及是否异步(true表示异步、false表示同步)处理请求。
send(string)
将请求发送到服务器,对于GET方式,括号的string不需要,建议写成null;string只用于POST方式,用以传递参数。

对于GET和POST这两种发送方式,GET更简单更快,也可以适用于大部分情况。但是,在以下情况下,建议使用POST方式:

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

(2)向服务器发送大量数据(POST没有数据量的限制)。

(3)发送包含未知字符的用户输入时,POST比GET更稳定、可靠。

XMLHttpRequest对象与服务器通信的时候,会有一个通信状态,即readyState,该对象属性有5个值,分别表示如下的意义:

0:未初始化,XMLHttpRequest对象已经建立,但是尚未初始化(尚未调用open()方法)。

1:初始化,对象已经建立,但尚未调用send()方法。

2:发送数据,send()方法已经调用,但是当前的状态及http头未知,表示已经发送到服务器,但是服务器返回的数据XMLHttpRequest还没有开始接收。

3:数据发送中,XMLHttpRequest已经接收部分数据,但是此时数据不完整。

4:响应结束,此时XMLHttpRequest已经接收完了所有数据,可以通过responseText/responseXml获取数据。

一般只要用readyState==4&&status==200就好了,readyState状态每发生改变,那么就会触发onreadystatechange事件。

1、GET请求

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ajax</title>
<script type="text/javascript" src="./jquery-1.11.2.min.js"></script>
<script type="text/javascript">
	function doAjax() {
		// 创建XMLHttpRequest对象
		var xmlHttpRequest;
		if (window.XMLHttpRequest) {
			//for ie7+, Firefox, Chrome, Opera, Safari
			xmlHttpRequest = new XMLHttpRequest();
		} else {
			// for ie5, ie6
			xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
		}
		xmlHttpRequest.onreadystatechange = function() {
			// readyState表示的是XMLHttpRequest对象与服务器的通信状态(0、1、2、3、4,其中4表示服务器接收了数据并返回,XMLHttpRequest对象可以获取数据了)。status是服务器的状态码,比如404表示有错误页面,200表示一切正常,这里用200就可以了。
			if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) {
				document.getElementById("mydiv").innerHTML = xmlHttpRequest.responseText;
			}
		};
		// 可以加个Math.random()来实现每次传参都不一样,避免缓存的情况。第三个参数是true,表示采用异步的方式,一般建议用异步不用同步。
		xmlHttpRequest.open("GET", "doAjax.do?id=" + Math.random(), true);
		// 对于GET方式,send()方法不用写参数,但是出于兼容性考虑,建议写null
		xmlHttpRequest.send(null);
	}
</script>
</head>
<body>
	<button onclick="doAjax();">点我</button>
	<div id="mydiv"></div>
</body>
</html>

2、POST请求

POST请求与上面的代码非常类似,不一样的是需要使用setRequestHeader()来添加HTTP头,然后在send()方法中规定希望发送的数据,如下所示:

xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");

3、异步与同步

Ajax指的是异步的javascript和XML,XML对象如果要用于Ajax的话,其open()方法的参数必须设置为true。当使用异步async=true时,需要编写onreadystatechange函数,写法就跟前文中的写法一样。

当使用同步async=false时,就不要编写onreadystatechange函数,把代码放到send()语句后面即可,如下:

xmlhttp.open("GET","test1.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

有个地方要注意的是,如果通信的时候出现乱码问题,记得一定要注意编码的解决。

(三)服务器响应

要获得来自服务器的相应,可以使用XMLHttpRequest对象的responseText或responseXml属性。

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

responseXml:获得XML形式的响应数据。

下面是来自w3school中的一个用responseXml获取数据的代码示例:

<html>
<head>
<script type="text/javascript">
	function loadXMLDoc() {
		var xmlhttp;
		var txt, x, i;
		if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
			xmlhttp = new XMLHttpRequest();
		} else {// code for IE6, IE5
			xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
		}
		xmlhttp.onreadystatechange = function() {
			if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
				xmlDoc = xmlhttp.responseXML;
				txt = "";
				x = xmlDoc.getElementsByTagName("title");
				for (i = 0; i < x.length; i++) {
					txt = txt + x[i].childNodes[0].nodeValue + "<br />";
				}
				document.getElementById("myDiv").innerHTML = txt;
			}
		}
		xmlhttp.open("GET", "/example/xmle/books.xml", true);
		xmlhttp.send();
	}
</script>
</head>

<body>

	<h2>My Book Collection:</h2>
	<div id="myDiv"></div>
	<button type="button" onclick="loadXMLDoc()">获得我的图书收藏列表</button>

</body>
</html>

上面的例子就是获得服务器上的books.xml文件中title标签的内容(注意:标签节点下面还有文本节点,文字内容是存储在文本节点的,而不是标签节点,所以要取标签节点的子节点的值,即childNodes[0].nodeValue)。有关ajax的详细参考资料可以点击这里访问w3school相应页面。

本文标题:Ajax学习小结

本文链接:http://yedward.net/?id=258

本文版权归作者所有,欢迎转载,转载请以文字链接的形式注明文章出处。

相关文章