ajax的基本原理

Original 2016-11-12 11:46:30 393
abstract:一. ajax的简介  ajax 的全称是Asynchronous(异步的意思) JavaScript and XML,是一种创建交互式网页应用的网页开发技术  ajax技术的流行得益于google的大力推广,正是由于google产品对ajax技术的广泛应用,使得ajax流行起来了。  ajax其核心有JavaScript、XMLHTTPRequest、DOM对象组成,通过XMLHttpReque

一. ajax的简介

  ajax 的全称是Asynchronous(异步的意思) JavaScript and XML,是一种创建交互式网页应用的网页开发技术

  ajax技术的流行得益于google的大力推广,正是由于google产品对ajax技术的广泛应用,使得ajax流行起来了。

  ajax其核心有JavaScript、XMLHTTPRequest、DOM对象组成,通过XMLHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用JavaScript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。

  XMLHttpRequest是ajax的核心机制,它是在IE5中首先引入的,是一种支持异步请求的技术。简单的说,也就是js可以及时向服务器提出请求和处理响应,而不阻塞用户。达到无刷新的效果。下面来看一下ajax的请求步骤。

二.ajax的请求步骤

  1、创建异步对象

    Var ajax=new XMLHttpRequest();

  2、注册回调函数

    ajax.onreadystatechange=callback;

    要注意的是callback不能写成callback(),我们是想把方法名告诉onreadystatechange这个属性,如果加了括号,就相当于把返回值告诉了onreadystatechange属性。

  3、使用open方法设置和服务器端交互的基本信息

    1.)GET方式交互

    ajax.open("GET","AJAX?name=" + userName,true);

    2.)POST方式交互

    ajax.open("POST","AJAX",true);

  4、设置发送的数据,开始和服务器端交互

    1.)GET方式

   ajax.send(null);

    2.)POST方式

   ajax.send("name=" + userName);

  5、更新界面

    在回调函数中判断交互是否结束,响应是否正确,并根据需要获取服务器返回的数据,并更新页面

      array.push(ajax.readyState);  //判断和服务器端的交互是否完成,还要判断服务器端是否正确返回了数据

      if(ajax.readyState == 4 && ajax.status == 200){  //第一个判断条件是表示和服务器端的交互已经完成,第二个判断条件是服务器的是响应代码是200,正确返回了数据

      var message=ajax.responseText;  //XML数据对应的DOM对象的接受方法,使用的前提是,服务器端需要设置contenttype为text/xml

      var div=document.getElementById("message");

        div.innerHTML=message;  //将获取的xml数据添加到页面上

        console.log(array)

   }

三.ajax的优点

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

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

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

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

四.ajax的缺点

  1、ajax干掉了浏览器的back按钮,对浏览器后退机制的破坏。

  2、安全问题,ajax技术就如同对企业数据建立了一个直接通道,暴露出请求的接口的数据.

  3、对搜索引擎支持的不友好.

  4、破坏了程序的异常机制,如果程序抛出异常,对调试带来不方


Release Notes

Popular Entries