ajax初步认识

       在广州朋友“明明”的影响下,对ajax页面数据异步传输(页面无刷新)技术有了兴趣,由于市面上相关的资料比较少,出版物更是几乎等于0,使ajax技术更是蒙上了神秘的面纱,至少对于我来说是.在经过了浏览ajax技术的网站以及在csdn的ajax中与大家探讨,终于知晓了ajax技术的原理.在此与大家一起分享。

       web程序要与桌面应用程序的最大区别在与响应的速度与事件的捕捉上,传统的web页面在点击按钮或者链接的时候,就会整个页面进行刷新,当然采用预先载入并使用javascript技术可以实现有限数据的无刷新动态变换,但这并不是真正的无刷新解决办法,因为要预先载入那些可能始终都用不到的数据,会使得传输的速度缓慢并极大的浪费网络资、内存资源。而ajax技术就是为了解决这类问题的而诞生的,ajax技术允许只对页面的某些部分进行动态更新,需要时只是向服务器取需要的数据而不是把整个页面数据进行传输和刷新,这样可以创造更人性化的界面。

       ajax技术其实并不是什么新东西,而是以前的技术的新的整合,它采用的是javascript技术+xmlhttprequest技术+DOM技术+CSS技术+XML技术等,呵呵,别看这么复杂,其实在应用上还是比较简单的,这种技术是与服务器语言无关的,因为采用了XML技术,所以,它可以与任何服务器与编程语言进行通讯,XML真的是一个很好的技术和标准。ajax重点提出的是数据异步传输,从我个人的理解来说,我觉得应该理解为是动态数据与页面数据异步传输,从而做到了页面数据在后台异步动态数据的更新下无刷新地更新。

       可能说到现在,大家对ajax究竟有多少好处还是很模糊吧,那就举个例子,假如你在做一个电子商务网站,做分类的时候,一个大分类下边有许多小分类,小分类下边有很多商品,假如商品的数目超过10000种,并时常更新,要做到动态刷新列表的一往做法是,选择大类后刷新整个页面后载入小分类,然后选择小分类后又刷新整个页面后载入商品名单,频繁的整页刷新很不人性化,如果本身页面的图片很多的时候,就会导致页面的缓慢并产生服务器压力。有的人可能会说,那我先把所有的大分类、小分类、商品全部载入,然后用javascript控制选择,但有没有想过当商品和分类有10万、100万的时候呢?这样做只能在数据有限的情况下采用,并且是一种不考虑程序运行效率的做法,采用ajax技术就可以做到,选择大类后,不刷新整个页面,小类数据从后台悄悄载入,选择小类后,商品数据悄悄从后台进入,整个过程页面始终保持不刷新,但其实页面数据已经刷新了2次。

       说到ajax技术,业内推崇的采用此技术最完美的应用就是google maps,大家可以搜索一下,真的是非常棒的东西。

    说到ajax不得不说到XMLHttpRequest对象,应为没有他,这个技术就没有实现的可能,从csdn中了解到,XMLHttpRequest其实不是一个W3C标准,IE判定XMLHttpRequest对象为ActiveX对象,有的其他浏览器认为XMLHttpRequest对象是一个本地javascript对象。创建XMLHttpRequest对象其实很简单:
    <script type="text/javascripr">
    var XHRequest
    function creat()
    {
        if(window.activeXobject)
        {
             XHRequest = new ActiveXObject("microsoft.XMLHTTP");
        }
        else        { 
             XHRequest = new XMLHttpRequest();
        }
    }
    </script>

    XMLHttpRequest对象的方法:
    abort():停止当前请求
    getallResponseheaders():把http请求的所有响应首部作为键/值对返回
    getResponseheader("header"):返回指定手部的串值
    open("method","url"):建立对服务器的调用。method指get、post,url指相对或者绝对url地址
    send(content):象服务器发送请求。
    setRequestHeader("header","value"):把指定首部设置为提供的值。

    XMLHttpRequest对象的属性:
    onreadystatechange:状态改变事件处理器,通常调用javascript函数。
    readystate:请求的状态(0:未初始化,1:正在加载,2:已加载,3:交互中,4:完成)
    responsetext:服务器响应的一个字符串
    respon***ML:服务器响应的XML格式,可直接解析为DOM对象
    status:服务器的http状态(200:正常连接,404:未找到.......)
    statusText:status的相应文本。

    还有一个不得不提的html元素的innerhtml属性
    从服务器响应过来的数据就靠他写到我们的客户端里产生动态插入。这是一个DOM对象,相关的书籍和资料很多,自己看一下吧。可以简单的把服务器的异步数据弄成一个txt文本文件,里边写点东西,随便写什么都可以,呵呵,自己去想一想吧,我想已经不算太难了,其实弄成XML文件插入http标记就可以实现页面上所能想到的功能,真的太感谢XML了。

    有了这些方法和属性和DOM的innerhtml属性,你该对ajax有初步的了解了吧,呵呵,看着这些属性和方法,我起初也是兴奋异常,特别是readystate属性,可以实现的动态效果是我梦想多年的,哈哈哈哈。手酸了,最近太忙,主页的更新速度也明显放慢了,等空下来,我会多写点文章与大家交流的,写得不好或者不对的地方,还请大家提出来,我的学识还粗浅的很,写文章的目的无非就是总结自己所学的东西。呵呵~~~~~~~~~~~~~
    
    好了,有空多到我的主页上来走走,http://www.314p.com,呵呵,有什么新的技术和好的文章也到这里来帖吧,我会很感激的。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值