微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

什么是AJAX

【AJAX】:Asynchronous JavaScript + XML。
AJAX不是一个新的技术,而是几种老的技术的组合。
◆ XHTML + CSS 负责表示层的展现。
◆ Document Object Model 文档对象模型,负责动态显示和交互。
◆ XML + XSLT 负责数据互换和操作。
◆ XMLHttpRequest 负责异步获取数据。
◆ JavaScript 负责结合以上所有技术。
AJAX是一种运用于浏览器中的技术,使用ALAX技术的应用程序独立于浏览器。

问题1:使用AJAX技术开发Web应用与传统技术有何不同?

可以看出,主要的差别是采用了XMLHttpRequest来向服务器异步的请求XML数据。

问题2:使用AJAX技术开发Web应用与传统技术相比,用户体验有何不同?


用传统技术开发的Web应用,用户的体验如下:点击—>等待新页面—>看到新页面—>再点击......。
而采用AJAX技术可以使用异步数据进行转换,并且可以向服务器索取少量信息而非整个网页,所以用户无须等待返回结果就可以进行下一步操作,并且由于不是重新下载整个页面,响应速度也好很多。


问题3:请给一个简单的例子
<SCRIPT LANGUAGE="JavaScript">
var xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
xmlHttp.open("GET","http://www.blogjava.net/zbw25/Rss.aspx",true);
xmlHttp.onreadystatechange=function() {
if (xmlHttp.readyState==4) {
alert(xmlHttp.responseText);
}
}
xmlHttp.send();
</SCRIPT>


代码说明:



  1. xmlHttp 是一个指向浏览器内置的XMLHttpRequest对象的实例。
  2. XMLHttpRequest的open方法
    第1个参数,表示以GET的方式向服务器提交我们的HTTP请求,当然也可以选择POST的方式。HTTP请求共有7 种, 另外五种是HEAD、PUT、DELETE、OPTIONS、TRACE。
    第2个参数是一个URL,表示我们打算GET的内容所谓的网络地址。
    第3个参数就神奇了,true就代表着,我们打算提交的是一个异步的XMLHTTP请求。因为是异步提交请求,所以当浏览器执行到这一行的时候,其实并没有干什么事。要等到执行到调用XMLHttpRequest的send()方法的时候,才会真正的发出XMLHTTP请求。
  3. XMLHttpRequest对象的readyState 状态说明。
    0 未初始化 对象已创建,尚未调用open()
    1 已初始化 调用open()方法以后。
    2 发送数据 调用send()方法以后。
    3 数据传送中 已经接收到部分数据,但尚未接收完成。
    4 完成 数据全部接收完成。
  4. XMLHttpRequest对象的status 状态说明
    200 代表服务器端返回的是正确的结果。
  5. 事件以及处理事件的函数句柄。
    每当readyState的值发生改变时,就产生了一个事件。我们可以选择在事件产生以后,如何处理。这个处理的函数,我们必须告诉这个XMLHttpRequest对象。将这个函数的句柄,在JavaScript中也就是这个函数名称,赋值给XMLHttpRequest对象中的onreadystatechange就可以了。(注:这里其实是创建了一个匿名的函数,JavaScript支持匿名函数。onreadystatechange只是属性名称,而不是函数名称函数在JavaScript中是第一等的对象,可以赋值给任何变量。)
  6. XMLHttpRequest在正确读取了数据之后,有四种方法可以得到这个数据。
    1. responseText 将响应信息作为字符串返回。
    2. responseXML 将响应信息格式化为XMLDOM对象并返回。
    3. responseBody 将响应信息以unsigned byte数组的形式返回。
    4. responseStream 将响应信息以IStream对象的形式返回。
    开发AJAX应用的主要工作,就是在浏览器客户端与服务器端之间,传递各种XML数据。如果要自己读取String数据,然后再全部自己手工解析XML,那就会非常复杂;而使用responseXML,就可以直接得到一个已经解析好了的XML DOM,这样就很方便了。
  7. XMLDOM相关API

问题4:当前使用AJAX技术开发的网站有哪些?
*Orkut
*Gmail
*Google Groups
*Google Suggest
*Google Maps

原文地址:https://www.jb51.cc/ajax/166701.html

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