Ajax 发送 GET
// 1、创建对象
var xhr = new XMLHttpRequest();
// 2、初始化 设置 请求方法 url 是否异步(true为异步)
xhr.open('GET', 'http://127.0.0.1:8888/ajax', true);
// 3、发送
xhr.send();
/* 4、回调(处理服务端返回的数据)
readyState:
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成,且响应已就绪
*/
xhr.onreadystatechange = function() {
// 判断 readyState
if(xhr.readyState == 4) {
// 判断响应状态码
if(xhr.status >= 200 && xhr.status < 300) {
// 处理响应数据
console.log(xhr.status); //状态码
console.log(xhr.statusText); //状态字符串
console.log(xhr.getAllResponseHeaders()); //所有响应头
console.log(xhr.response); //响应体
}
}
};
</script>
Ajax 发送 POST
// 1、创建对象
var xhr = new XMLHttpRequest();
// 2、初始化 设置 请求方法 url 是否异步(true为异步)
xhr.open('POST', 'http://127.0.0.1:8888/ajax', true);
// 如果想要使用post提交数据,必须添加此行 (设置请求头)
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
/**
* 3、发送 (在这里设置请求体)
*/
xhr.send('age=18');
/* 4、回调(处理服务端返回的数据)
readyState:
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成,且响应已就绪
*/
xhr.onreadystatechange = function() {
// 判断 readyState
if(xhr.readyState == 4) {
// 判断响应状态码
if(xhr.status >= 200 && xhr.status < 300) {
// 处理响应数据
...
}
}
};
Jquery + Ajax
/**
* ajax 发送 Get 请求
* 语法:$.get(URL,callback);
* URL 请求的 URL
* callback 回调函数
* - data :响应数据
* - status :状态
*/
$.get('http://127.0.0.1:8888/ajax',function (data, status) {
...
});
/**
* ajax 发送 Post 请求
* 语法:$.post(URL,data,callback);
* URL :请求的 URL
* data : 请求体
* callback : 回调函数
* - data :响应数据
* - status :状态
*/
$.post(
'http://127.0.0.1:8888/ajax',
{
name : "小明",
age : 18
},
function (data, status) {
alert(data.toString());
alert(status);
}
);
// 通用方式
$.ajax({
// 请求 URL
url : 'http://127.0.0.1:8888/ajax',
// 请求类型
type : 'POST',
// 请求参数
data : {
name : "小明",
age : 18
},
// 是否异步
async : true,
// 成功后回调函数
success : function (data) {
...
},
// 失败回调
error : function () {
...
}
})
© 著作权归作者所有
举报
发表评论
0/200