author:鹏鹏袋 day:2015.01.24
AJAX详解
ajax是实现页面异步加载.
常用于,前后端数据交互,实现前端页面无刷新更改操作.
是web前端和后端使用者开发的必备使用技能~~
Ajax操作~ :
俗话原理:用俗话来说,就是把数据传送过去,然后再从后面获取到数据回来使用
(JS原生使用AJAX)
Get请求操作五步走~
1:创建ajax对象
2:设置回调对象
3:初始化ajax对象
4:发送ajax对象
5:判断与执行
参数详解:
new XMLHttpRequest() :调用ajax对象
Url :要传送数据过去的地址
Xhr.status返回状态码, 200为成功 其他为失败
xhr.responseText :回调数据
代码如下:
window.onload=function(){
//获取事件
//(document.getElementById(xx)获取事件
$('GO').onclick=function(){
var one=$('one').value;
var two=$('two').value;
var xhr=new XMLHttpRequest();
//设置回调
xhr.onreadystatechange= function(){
if(xhr.readyState==4 && xhr.status==200){
alert(xhr.responseText);
}
}
//设置头信息
var url ='02.php?&one=' + one + '&two=' + two + '&_=' + Math.getHouse()';
//初始化ajax
xhr.open('get',url);
//发送ajax对象
xhr.send(null);
}
}
(JQ方式使用Ajax) :最常用!
$.ajax({
url : 'xxx.php',//传送过去的url地址
type: 'get',//传递方式GET , POST
data: {a:a,b:b},//传送过去的数据{'那边接收':'这边的数据'}
success: function(msg){
//回调函数msg
//如果是字符串,就直接操作
//如果是JSON数据,就使用json数据解析~ for(var i in msg){}然后使用msg['a'] msg.a
//如果要打印数据请用console.log
}
})
因为W3C和IE兼容AJAX都不一样~
AJAX解决兼容性问题,我们在JS文件中输入以下代码就可以
function createXhr(){
//在W3C中.
try{return new XMLHttpRequest()} catch(e) {}
//IE
try{ return new ActiveXObject('Microsoft.XMLHTTP')} catch(e) {}
alert('你的浏览器不支持Ajex');
}