jquery的ajax:
$.ajax({
url: 'getTwitterFollowers.php',
type: 'post',//GET,POST
dataType:'jsonp',//html,xml,json,jsonp....
data: {},//需要的参数
success: function(data) {//请求成功后处理函数
$('#ajaxphp-results').html(data);
},
error: function(e) {//失败事的回调
//called when there is an error
//console.log(e.message);
}
});
js原生的ajax:
jquery的ajax:
$.ajax({
url: 'getTwitterFollowers.php',
type: 'post',//GET,POST
dataType:'jsonp',//html,xml,json,jsonp....
data: {},//需要的参数
success: function(data) {//请求成功后处理函数
$('#ajaxphp-results').html(data);
},
error: function(e) {//失败事的回调
//called when there is an error
//console.log(e.message);
}
});
js原生的ajax:
var xhr = null; //1-- 创建ajax对象
if (window.XMLHttpRequest) {
xhr = XMLHttpRequest();
} else { //为了兼容IE6
xhr = ActiveXObject('Microsoft.XMLHTTP');
};
//2.连接服务器open(方法GET/POST,请求地址, 异步传输)
xhr.open('GET', '请求数据的地址', true /*true是阻塞模式*/ );
xhr.send(); //3 发送请求
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
/*
** Http状态码
** 1xx :信息展示
** 2xx :成功
** 3xx :重定向
** 4xx : 客户端错误
** 5xx :服务器端错误
*/
if (xhr.status == 200) {
success(xhr.responseText);
} else {
if (failed) {
failed(xhr.status);
};
};
};
};
// 处理返回数据
/*
** 每当readyState改变时,就会触发onreadystatechange事件
** readyState属性存储有XMLHttpRequest的状态信息
** 0 :请求未初始化
** 1 :服务器连接已建立
** 2 :请求已接受
** 3 : 请求处理中
** 4 :请求已完成,且相应就绪
*/
封装
function Ajax(type, url, data, success, failed) {
// 创建ajax对象
var xhr = null;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject('Microsoft.XMLHTTP')
}
var type = type.toUpperCase();
// 用于清除缓存
var random = Math.random();
if (typeof data == 'object') {
var str = '';
for (var key in data) {
str += key + '=' + data[key] + '&';
}
data = str.replace(/&$/, '');
}
if (type == 'GET') {
if (data) {
xhr.open('GET', url + '?' + data, true);
} else {
xhr.open('GET', url + '?t=' + random, true);
}
xhr.send();
} else if (type == 'POST') {
xhr.open('POST', url, true);
// 如果需要像 html 表单那样 POST 数据,请使用 setRequestHeader() 来添加 http 头。
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send(data);
}
// 处理返回数据
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
success(xhr.responseText);
} else {
if (failed) {
failed(xhr.status);
}
}
}
}
}
// 测试调用
var sendData = {
name: 'asher',
sex: 'male'
};
Ajax('get', 'data/data.html', sendData, function(data) {
console.log(data);
}, function(error) {
console.log(error);
});