• Ajax+PHP实现动态无刷新技术


    据介绍通达OA 短信、在线人员、邮件检查机制,全部采用无刷新技术。我分析后通达用的是Ajax技术。Ajax是多种技术的综合,是一种动态的可以实现WEB页面局部刷新的技术。

    Ajax的基本原理

    Ajax实现的web交互效果跟传统的大不相同,它通过Ajax 引擎,使得应用过程很自然,操作很流畅,因为其只和服务器交换有用的数据,而页面显示等不必要的数据则不再重新加载。Ajax 引擎其实就是JavaScript、XML、XMLHttpRequest等等各项技术的综合应用。

    Ajax技术组成:

    1.标准化呈现:XHTML、CSS

    2.动态显示和交互:DOM

    3.数据交换和处理:XML、XSLT

    4.粘合剂:JavaScript,

    Ajax的优点:

    1.减轻服务器端负担,“按需取数据”。

    2.无刷新更新页面。

    3.带来更好的用户体验。

    4.充分利用客户端闲置的运算能力。

    5.进一步促进呈现和数据的分离。

    6.完全基于标准化的技术实现,无须下载小程序或插件。

    7.浏览器无关(IEownload, XML island)

    Ajax适用的场景:

    1.表单驱动的交互

    2.深层次的树的导航

    3.快速的用户与用户间的交流响应

    4.类似投票、yes/no等无关痛痒的场景

    5.对数据进行过滤和操纵相关数据的场景

    6.普通的文本输入提示和自动完成的场景

    Ajax不适用的场景:

    1.部分简单的表单

    2.搜索不能back(使用IFrame)

    3.基本的导航

    4.替换大量的文本

    5.对呈现的操纵

    Ajax应用存在的问题:

    1.用JavaScript作的Ajax引擎,JavaScript的兼容性和debug都是让人头痛的事。

    2.Ajax的无刷新重载,由于页面的变化没有刷新重载那么明显,所以容易给用户带来困扰。

    3.中间过程不能被bookmark。(两个方法解决)

    使用WEB标准开发:

    1.系统现状对应用的自适应性和市场拓展都有阻碍。

    2.完全采用符合web标准的方式来开发web层,以支持所有的市场上流行的浏览器,达到很高的可用性。

    3.包括使用XHTML,CSS(完全布局),Ajax等标准化技术。(结构/展现/行为完全分离)

    4.使用Firefox作为开发环境,浏览器移植问题就会得到解决。

    AJAX全称为“Asynchronous JavaScript and XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。它有机地包含了以下几种技术:

    Ajax(Asynchronous JavaScript + XML)的定义:基于web标准(standards-based presentation)XHTML+CSS的表示; 使用 DOM(Document Object Model)进行动态显示及交互;使用 XML 和 XSLT 进行数据交换及相关操作; 使用 XMLHttpRequest 进行异步数据查询、检索; 使用 JavaScript 将所有的东西绑定在一起。

    类似于DHTML或LAMP,AJAX不是指一种单一的技术,而是有机地利用了一系列相关的技术。事实上,一些基于AJAX的“派生/合成”式(derivative/composite)的技术正在出现,如“AFLAX”。

    AJAX的应用使用支持以上技术的web浏览器作为运行平台。这些浏览器目前包括:Mozilla、Firefox、Internet Explorer、Opera、Konqueror及Safari。但是Opera不支持XSL格式对象,也不支持XSLT。

    Ajax技术的核心

    Ajax其核心只有JavaScript、XMLHTTPRequest和DOM,如果所用数据格式为XML的话,还可以再加上XML这一项(Ajax从服务器端返回的数据可以是XML格式,也可以是文本等其他格式)。

    在旧的交互方式中,由用户触发一个HTTP请求到服务器,服务器对其进行处理后再返回一个新的HTHL页到客户端,每当服务器处理客户端提交的请求时,客户都只能空闲等待,并且哪怕只是一次很小的交互、只需从服务器端得到很简单的一个数据,都要返回一个完整的HTML页,而用户每次都要浪费时间和带宽去重新读取整个页面。而使用Ajax后用户从感觉上几乎所有的操作都会很快响应没有页面重载(白屏)的等待。

    1.XMLHTTPRequest

    Ajax的一个最大的特点是无需刷新页面便可向服务器传输或读写数据(又称无刷新更新页面),这一特点主要得益于XMLHTTP组件XMLHTTPRequest对象。这样就可以向再发桌面应用程序只同服务器进行数据层面的交换,而不用每次都刷新界面也不用每次将数据处理的工作提交给服务器来做,这样即减轻了服务器的负担又加快了响应速度、缩短了用户等候时间。

    最早应用XMLHTTP的是微软,IE(IE5以上)通过允许开发人员在Web页面内部使用XMLHTTP ActiveX组件扩展自身的功能,开发人员可以不用从当前的Web页面导航而直接传输数据到服务器上或者从服务器取数据。这个功能是很重要的,因为它帮助减少了无状态连接的痛苦,它还可以排除下载冗余HTML的需要,从而提高进程的速度。Mozilla(Mozilla1.0以上及NetScape7以上)做出的回应是创建它自己的继承XML代理类:XMLHttpRequest类。Konqueror (和Safari v1.2,同样也是基于KHTML的浏览器)也支持XMLHttpRequest对象,而Opera也将在其v7.6x+以后的版本中支持XMLHttpRequest对象。对于大多数情况,XMLHttpRequest对象和XMLHTTP组件很相似,方法和属性也类似,只是有一小部分属性不支持。

    2.JavaScript

    JavaScript是一在浏览器中大量使用的编程语言,,他以前一直被贬低为一门糟糕的语言(他确实在使用上比较枯燥),以在常被用来作一些用来炫耀的小玩意和恶作剧或是单调琐碎的表单验证。但事实是,他是一门真正的编程语言,有着自已的标准并在各种浏览器中被广泛支持。

    3.DOM

    Document Object Model。 DOM是给 HTML 和 XML 文件使用的一组 API。它提供了文件的结构表述,让你可以改变其中的內容及可见物。其本质是建立网页与 Script 或程序语言沟通的桥梁。所有WEB开发人员可操作及建立文件的属性、方法及事件都以对象来展现(例如,document 就代表“文件本身“这个对像,table 对象则代表 HTML 的表格对象等等)。这些对象可以由当今大多数的浏览器以Script 来取用。一个用HTML或XHTML构建的网页也可以看作是一组结构化的数据,这些数据被封在DOM(Document Object Model)中,DOM提供了网页中各个对象的读写的支持。

  • 相关阅读:
    2020前端学习路线 之完结篇
    axios 请求超时,设置重新请求的完美解决方法
    如何终止前端发起的请求?
    轮询与长轮询
    最全React技术栈技术资料汇总(收藏)
    React 服务端渲染完美的解决方案
    将数组格式的字符串转换成数组
    Cannot read property 'map' of undefined
    计算机编码方式简介
    python01之文件处理
  • 原文地址:https://www.cnblogs.com/freespider/p/2442138.html
Copyright © 2020-2023  润新知