本来在学习DRP,但是无意中发现所附资料中有一些參考书籍,当中就有一个关于Ajax的,看了看,挺好的,于是决定暂停一下DRP,再次学习一下Ajax。记得第一遍学习Ajax的时候认为真的是一团雾水,看了一遍视频,留下的预计也就仅仅剩下一团雾水了。

只是这都无所谓,用米老师的一句话说:这都非常正常。由于第一遍的“不懂”,才有了第二遍的“可能懂”。所以,这篇系列博客就这样生成了~希望也会对您有所帮助。

单说Ajax,好像非常高深的样子,并且看看百度百科的定义吧:

     AJAX即“Asynchronous Javascript+ XML ”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。怎么样,懂了吗?反正我是没有太懂~可是它真的就这么深奥吗?我认为不是的,看看以下这个定义你会不会理解吧。

我认为Ajax就是一门技术,更甚至能够称之为一种技巧,用来实现网页局部更新的技巧。还是不是非常懂?再来看吧,大家应该都用过Google
Map吧,当我放大或者缩小地图来找到须要查询的位置时,是不是须要刷新地图?但是假设不是用Ajax技术,我们须要刷新所有内容,这须要多大的功夫,性能上肯定是达不到最优,极easy出现--点击刷新后,会有漫长的等待,而且等待过程中页面空白的现象,这样的情况对于用户来说,是极不友好的;使用Ajax则能够让我们实现所需位置的局部更新,解决问题。

以下我就以基于Ajax技术的Google
Maps
应用模型为例,来说一说什么是Ajax,Ajax有什么作用。

基于Ajax技术的Google Maps应用模型主要包含上图五个层次:

1.client浏览器:就是用户使用的浏览器,我们通过浏览器来请求Webserver中的地图数据,显示我们所需的地图信息。界面例如以下:

2.Ajax引擎:它处于用户和server之间,它的任务就是实现页面无刷新的传递,消除网络交互过程中用户在得到反响之前仅仅能等待的缺陷。

3.GoogleMapsserver:在页面载入之后,显示从Google
Mapsserver中获取的地图数据。

4.Webserver:接受来自于浏览器的请求,经过分析处理,返回数据给浏览器。

5.数据库:存储对应的数据信息。

怎么样,看了这五个层次,对Ajax的作用有没有更为理解了?假设还不是非常理解,没有关系,以下我再来解释一下。

上面,我已经通过Ajax在Google Maps中的应用来说明其作用,以下,我再通过一种对照来说明其特性。

传统的网页(不使用AJAX)假设须要更新内容,必须重载整个网页面。这时若请求server信息或者server返回信息较少时,和使用Ajax后的效果对照可能不是非常明显;但是假设对于像上文中举例的Google
地图,它的数据信息量是相当之大的,假设不使用Ajax,可想像其会出现什么结果。

如今的网页(使用Ajax),通过在后台与server进行少量数据交换,AJAX能够使网页实现异步更新。这意味着能够在不又一次载入整个网页的情况下,对网页的某部分进行更新。

讲到这里,我们对于Ajax是什么,有什么作用的理解应该差点儿相同了。那么Ajax究竟是怎样实现异步更新的呢?我们相约在我的下一篇博客吧~

