Ajax工作原理是什么?怎样实现?

XIAO 2020-03-24 14:44:42 java常见问答 6801

时至今日,互联网可谓是深入人们日常生活的点点滴滴,但是不知大家有没有注意到我们平时在刷新网页的时候,有这样的一种效果,局部刷新,点刷哪刷新哪,十分智能的感觉,其实这就运用了Ajax ,那么Ajax 工作原理是什么?怎样实现一个Ajax 效果呢?

Ajax的工作原理相当于在用户和服务器之间加了—个中间层,使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器,像—些数据验证和数据处理等都交给Ajax引擎自己来做, 只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。

一句话:Ajax其实就是使用XMLHttpRequest对象的属性和方法。

同步:

request--->response

发送一条请求后,一直等待结果。

异步:

Ajax

发送一条请求后,不会一直等待结果,而是有了结果再去拿。

Ajax的作用

1、可以异步刷新。(在用户没有察觉的情况下,偷偷的和服务器进行通信)

2、可以节约流量。(局部刷新---只请求某一部分数据)

3、提高用户体验。

话不多说,下面就是向大家介绍如何使用Ajax实现异步效果:

1、创建XMLHttpRequest对象。

function createXMLHttpRequest(){

//声明一个变量,来保存XMLHttpRequest对象

var ajax = null;

try{

//这个对象只能在google和火狐等主流浏览器使用,IE不支持

ajax = new XMLHttpRequest();

}catch(e){

try{

//这个对象可以支持IE其它版本

ajax = new ActiveXObject("Msxml2.XMLHTTP");

}catch(e){

try{

//这个对象可以支持IE5、IE6

ajax = new ActiveXObject("Microsoft.XMLHTTP");

}catch(e){}

}

}

return ajax;

}

2、注册监听

ajax.onreadystatechange = function(){

//判断准备状态

if(ajax.readyState == 4){//4:和服务器建立好链接了

if(ajax.status == 200){//200表示服务器响应成功

var data = ajax.responseText;

}

}

}

3、建立连接

ajax.open("GET","",true);

4、发送请求

ajax.send(null);//GET请求方式

如此,在我们触发相关需要异步效果的方法时,一个简单的Ajax 效果就出来了。以上就是有关于Ajax 全部内容了,还想了解更多相关知识,关注本站即可。