Ajax 用法, 实现方法,JS原生与JQ实现

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');

}