Ajax小结

1、什么是ajaxW3School中给ajax的定义是:

  1、AJAX = 异步 JavaScript 和 XML。

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

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

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

  通俗的讲,AJAX就是JS通过一个网址去加载数据,这个过程通常是用户不可见的。使用ajax的能够异步加载数据,及时验证数据,不需要刷新整个页面(有时会局部加载),进而能提高用户体验并且节省流量

1、基本API:new XMLHttpRequest()、open()、send()、onreadystatechange()、responseText()

  ①:使用ajax之前必须要创建一个对象,要用到new XMLHttpRequest()。

  var xhr = new XMLHttpRequest();

  值得一提的是,在老的浏览器(比如IE6、IE5)中并不支持XMLHttpRequest()对象。在老浏览器 中,XHR(XMLHttpRequest的缩写,下面的都是指该对象)对象是通过MSXML库中的一个ActiveX对象实现的。为了兼容模式,我们可以这样子去创建XMLHttpRequest对象。

  if (window.XMLHttpRequest){       //如果浏览器支持该对象

  var xhr = new XMLHttpRequest();

  }else{

  var xhr = new ActiveXObject("Msxml2.XMLHTTP");   //如果是低版本浏览器

  }

  在IE 中可能会遇到三种不同版本的XHR 对象,即MSXML2.XMLHttp、MSXML2.XMLHttp.3.0 和MXSML2.XMLHttp.6.0。

  ②:创建好xhr对象后,接下来就是要使用该对象,就要调用到一个方法:open();

  它接受3 个参数:要发送的请求的类型("get"、"post"等)、请求的URL 和表示是否异步发送请求的布尔值。下面就是调用这个方法的例子。

  xhr.open("get", "example.php", true);

  这行代码会启动一个针对example.php 的GET 请求,调用open()方法并不会真正发送请求,而只是启动一个请求以备发送。一般情况下布尔值为true,表示需要异步发送请求。发送工作准备就绪后调用send();方法发送请求。

  xhr.send(null);

  send方法接受一个参数,作为请求主体发送的数据。如果不需要通过请求主体发送数据,则必须传入null,因为这个参数对有些浏览器来说是必需的。对于get的请求类型,是不需要发送数据的,所以只需要传入null,如果是post的请求类型,则必须传入数据。

  ③:调用send()之后,请求就会被分派到服务器。由于这次请求是同步的,JavaScript 代码会等到服务器响应之后再继续执行。在收到响应后,响应的数据会自动填充XHR对象的属性,相关的属性简介如下。

    responseText:作为响应主体被返回的文本。

    responseXML:如果响应的内容类型是"text/xml"或"application/xml",这个属性中将保存包含着响应数据的XML DOM 文档。

    status:响应的HTTP 状态。

    statusText:HTTP 状态的说明。

    当status为200到300或者304的时候,表明响应返回成功。(详细可以见HTTP状态码及文字说明)。同时xhr对象有个readyState 属性,该属性表示请求/响应过程的当前活动阶段。这个属性可取的值如下。  

     0:未初始化。尚未调用open()方法。
     1:启动。已经调用open()方法,但尚未调用send()方法。
     2:发送。已经调用send()方法,但尚未接收到响应。
     3:接收。已经接收到部分响应数据。
     4:完成。已经接收到全部响应数据,而且已经可以在客户端使用了。

    只要readyState 属性的值由一个值变成另一个值,都会触发一次readystatechange 事件。可以利用这个事件来检测每次状态变化后readyState 的值。通常,我们只对readyState 值为4 的阶段感兴趣,因为这时所有数据都已经就绪。代码表示以下:

    xhr.onreadystatechange = function (){         //当xhr对象触发readystatechange 事件时

      alert(ajax.readyState);          //测试readyState 属性的值

      if (xhr.readyState == 4){      //当readyState等于4说明数据接收完成

      if (xhr.status >= 200 && xhr.status < 300 ||xhr.status == 304){//响应返回成功,并且将返回值传给了responseText属性,responseText内容类型正确

        alert(xhr.responseText);                      //弹出xhr对象responseText属性的值

      }else{

        alert(xhr.statusText);                   //如果不成功,则弹出错误HTTP状态说明
        }
      }
    }

