AJAX详解

本文详细介绍了AJAX技术如何实现快速动态网页更新,与浏览器的同步和异步交互机制的区别,以及XMLHttpRequest对象在AJAX中的核心作用。通过对比传统同步方式的缺点,展示了异步交互带来的优势,如减轻网络负载、提高用户体验。
摘要由CSDN通过智能技术生成

AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。

AJAX=异步 JavaScript和XML。

AJAX是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换,AJAX可以使网页实现异步更新。这意味着可以在不重新加载整个网页的基础上对网页的部分进行更新。

传统的网页(不使用AJAX)如果需要更新内容,必须重载整个网页页面。

接下来详细介绍一下浏览器的同步和异步。

1.浏览器的同步


1.1说明

1、这是一个非常典型的浏览器同步交互图

2、步骤如下:

1、客户发出HTTP请求

2、服务器接受客户的请求并处理客户的请求

3、服务器响应客户的请求,返回客户所需要的页面

3、缺点:

1、每一次客户提交请求的时候,提交的是整个页面。也就是说不管这个页面的数据量大小,都要经过网络的传输。这样给网路造成了数据的压力。

2、在每次客户提交请求的时候,因为要提交整个数据,所以就要刷新整个页面。这样的情况对于用户的交互性来说是很不好的。因为一提交以后用户当前的页面就成了白板,用户所做的事情只能是等待等待再等待。

3、在每次进行提交请求的时候,用户有可能让服务器处理的数据很少,比如说163邮件系统的登录,服务器端实际上只需要用户名和密码就可以了,没有必要把其他的数据也传到服务器上。但是同步是做不到这点的。

4、特别是在管理系统中,这些系统对客户界面的友好型要求是比较高的,而同步交互是不满足这样的特点的。


2.浏览器的异步交互


1说明

1、这是一个非常典型的浏览器异步交互图

2、从图上可以看出来,客户端没有再发送http请求,而是用JavaScript调用一个叫Ajax engine来发送数据,所以不用提交整个页面。

3、从返回来看,返回的也不再是客户需要的页面,而是客户需要的数据。

4、有点:

1、不用提交整个页面,而是用JavaScript提交具体的数据,这样就使一些没有必要在网络上传输的数据不用传输了。

2、因为只提交数据,所以每天提交请求的数据库不是很大,这样可以减轻网络传输数据的压力。

3、由于不用刷新整个页面,所以即便提交以后,展现在客户面前的页面还是不会消失的,这样对于客户的交互性特别好。

3 Ajax

3.1、ajax的产生

Ajax(Asynchronous JavaScript and Xml)。现在,允许浏览器与服务器通信而无须刷新当前页面的技术都被叫做Ajax。

Ajax:(Asynchronous JavaScript and Xml)并不是一项新技术,其实是多种技术的综合,包括JavaScript、XHTML 和 CSS、DOM、XML 和XMLHTTPRequest

* 服务器端语言:服务器需要具备向浏览器发送特定信息的能力。Ajax与服务器端语言无关。

* XML(eXtensible Markup Lanuage,可扩展标记语言)是一种描述数据的格式。Ajax程序需要某种格式化的格式来在服务器和客户端之间传递信息,XML就是其中的一种选择。

* XHTML(eXtended Hypertext Markup Language,使用扩展超媒体标记语言)和CSS(Cascading Style Sheet,级联样式单)标准化呈现;

* DOM(Document Object Model,文档对象模型)实现动态显示和交互;

* 使用XMLHTTP组件XMLHTTPRequest对象进行一步数据读取

* 使用JavaScript绑定和处理所有数据

3.2ajax的核心 XmlHttpRequest

该对象是对JavaScript的一个扩展,可使网页与服务器进行通信。是创建Ajax应用的最佳选择。实际上通常把Ajax当成XMLHttpRequest对象的代名词。该对象在Internet Explorer 5 中首次引入,它是一种一步请求的技术。简而言之,XMLHttpRequest使自己可以使用JavaScript向服务器提出请求并处理响应,而不阻塞用户。

XMLHttpRequest是XMLHTTP组件的对象,通过这个对象,AJAX可以像桌面应用程序一样只同服务器进行数据层面的交换,而不用每次都刷新界面,也不用每次将数据处理的工作都交给服务器来做;这样既减轻了服务器负担又加快了响应速度、缩短了用户等待的时间。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值