Ajax之旅(一)--什么是Ajax的更多相关文章

  1. 对jquery的ajax进行二次封装以及ajax缓存代理组件:AjaxCache

    虽然jquery的较新的api已经很好用了, 但是在实际工作还是有做二次封装的必要,好处有:1,二次封装后的API更加简洁,更符合个人的使用习惯:2,可以对ajax操作做一些统一处理,比如追加随机数或 ...

  2. 原生态AJAX详解和jquery对AJAX的封装

    AJAX: A :Asynchronous [eI`sinkrenes] 异步 J :JavaScript    JavaScript脚本语言 A: And X :XML 可扩展标记语言 AJAX现在 ...

  3. ajax学习笔记(原生js的ajax)

    ajax是一个与服务器端语言无关的技术,可以使用在任何语言环境下的web项目(如JSP,PHP,ASP等). ajax优点: 1) 页面无刷新的动态数据交互 2) 局部刷新页面 3) 界面的美观 4) ...

  4. 来了解一下Ajax是什么?Ajax的原理?Ajax与传统Web比较?Ajax的优缺点?Ajax的Post与Get比较

    一.什么是Ajax Ajax(Asynchronous Java and XML的缩写)是一种异步请求数据的web开发技术,对于改善用户的体验和页面性能很有帮助.简单地说,在不需要重新刷新页面的情况下 ...

  5. Ajax轮询——“定时的通过Ajax查询服务端”

    Ajax轮询——"定时的通过Ajax查询服务端". 概念: 轮询(polling):客户端按规定时间定时像服务端发送ajax请求,服务器接到请求后马上返回响应信息并关闭连接. 百闻 ...

  6. javascript AJAX简单原理及什么是ajax

    AJAX简单原理供初学者理解 AJAX的原理: Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用javascript来操作DOM而更新页面.这其 ...

  7. 客户端调用服务器端方法——ASP.NET AJAX(Atlas)、Anthem.NET和Ajax.NET Professional实现之小小比较

    前几天曾经发过一篇<ASP.NET AJAX(Atlas)和Anthem.NET——管中窥豹般小小比较>,Jeffrey Zhao说用ASP.NET AJAX中的UpdatePanel似乎 ...

  8. Ajax学习(一)——与Ajax的初次相识

        AJAX是"Asynchronous Javascript And XML"的缩写,从字面上解释是"异步JavaScript和XML"的简称. 它不是一 ...

  9. laravel基础课程---12、lavarel的ajax操作2(lavarel的ajax使用总结)

    laravel基础课程---12.lavarel的ajax操作2(lavarel的ajax使用总结) 一.总结 一句话总结: 比较简单:就是js请求ajax,然后控制器获取请求参数,返回数据即可 1. ...

随机推荐

  1. 李洪强iOS开发之-环信03_集成 SDK 基础功能

    李洪强iOS开发之-环信03_集成 SDK 基础功能 集成 SDK 基础功能 在您阅读此文档时,我们假定您已经具备了基础的 iOS 应用开发经验,并能够理解相关基础概念. SDK 同步/异步方法区分 ...

  2. javaweb学习总结(三十三)——使用JDBC对数据库进行CRUD

    一.statement对象介绍 Jdbc中的statement对象用于向数据库发送SQL语句,想完成对数据库的增删改查,只需要通过这个对象向数据库发送增删改查语句即可. Statement对象的exe ...

  3. SPRING IN ACTION 第4版笔记-第四章ASPECT-ORIENTED SPRING-003-Spring对AOP支持情况的介绍

    一. 不同的Aop框架在支持aspect何时.如何织入到目标中是不一样的.如AspectJ和Jboss支持在构造函数和field被修改时织入,但spring不支持,spring只支持一般method的 ...

  4. TYPE C PD测试板 UFP测试板

  5. 上海CEC大收购(包括华大九天)

    紫光收购展讯.锐迪科后,上海开始通过扶植CEC培育新势力,CEC已经收购上海澜起,即将收购amlogic.Ominivision,还在与marvell眉来眼去,此外华大九天已经移植上海,加上之前的上海 ...

  6. [CF 191C]Fools and Roads[LCA Tarjan算法][LCA 与 RMQ问题的转化][LCA ST算法]

    参考: 1. 郭华阳 - 算法合集之<RMQ与LCA问题>. 讲得很清楚! 2. http://www.cnblogs.com/lazycal/archive/2012/08/11/263 ...

  7. OSFM Tables

    OSFM - Oracle Shop Floor Management 1. (N) Shop Floor Manager > Lot Based Jobs (B: New) Status: U ...

  8. hadoop2.2编程:MRUnit——Test MaxTemperatureMapper

    继承关系1 1. java.lang.Object |__ org.apache.hadoop.mapreduce.JobContext |__org.apache.hadoop.mapreduce. ...

  9. Bootstrap中的less基础

    在线编译 因为 less 的语法毕竟相对简单,所以一些在线工具可以很轻松的做到.比如 http://less.cnodejs.net http://www.ostools.net/less  一般都有 ...

  10. remove all event handlers from a control

    The sample code below will remove all Click events from button1 public partial class Form1 : Form { ...