ajax的基本原理

一. 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、破坏了程序的异常机制，如果程序抛出异常，对调试带来不方