ajax并不是一门新的语言或技术,它实际上是几项技术按一定的方式组合在一起,在共同的协作中发挥各种作用
- 使用XHTML和CSS标准化呈现;
- 使用DOM实现动态显示和交互;
- 使用XML和XSLT进行数据交换与处理;
- 使用XMLHttpRequest进行异步数据处理;
- 使用JavaScript绑定和处理所有数据;
ajax的工作原理相当于在用户和服务器之间加了一个中间层,使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器,像一些数据验证和数据处理等都交给Ajax引擎自己来做,只有确定需要从服务器读取新数据时再由Ajax引擎代向服务器提交请求。
Ajax并不是单一的技术,而是4种技术的集合,要灵活地运用Ajax必须深入了解这些不同的技术,以及它们在Ajax中所扮演的角色。
1.JavaScript
JavaScript是一种粘合剂,可以使用Ajax应用的各部分集成在一起。javascript是通用的脚本语言,用来嵌入在某种应用之中。在Ajax中javascript主要被用来 传递用户界面上的数据到服务器端并返回处理结果。
2.CSS
CSS为Web页面元素提供了一种可重用的可视化样式的定义方法。它提供了简单而又强大的方法,以一致的方式定义和使用可视化样式。在Ajax应用中,用户界面的样式可以通过CSS独立修改。
3.DOM
Dom文档对象模型以一组可以使用javascript操作的可编程对象展现了Web页面的结构。通过使用脚本修改DOM,Ajax应用程序可以运行时改变用户界面,或者高效地重绘页面中的某个部分。
4.XMLHttpRequest
XMLHttpRequest对象允许Web程序员从Web服务器以后台活动的方式获取数据。数据格式通常是XML,但是也可以很好地支持任何基于文本的数据格式。 也可以通过其他的方法从服务器获取数据,但XMLHttpRequest是最为灵活的和通用的工具。
JavaScript就像脱水一样将组成Ajax的各个 部分粘合在一起。通过使用JavaScript操作DOM来改变和刷新用户界面,不断地重绘和重新组织显示给用户的数据,并且处理用户葳鼠标和键盘的交互。CSS为应用提供了一致的外观,并且为以编程方式操作DOM提供了强大的捷径。XMLHttpRequest对象则用来与服务器进行异步通信,在用户工作时提交用户的请求并获取新的数据。
Ajax可以作为客户端和服务器的中间层,来处理客户端的请求,并根据需要向服务器端发送请求,用什么就取什么,用多少取多少,就不会有数据的冗余和浪费,减少了数据的下载问题,而且更新页面时不用重新载入全部内容,只更新需要更新的那部分即可 。相对于纯后台处理并重新载入的方式缩短了用户的等待时间,也把对资源的浪费降到了最低,基于标准化的并被广泛支持的技术,并且不需要插件或下载小程序,所以Ajax对于客户和ISP来说是双赢的。
Ajax使Web中的与显示分离,而在以前两者是没有精确界限的。数据与显示分离,有利于分工合作、减少非技术人员对页面的修改造成的Web应用程序错误、提高效率,也更加适用于现在的发布系统。也可以把以前的一些服务器负担的工作转嫁到客户端,利用客户端闲置的处理能力处理。
实现Ajax的步骤:
- 创建XMLHttpRequest对象,也就是创建一个异步调用的对象。不同浏览器使用异步调用对象有所不同,在IE浏览器中异步调用使用的,是XMLHTTP组件中的XMLHttpRequest对象,而在Netscape、Firefox浏览器中则直接使用XMLHttpRequest组件。因此,在不同的浏览器中创建XMLHttpRequest对象的方法有所不同。
- 创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息。创建了XMLHttpRequest对象之后,必须为其创建http请求,用于说明XMLHttpRequest对象要从哪里获取数据。通常要获取的数据可以是网站中的数据,也可以是本地文件中的数据。
- 设置响应HTTP请求状态变化的函数。创建HTTP请求后,就可以将HTTP请求发送给Web服务器了。然而,发送HTTP的目的是为了可以接收从服务器中返回的数据。从创建XMLHttpRequest对象开始,到发送数据、接收数据,XMLHttpRequest对象一共会经历5种状态。
- 发送HTTP请求。在经过以上几个步骤的设置之后,就可以将HTTP请求发送到Web服务器上去了。发送HTTP请求可以使用XMLHttpRequest对象的send()方法。
- 获取异步调用返回的数据。设置了响应http请求变化的函数,当XMLHttpRequest对象的readyState属性改变时,会自动激活该函数,如果XMLHttpRequest对象的readState属性值等于4,则表示异步调用过程完毕,就可以通过XMLHttpRequest对象的responseText属性或responseXml属性来获取数据了。
6.使用javaScript和DOM实现局部刷新。
代码示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax 基础</title>
<style type="text/css">
body{
font-family: "微软雅黑";
font-size: 12px;
}
*{
margin: 0px;
padding: 0px;
border: 0px;
}
form{
width:280px;
height: 181px;
background-image: url(img/1.png);
background-repeat: no-repeat;
padding-top: 40px;
padding-left: 20px;
}
input{
font-family: "微软雅黑";
color:#666666;
background: transparent;
border-bottom: 1px dashed#007eff;
border-left: none;
border-right: none;
border-top: none;
}
p{
padding:10px 5px 5px 15px;
background-image: url(img/1.png);
background-repeat: no-repeat;
background-position: left center;
}
</style>
<script language="javascript">
var xmlHttp;
function createXMLHttpRequest(){
if (window.ActiveXObject)
{
xmlHttp = new ActiveXObjext("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest)
{
xmlHttp = new XMLHttpRequest();
}
}
function callServer(){
//获取表单中的数据
var city = document.getElementById("city").value;
var state = document.getElementById("state").value;
//如果没有填写则返回
if((city==null)||(city==""))
return;
if ((state==null)||(state=="")) {
return ;
}
//链接服务器,自动获取代号。本实例没有链接服务器,此片只是示例
var url = "https://blog.csdn.net/zang141588761";
//打开链接
xmlHttp.open("GET",url,true);
// 告诉服务器在运行完成 后做什么,此片触发updatePage函数
xmlHttp.onreadystatechange = updatePage;
// 发送请求
xmlHttp.send(null);
}
//处理服务器响应
function updatePage()
{
if(4==xmlHttp.readyState)
{
var response = xmlHttp.responseText;
document.getElementById("zipCode").value = response;
}
}
// 创建XMLHttpRequest对象
createXMLHttpRequest();
</script>
</head>
<body>
<form>
<p>城市:<input type="text" name="city" id="city" size="25" onchange"callServer();"></p>
<p>国家:<input type="text" name="state" id="state" size="25" onchange"callServer();"></p>
<p>代号:<input type="text" name="zipCode" id="zipCode" size="5"></p>
</form>
</body>
</html>