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