以上就是一个完整的pet请求类型的ajax使用方法,整理代码如下:

  if (window.XMLHttpRequest){       //如果浏览器支持该对象

    var xhr = new XMLHttpRequest();  //创建对象

  }else{

    var xhr = new ActiveXObject("Msxml2.XMLHTTP");   //如果是低版本浏览器

  }

  xhr.open("get", "example.php", true);

  xhr.send(null);

  xhr.onreadystatechange = function (){         //当xhr对象触发readystatechange 事件时

      alert(ajax.readyState);          //测试readyState 属性的值

      if (xhr.readyState == 4){      //当readyState等于4说明数据接收完成

      if (xhr.status >= 200 && xhr.status < 300 ||xhr.status == 304){   //响应返回成功,并且将返回值传给了responseText属性,responseText内容类型正确

        alert(xhr.responseText);                      //弹出xhr对象responseText属性的值

      }else{

        alert(xhr.statusText);                   //如果不成功,则弹出错误HTTP状态说明
        }
      }
    }

下面简单说一下post请求类型与get不同的地方:

  首先,open()方法中第一个参数传入的是post,就可以初始化一个post请求。

    xhr.open("get", "example.php", true);

  然后将Content-Type 头部信息设置为application/x-www-form-urlencoded,也就是表单提交时的内容类型

  接着向post发送请求的send()方法传入数据,这是必须的。

代码不在赘述,除了下面部分做修改大概相同。

  xhr.open("post", "example.php", true);

  xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

  xhr.send(data);



2、 Ajax的优缺点

(1)ajax的优点:

1、最大的一点是页面无刷新,在页面内与服务器通信,给用户的体验非常好。

  2、使用异步方式与服务器通信,不需要打断用户的操作,具有更加迅速的响应能力。

  3、可以把以前一些服务器负担的工作转嫁到客户端,利用客户端闲置的能力来处理,减轻服务器和带宽的负担,节约空间和宽带租用成本。并且减轻服务器的负担,ajax的原则是按需取数据,可以最大程度的减少冗余请求,和响应对服务器造成的负担。

  4、基于标准化的并被广泛支持的技术,不需要下载插件或者小程序。


(2)ajax的缺点:

  1ajax干掉了back按钮,即对浏览器后退机制的破坏。后退按钮是一个标准的web站点的重要功能,但是它没法和js进行很好的合作。这是ajax所带来的一个比较严重的问题,因为用户往往是希望能够通过后退来取消前一次操作的。那么对于这个问题有没有办法?答案是肯定的,用过Gmail的知道,Gmail下面采用的ajax技术解决了这个问题,Gmail下面是可以后退的,但是,它也并不能改变ajax的机制,它只是采用的一个比较笨但是有效的办法,即用户单击后退按钮访问历史记录时,通过创建或使用一个隐藏的IFRAME来重现页面上的变更。(例如,当用户在Google Maps中单击后退时,它在一个隐藏的IFRAME中进行搜索,然后将搜索结果反映到Ajax元素上,以便将应用程序状态恢复到当时的状态。)

但是,虽然说这个问题是可以解决的,但是它所带来的开发成本是非常高的,和ajax框架所要求的快速开发是相背离的。这是ajax所带来的一个非常严重的问题。

 2安全问题

技术同时也对IT企业带来了新的安全威胁,ajax技术就如同对企业数据建立了一个直接通道。这使得开发者在不经意间会暴露比以前更多的数据和服务器逻辑。ajax的逻辑可以对客户端的安全扫描技术隐藏起来,允许黑客从远端服务器上建立新的攻击还有ajax也难以避免一些已知的安全弱点,诸如跨站点脚攻击、SQL注入攻击和基于credentials的安全漏洞等。

  3对搜索引擎的支持比较弱。

  4破坏了程序的异常机制。至少从目前看来,ajax.dllajaxpro.dll这些ajax框架是会破坏程序的异常机制的

5、违背了url和资源定位的初衷。例如,我给你一个url地址,如果采用了ajax技术,也许你在该url地址下面看到的和我在这个url地址下看到的内容是不同的。这个和资源定位的初衷是相背离的。

  6一些手持设备(如手机、PDA等)现在还不能很好的支持ajax,比如说我们在手机的浏览器上打开采用ajax技术的网站时,它目前是不支持的。

 


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

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值