文章目录
封装
1. AJAX 请求封装
函数就可以理解为一个想要做的事情，函数体中约定了这件事情做的过程，直到调用时才开始工作。
将函数作为参数传递就像是将一个事情交给别人，这就是委托的概念
/**
* 发送一个 AJAX 请求
* @param {String} method 请求方法* @param {String} url 请求地址* @param {Object} params 请求参数
* @param {Function} done 请求完成过后需要做的事情（委托/回调）
*/
function ajax (method, url, params, done) {
// 统一转换为大写便于后续判断
method = method.toUpperCase()
// 对象形式的参数转换为 urlencoded 格式
var pairs = []
for (var key in params) {
pairs.push(key + '=' + params[key])
}
var querystring = pairs.join('&')
var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP')
xhr.addEventListener('readystatechange', function () {
if (this.readyState !== 4)
return
// 尝试通过 JSON 格式解析响应体
try {
done(JSON.parse(this.responseText))
} catch (e) {
done(this.responseText)
}
})
// 如果是 GET 请求就设置 URL 地址 问号参数
if (method === 'GET') {
url += '?' + querystring
}
xhr.open(method, url)
// 如果是 POST 请求就设置请求体
var data = null
if (method === 'POST') {
xhr.setRequestHeader('Content‐Type', 'application/x‐www‐form‐urlencoded')
data = querystring
}
xhr.send(data)
}
ajax('get', './get.php', { id: 123 }, function (data) {
console.log(data)
})
ajax('post', './post.php', { foo: 'posted data' }, function (data) {
console.log(data)
})
案例：正在加载中
jquery-ajax-event.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery全局事件处理函数</title>
<style>
.loading {
display: none;
position: fixed;
background-color: rgba(255,0,0,.5);
top: 0;
left: 0;
right: 0;
bottom: 0;
text-align: center;
line-height: 100px;
}
#btn {
width: 300px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -150px;
font-size: 50px;
}
</style>
</head>
<body>
<div class="loading">正在玩命加载中...</div>
<button id="btn">请求</button>
<script src="jquery.js"></script>
<script>
$(document)
.ajaxStart(function () {
// 只要有 ajax 请求发生 就会执行
$('.loading').fadeIn()
// 显示加载提示
console.log('注意即将要开始请求了')
})
.ajaxStop(function () {
// 只要有 ajax 请求结束 就会执行
$('.loading').fadeOut()
// 结束提示
console.log('请求结束了')
})
$('#btn').on('click', function () {
// $.ajax({
// url: 'time.php'
// })
$.get('time.php')
})
</script>
</body>
</html>
2.jquery中的ajax
3.综合案例：子页面局部加载
进度条插件：nprogress
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>主页面</title>
<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="../nprogress.css">
<style>
.loading {
display: none;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: rgba(0, 0, 0, .6);
font-size: 30px;
}
</style>
<script src="../nprogress.js"></script>
</head>
<body>
<div class="container pt-4">
<h1>会员中心</h1>
<hr>
<div class="row">
<aside class="col-md-3">
<div class="list-group">
<a class="list-group-item list-group-item-action" href="index.html">我的资料</a>
<a class="list-group-item list-group-item-action" href="cart.html">我的购物车</a>
<a class="list-group-item list-group-item-action" href="orders.html">我的订单</a>
</div>
</aside>
<main id="main" class="col-md-9">
<h2>我的个人资料</h2>
<hr>
</main>
</div>
</div>
<div class="loading">正在玩命加载中...</div>
<script src="../jquery.js"></script>
<script>
$(function ($) {
// $(document)
// .ajaxStart(function () {
// // 只要有 ajax 请求发生 就会执行
// $('.loading').fadeIn()
// // 显示加载提示
// console.log('注意即将要开始请求了')
// })
// .ajaxStop(function () {
// // 只要有 ajax 请求结束 就会执行
// $('.loading').fadeOut()
// // 结束提示
// console.log('请求结束了')
// })
$(document)
.ajaxStart(function () {
NProgress.start()
})
.ajaxStop(function () {
NProgress.done()
})
// 有一个独立的作用域，顺便确保页面加载完成执行
$('.list-group-item').on('click', function () {
var url = $(this).attr('href')
$('#main').load(url + ' #main > *')
return false
})
})
</script>
</body>
</html>
cart.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>主页面</title>
<link rel="stylesheet" href="bootstrap.css">
</head>
<body>
<div class="container pt-4">
<h1>会员中心</h1>
<hr>
<div class="row">
<aside class="col-md-3">
<div class="list-group">
<a class="list-group-item list-group-item-action" href="index.html">我的资料</a>
<a class="list-group-item list-group-item-action" href="cart.html">我的购物车</a>
<a class="list-group-item list-group-item-action" href="orders.html">我的订单</a>
</div >
</aside>
<main id="main" class="col-md-9">
<h2>我的购物车</h2>
<hr>
</main>
</div>
</div>
</body>
</html>
orders.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>主页面</title>
<link rel="stylesheet" href="bootstrap.css">
</head>
<body>
<div class="container pt-4">
<h1>会员中心</h1>
<hr>
<div class="row">
<aside class="col-md-3">
<div class="list-group">
<a class="list-group-item list-group-item-action" href="index.html">我的资料</a>
<a class="list-group-item list-group-item-action" href="cart.html">我的购物车</a>
<a class="list-group-item list-group-item-action" href="orders.html">我的订单</a>
</div >
</aside>
<main id="main" class="col-md-9">
<h2>我的订单</h2>
<hr>
</main>
</div>
</div>
</body>
</html>
