首页 > 代码库 > AJAX-XMLHttpRequest的认识

AJAX-XMLHttpRequest的认识

     上篇博文中说到我们在进行百度搜索的时候,不需要刷新整个网页,技术支持在哪就是它-XMLHttpRequest。

      XMLHttpRequest对象可以再不向服务器提交整个页面的情况下,实现局部更新网页。当网页全部加载完毕后,客户端通过该对象向服务器请求数据,服务器接受数据并处理后,向客户端反馈数据。这样我们可以联想一下百度搜索引擎,原来是这货在搞怪。  

      目前XMLHttpRequest对象已经得到了大部分浏览器的支持,因此使用Ajax技术开发Web应用程序的时候一般情况下不会出现问题。

     不过,当开发人员确定使用Ajax技术来开发时,仍然需要考虑用户会使用什么样的浏览器来对网站进行访问,虽然不支持XMLHttpRequest对象的浏览器占少数。
     在使用XMLHttpRequest对象向服务器发送请求和处理响应之前,必修先用JavaScript创建一个XMLHttpRequest对象,然后通过这个对象来和服务器建立请求并接收服务器返回的数据。由于XMLHttpRequest不是一个W3C标准,所以可以采用多种方法使用JavaScript来创建XMLHttpRequest的实例。Internet Explorer把XMLHttpRequest实现为一个ActiveX对象,其他浏览器(如Firefox、Safari和Opera等)把它实现为一个本地JavaScript对象。由于存在这些差别,JavaScript代码中必须包含有关的逻辑,从而使用ActiveX技术或者使用本地JavaScript对象技术来创建XMLHttpRequest的一个实例

     在这里仿佛语言都是很无力的,我来看看关于它的应用吧:

     下面是用户提交一个数据,用来查询是否存在的实例。通过传统web方式和AJAX方式的对比,更能显示出AJAX的优势。代码是ajax中html部分。传统版我就不贴了。

<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body>
        <input type="text" id="name"/>
        <input type="button" name="submit" onclick="submit()" value=http://www.mamicode.com/"AJAX校验"/>>用两张图片分别表示两者的不同之处。


最后贴几张图来对比一下传统和AJAX的区别吧。

页面端:


服务器端:


    说了这么多,AJAX的好处是:

    1、最大的一点是页面无刷新,在页面内与服务器通信,给用户的体验非常好。
    2、使用异步方式与服务器通信,不需要打断用户的操作,具有更加迅速的响应能力。
    3、可以把以前一些服务器负担的工作转嫁到客户端,利用客户端闲置的能力来处理,减轻服务器和带宽的负担,节约空间和宽带租用成本。并且减轻服务器的负担,ajax的原则是“按需取数据”,可以最大程度的减少冗余请求,和响应对服务器造成的负担。
    4、基于标准化的并被广泛支持的技术,不需要下载插件或者小程序。

    凡事都有利弊,我们先学好ajax的好处吧,坏处先保留。

AJAX-XMLHttpRequest的认识