AJAX的简单介绍与使用
作用：AJAX可以在不刷新页面的情况下，请求服务器，页面局部刷新
一.AJAX请求服务器的步骤
1.创建XMLHttpRequest实例
XMLHttpRequest对象：具备和服务器通信的能力
2.设置请求报文
（1）请求行（请求方式/请求地址/协议版本号）
（2）请求头（将浏览器相关信息发送给服务器）
（3）请求主体（用于存放数据的）
3.接收服务器响应内容，用事件监听onreadystatechange
注意：get和post请求报文的区别
① get方式数据在请求行（拼接），请求主体为null；post方式数据在请求主体
② post请求头必须设置content-type属性
XMLHttpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); // post请求设置content-type属性
二.原生JS的AJAX-get和AJAX-post
1.ajax-get
<body>
<h1>ajax-get</h1>
<input type="text"> <button>发送请求</button>
<div class="info"></div>
<script>
// 点击按钮，获取输入框的值，通过ajax发送给后台
document.querySelector('button').onclick = function () {
var txt = document.querySelector('input').value;
// 利用ajax发送数据给后台
// 1.创建一个XMLHttpRequest对象
var xhr = new XMLHttpRequest();
// 2.设置请求报文
// 2-1请求行 路径后面使用?拼接
xhr.open('get', './ajax-get.php?name='+txt);
// 2-2请求头
xhr.setRequestHeader('content-type', 'text/html');
// 2-3请求主体
xhr.send(null);
// 3.监听服务器响应
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
var r = xhr.responseText; // 返回的数据
// 显示
document.querySelector('.info').innerHTML = r;
}
}
}
</script>
</body>
2.ajax-post
<body>
<h1>ajax - post</h1>
<input type="text"> <button>发送请求</button>
<div class="info"></div>
<script>
// 点击按钮，获取输入框的值，通过ajax发送给后台
document.querySelector('button').onclick = function () {
var txt = document.querySelector('input').value;
//利用ajax向数据发送给后台
// 1.创建一个XMLHttpRequest对象
var xhr = new XMLHttpRequest();
// 2.设置请求报文
// 2-1请求行
xhr.open('post', './ajax-post.php');
// 2-2请求头
//必须设置content-type属性
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
// 2-3请求主体
xhr.send('name=' + txt+'&sex=m');
//3-监听服务器响应
xhr.onreadystatechange = function () {
if (xhr.readyState ==4 && xhr.status == 200) {
var r = xhr.responseText; // 返回的数据
document.querySelector('.info').innerHTML = r;
}
}
}
</script>
</body>
三.AJAX的封装
1.jQuery封装AJAX
封装思路：
① 封装原因：提高代码的复用性
② 怎么封装：提取公共代码，变化部分成参数
// jq-ajax的详细语法格式
$('button').click(function () {
$.ajax({
type: 'get', //请求方式
url: './jqAajx.php',//请求地址
data: {name: 'zs'}, //传递的数据 内部进行转换 name=zs&age=18
// timeout: 2000, //超时时间,等待服务器响应时间，超过指定时间，自动终止请求
dataType:'json', //数据类型，告诉$.ajax返回的数据 以哪种类型进行处理 'text', 'json', 'xml', 'script'
//如果设置了dataType: 'json', 插件内部会自动将json数组转成js对象或者数组
beforeSend: function () {
// alert(1);
//在请求发前，做一些准备工作，判断数据是否合理
}, //请求发送之前
success: function (info) {
//用于渲染
console.log(info);
// alert(2);
}, //服务器成功响应的回调函数
error: function () {
// alert(3);
console.log('请求出错了');
}, //请求出错的回调函数
complete: function () {
// 做一些收尾工作，样式重置
// alert(4);
} //请求完成的回调函数
})
});
2.promise利用jq-ajax封装
（1）Promise是一个构造函数
（2）() 参数里是一个回调函数
resolve : fn =>成功操作 调用resolve
reject : fn => 失败操作 调用 reject
（3）Promise里面放一个异步操作
① 假如异步操作成功 => 调用 resolve => 走then => 传参数
resolve(‘成功的信息’) => 传递给then的参数
② 假如异步操作失败 => 调用 reject => 走 catch =>传参数
reject(‘这是一条错误信息’) => 传递给catch的参数
function fetch(options){
const p = new Promise((resolve, reject) => {
$.ajax({
url : options.url; // 接口地址
type : options.type; // 请求方式
data : options.data || {}; // 参数
dataType : 'json'; // 数据类型
success : resolve; // 成功回调
error : reject; // 失败回调
})
})
return p // 返回值Promise对象
}
// promise的使用，走then或者走catch
fetch(obj).then( res => {
console.log('then被调用了:',res);
}).catch( err => {
console.log('catch 被调用了:',err);
})
5215
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
