走进AJAX

chaoyi

浏览: 309568 次
性别:
来自: 广州

最近访客更多访客>>

hjz

loginboot

szluckboy

1357冬天哈

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

2015-01 ( 21)
2014-12 ( 32)
2014-11 ( 42)
更多存档...

博客分类：

JSP 基础

本章目标
掌握AJAX的主要作用；
掌握XMLHttpRequest对象的创建及使用。

AJAX技术简介
AJAX（Asynchronous JavaScript and XML，异步JavaScript和XML），AJAX并不是一项新的技术，它产生的主要目的是用于页面的局部刷新，从之前的代码开发来看，读者可以发现，每当用户向服务器端发出请求时，那怕需要的只是简单的更新一点点的局部内容，服务器端都会将一个整体的页面进行刷新，并重新生成代码，这样一来程序的性能肯定会有所降低的，而如果采用了AJAX技术之后，就可以实现局部的内容变更，而不用再进行整体的页面刷新，显然处理的性能要比前者高很多

XMLHttpRequest对象
在AJAX中主要是通过XMLHttpRequest对象处理发送异步请求和处理回应的，此对象最早是在IE 5中以ActiveX组件的形式出现的，一直到2005年之后才被广泛的使用，而如果要想创建一个XMLHttpRequest对象必须使用JavaScript。

创建XMLHttpRequest对象 —— create_ajax.htm
<script language="JavaScript">
var xmlHttp ; // AJAX核心对象名称
function createXMLHttp() { // 创建XMLHttpRequest核心对象
if (window.XMLHttpRequest) { // 判断当前使用的浏览器类型
xmlHttp = new XMLHttpRequest();// 表示使用的为FireFox内核的浏览器
} else { // 表示使用的是IE内核的浏览器
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
</script>

本人进行了测试

xmlHttp=new XMLHttpRequest();//兼容IE9，最新的火狐，最新的谷歌

XMLHttpRequest对象的属性

readState取值
对readState一共有五种取值，分别是：
    0：请求没有发出（在调用open()函数之前之前）。
    1：请求已经建立但还没有发出（调用send()函数之前）。
    2：请求已经发出正在处理之中（这里通常可以从响应得到内容头部）。
    3：请求已经处理，正在接收服务器的信息，响应中通常有部分数据可用，但是服务器还没有完成响应。
    4：响应已完成，可以访问服务器响应并使用它。

XMLHttpRequest对象的方法

在content.html写上

Hello world!!!

使用异步处理 —— ajax_receive_content.htm

<html>
<head>
<title>返回数据的页面</title>
</head>
<body>
<script type="text/javascript">
	var xmlHttp; //Ajax 核心对象名称
	function createXMLHttp(){//创建 XMLHttpRequest 核心对象
			xmlHttp=new XMLHttpRequest();//兼容IE9，最新的火狐，最新的谷歌
	}
	function showMag(){
		createXMLHttp(); //建立 XMLHttp 核心对象
		xmlHttp.open("POST", "content.html");//设置一个请求
		//设置请求完成之后处理的回调函数
		xmlHttp.onreadystatechange=showMsgCallback;
		xmlHttp.send(null);//发送请求，不传递任何参数
	}
	function showMsgCallback(){//定义回调函数
		if(xmlHttp.readyState==4){//数据返回完毕
			if(xmlHttp.status==200){//HTTP操作正常
				var text = xmlHttp.responseText;//接收返回的内容
				//设置要使用的CSS样式表
				document.getElementById("msg").className="样式表名称";
				//设置 msg 标签元素中要显示的内容为 Ajax 接收的返回值内容
				document.getElementById("msg").innerHTML=text;
			}
		}
	}
</script>
<input type="button" onclick="showMag()" value="调用 Ajax 显示内容" />
<span id="msg"></span>
</body>
</html>

效果图：