码迷,mamicode.com
首页 > Web开发 > 详细

AJAX小结

时间:2015-07-20 21:39:17      阅读:177      评论:0      收藏:0      [点我收藏+]

标签:

一、AJAX是什么

        AJAXAsynchronnous JavaScript And XML的缩写,由 HTML、JavaScript技术、DHTML 和 DOM 组成

        HTML用于建立Web表单并确定应用程序其他部分使用的字段;

        JavaScript 代码是运行 Ajax应用程序的核心代码,建立应用程序与服务器的通信;

        DHTML 或 DynamicHTML,用于动态更新表单。使用 div、span 和其他动态 HTML 元素来标记 HTML;

        DOM 文档对象模型用于处理 HTML 结构和服务器返回的 XML。

二、异步交互

        传统的web交互方式是同步的,即用户向HTTP服务器提交一个处理请求。接着,服务器端接收到请求后,进行处理,比如和数据库服务器进行数据信息交换。最后,服务器对请求进行响应,将结果返回给客户端,返回一个HTML在浏览器中显示,通常会有CSS样式丰富页面的显示效果。这是一条线的过程,用户要等待服务器的响应、处理、返回,等待过程中,页面显示的内容只能是空白。

        传统的web同步交互示意图:


 技术分享

         AJAX实现了异步交互、动态交互,首先要明白AJAX是属于JavaScript的一种技术。当用户填写表单时,JavaScript 代码捕获表单数据,用AJAX向服务器发送请求。同时用户屏幕上的表单也不会闪烁、消失或延迟。换句话说,JavaScript代码在幕后发送请求,用户甚至不知道请求的发出。也可以说,请求是异步发送的, 用户不用等待服务器的响应,可以继续输入数据、滚动屏幕和使用应用程序。 

          AJAX异步交互方式示意图:


 技术分享

三、知识点

技术分享

我把AJAX大概划了三大块:

1XMLHttpRequest对象是AJAX的核心技术,尤其是解决浏览器兼容性、跨域访问的问题。因为各家浏览器不能达成统一,所以在不同浏览器获得XMLHttpRequest对象需要采用不同的方法:

<span style="font-size:18px;">/*支持多种浏览器的方式创建 XMLHttpRequest 对象 */
var xmlHttp = false;
try {
  xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
  try {
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  } catch (e2) {
    xmlHttp = false;
  }
}
if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
  xmlHttp = new XMLHttpRequest();
}
</span>

2Dom文档对象模型

HTML是一种文本标记语言,浏览器页面,是由HTML标记文本、CSS样式、JavaScript代码合力组成。CSSJavaScript通常位于外部文件,浏览器和服务器交互时,是如何将事件、样式映射到文本标记的呢?这就是DOM树的作用了。

关于XML的理解还不成熟,请大家补充。

 



版权声明:本文为博主原创文章,未经博主允许不得转载。

AJAX小结

标签:

原文地址:http://blog.csdn.net/u010096526/article/details/46973111

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!