在深入学习Ajax前,有必要了解一些基础,对我们整体认识Ajax很有帮助。
文章将从以下几点介绍Ajax:
Ajax是什么
Ajax是以一种新方法来整合现存的多种网页技术。该技术使用异步HTTP请求,在浏览器和Web服务器间传递XML数据,只更新部分网页内容。而传统的网页刷新使用的是同步的HTTP请求。具体过程如下图所示:
详细解说:
同步过程:首先浏览器接受网址,将HTTP请求送至Web服务器,服务器处理数据,再将HTTP数据送往浏览器页面显示。整个流程完成后,才能进行下一次的操作。同步过程是和HTTP请求同步。
异步过程:当HTTP请求发送后,通过Ajax技术使用的XMLHttpRequest对象来发送,此时不需等待服务器响应处理,返回数据等操作,用户可直接在浏览器界面进行下一步操作。异步过程是Ajax的HTTP请求和用户输入数据等操作是异步的。
Ajax的实现原理
用简单实例说明,获取txt文件中的内容,并显示在界面上。
Ajax方法实现代码如下:
<head runat="server">
<title>ajaxText</title>
<script type="text/javascript">
function TextAjax() {
var xmlHttp; //声明XMLHttRequest对象变量
///
/// HTTPRequest对象的创建
try {
//创建对象
xmlHttp = new XMLHttpRequest(); //创建对象这条语句针对 Firefox、Opera 以及 Safari 浏览器
} catch (e) {
//如果不成功,则尝试创建针对 Internet Explorer 6.0+ 的 xmlHttp=new ActiveXObject("Msxml2.XMLHTTP")
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
//如果还没有成功,则创建针对 Internet Explorer 5.5+ 的 xmlHttp=new ActiveXObject("Microsoft.XMLHTTP")
try {
xmlHttp = new ActiveXObject("Xicrosoft.XMLHTTP");
} catch (e) {
//错误提示,浏览器过时,不支持Ajax
alert("您的浏览器不支持Ajax");
return false;
}
}
} /// 对象创建完毕
//设置回调函数
xmlHttp.onreadystatechange = function () {
//4==请求已完成,可以访问
if (xmlHttp.readyState == 4) {
//从服务器的response获取数据
document.getElementById("getTXT").innerHTML = xmlHttp.responseText; //responsetext,属性获取服务器返回的数据
}
}
xmlHttp.open("GET", "time.txt", "true");
xmlHttp.send();
}
</script>
</head>
<body>
<div id="getTXT"></div>
<input type="button" value="clickme" οnclick="TextAjax();" />
</body>
代码解析及Aja与服务器交互的流程:
- 点击clickme,浏览器接收命令;
- 调用JavaScript事件处理函数,初始化XMLHttpRequest对象,同时指定一个回掉函数;
- 服务器接收XMLHttpRequest对象请求,处理数据,并返回;
- 执行JavaScript回调函数,解析返回信息;
- 将信息显示在界面
Ajax缺陷
Ajax的主要功能就是解决异步刷新界面问题。由于Ajax的技术需要使用JavaScript实现所以要求开发人员对JavaScript掌握熟练;现在也还没有非常成熟的用来开发调试JavaScript的IDE;并且每种浏览器提供的DOM模型有差异,所以在编写跨浏览器的时候有点困难。