php ajax工作原理,AJAX实现页面无刷新操作原理解析

摘要：ajax 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML)，是指一种创建交互式网页应用的网页开发技术。它是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

1、什么是ajax？

ajax 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML)，是指一种创建交互式网页应用的网页开发技术。它是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

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

也可以理解为ajax是网页前台与服务器后台进行少量数据交换的桥梁工具。

2、ajax如何实现异步加载

先来看ajax的实现代码，然后解释

jquery中ajax的使用，在jquery中有3种方式可以实现ajax

①$.get()

var url='http://www.test.com';

var data={'param1':'val1''param2':'val2',}

var success= function(e){

console.log(e);

}

$.get(url,data,success);

②$.post()

var url='http://www.test.com';

var data={'param1':'val1''param2':'val2',}

var success= function(e){

console.log(e);

}

$.post(url,data,success);

③$.ajax()

var url='http://www.test.com';

var data={'param1':'val1''param2':'val2',};

var type='post';

$.ajax({

url:url

type:type,

dataType:dataType,

data:data,

success:function(e){

console.log(e);

},

error:function(){

}

})

三个方法中的url是我们要请求的对象，及ajax要向谁请求数据，data请求时需要传递的参数，url根据请求的参数返回相应的数据，success是ajax请求数据成功之后进行的操作，比如是把请求来的数据加在网页的某个位置，还是改变网页某个位置的内容。

在$.ajax()方法中还有两个选项，其中一个是dataType，要求服务器返回数据的类型，json，text，xml或者html。error：在ajax请求失败时要做的操作。

通过上面的三个方法知道，ajax异步加载的实现，简单的说就是通过JavaScript向服务器请求数据，服务器把数据返回给JavaScript，然后JavaScript以操作dom文档的方式把这些数据处理给页面，以此来实现无需刷新页面就可以加载或者更新页面某一位置的内容。

原生的JavaScript实现ajax异步请求

function(){

var xmlhttp;

if(window.XMLHttpRequest){   //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码

xmlhttp = new XMLHttpRequest();

}else {                                 // IE6, IE5 浏览器执行代码

xmlhttp = new ActiveXObject("MicroSoft.XMLHTTP");

}

//确定发送方式和发送地址

xmlhttp .open("get",url,true);

//发生ajax请求

xmlhttp .send();

/*xmlhttp的状态发生改变就会调用等号后面的function*/

xmlhttp.onreadystatechange = function(){

/*请求成功*/

if(xmlhttp.readyState==4&&xmlhttp.status==200)

{

/*处理服务器返回的结果*/

var result = xmlhttp.responseText;

}

}

}

原生的js ajax请求的实现需要先判断浏览器的类型，然后再决定实现哪个请求类，确定请求方式，发送ajax请求，再通过xmlhttp的变化状态码来确定请求是否成功，步骤非常繁琐，很容易出错。

而jquery执行要引入jquery包就可以用$.get(),$.post(),$.ajax()这三个实现ajax请求，方便快捷，还不容易出错。

2、ajax的应用

①用户注册

现在很多平台在登录之前都需要注册，而且注册的时候有很多信息需要填写，如果在填写注册信息时不能得到及时有效的回馈，等所有信息填完提交，然后在验证注册信息的有效信息，一旦有一条验证信息不通过，这时又会回到注册界面，让用户再次重新填写信息，这种体验非常不好，不仅浪费用户大量时间，还有可能让平台失去这个客户。

如果使用ajax无刷新技术的话就可以实现每填完一步信息就会及时反馈用户填写信息的正确性，有错可以及时修改，不用在等到所有信息填完在交给后台验证，这就给用户注册节省了大量的时间。

②网页内容异步加载

如果一个网页模块非常多，如果一次请求加载完需要耗费很长时间，而用ajax异步加载的话，可以先加载一部分内容，访客往下浏览到一定位置的时候在通过ajax加载一部分内容，通过这种逐步加载的方式来加载网页内容，既可以节省访客等待页面加载的时间也可以，在一定程度上也可以节省带宽资源。

③购物商场里的添加购物车、收藏等功能等

④文章点赞、收藏等

几乎需要无刷新处理操作的地方都可以用ajax来实现，但有一点一定要注意ajax只是向服务器请求少量数据，如果数据量比较大的话还是用其他方法比较合适。