1.概述
实际工作中jquery提供的ajax无法满足要求,常自行封装
发送ajax请求-原生
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax</title>
</head>
<body>
<button>发送请求</button>
<script>
var btn = document.querySelector('button');
btn.onclick = function () {
// 通过XMLHttpRequest创建xhr对象
var xhr = new XMLHttpRequest();
// console.log(xhr);
// 监听后台有没有收到请求
xhr.onreadystatechange = function () {
// 0-请求未发送 1-准备发但没法 2-已发没接收完 4-后台接到
// 后台已接收到
if(xhr.readyState == 4) {
// 后台放回http状态码 200-正常
if(xhr.status == 200) {
// 获取后台反馈的数据
console.log(xhr.responseText);
// json解析
console.log(JSON.parse(xhr.responseText));
}
}
};
// 只是设置不发送
xhr.open('get', 'b1_ajax.php', true);
// 发送
xhr.send(null);
};
</script>
</body>
</html>
post请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>post请求与兼容性</title>
</head>
<body>
<span>用户名:</span><input type="text" class="username" id="username"><br>
<span>密码:</span><input type="text" class="password" id="password"><br>
<button>发送post请求</button>
<script>
var btn = document.querySelector('button');
var username = document.getElementById('username');
var password = document.getElementById('password');
btn.onclick = function () {
// 浏览器兼容性问题(ie6)
// var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('');
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if(xhr.readyState == 4) {
if(xhr.status == 200) {
console.log(JSON.parse(xhr.responseText));
}
}
};
xhr.open('post', 'b2_post.php', true);
// 发送post请求
var formData = new FormData();
formData.append('username', username.value);
formData.append('password', password.value);
xhr.send(formData);
};
</script>
</body>
</html>
用户名密码校验
b2_post.php
<?php
/**
* Created by PhpStorm.
* User: Vincent
*/
$username = $_POST['username'];
$password = $_POST['password'];
$success = array('msg'=>'OK', 'info'=>$_POST);
$con = mysqli_connect('localhost', 'root', 'root', 'php_demo');
if($con) {
mysqli_query($con, "set names utf8");
mysqli_query($con, 'set character_set_client=utf8');
mysqli_query($con, 'set character_set_results=utf8');
$sql = "select * from userInfoList where 1";
$result = $con -> query($sql);
if($result -> num_rows > 0) {
$info = [];
for($i=0; $row=$result -> fetch_assoc(); $i++) {
$info[$i] = $row;
}
}
$flag = false;
// 用户名密码校验
for($j=0; $j<count($info); $j++) {
if($info[$j]['username'] == $username) {
if($info[$j]['password'] == $password) {
$flag = true;
break;
}
}
}
// 登录失败
if(!$flag) {
$success['infoCode'] = 1;
} else {
$success['infoCode'] = 0;
}
}else {
// 数据库连接失败
$success['infoCode'] = 2;
}
echo json_encode($success);
超时时间
// 设置超时时间
xhr.timeout = 5000;
// 超时事件
xhr.ontimeout = function () {
console.log('超时');
};
进度条
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>进度条</title>
</head>
<body>
<!--h5新标签 进度条-->
<progress min="0" max="100" value="0"></progress>
<br>
<!--multiple选择多文件-->
<input type="file" class="tempFile" multiple>
<button onclick="ajaxSubmit()">上传文件</button>
<script>
function ajaxSubmit() {
var files = document.querySelector('.tempFile').files;
var formData = new FormData();
for(var i=0; i<files.length; i++) {
var file = files[i];
// 键值对
formData.append('myfile'+i, file);
}
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if(xhr.readyState == 4) {
if(xhr.status == 200) {
console.log(xhr.responseText);
}
}
}
var progressbar = document.querySelector('progress');
// 上传进度回调
xhr.upload.onprogress = function (event) {
// 完全发送完为false
if(event.lengthComputable) {
// 上传进度
progressbar.value = (event.loaded/event.total) * 100;
}
}
xhr.open('post', 'b4_progressbar.php', false);
xhr.send(formData);
}
</script>
</body>
</html>
三级联动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三级联动</title>
<style>
select {
width: 200px;
height: 35px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<span>省:</span>
<select name="" class="province"></select>
<br>
<span>市:</span>
<select name="" class="city"></select>
<br>
<span>区:</span>
<select name="" class="area"></select>
<script>
var provinceSelect = document.querySelector('.province');
var citySelect = document.querySelector('.city');
var areaSelect = document.querySelector('.area');
// 模拟ajax获取数据
// 省
var provinceList = ['山东', '河北', '黑龙江'];
// 市
var cityList = [
['济宁', '济南', '青岛'],
['保定', '石家庄'],
['大庆', '哈尔滨'],
];
// 区
var areaList = [
[['济宁1', '济宁2'], ['济南1', '济南2'], ['青岛1', '青岛2']],
[['保定1', '保定2'], ['石家庄1', '石家庄2']],
[['大庆1', '大庆2'], ['哈尔滨1', '哈尔滨2']]
];
var provinceIndex = 0;
for(var i=0; i<provinceList.length; i++) {
// 添加下拉选项
var provinceOption = new Option(provinceList[i]);
provinceSelect.options.add(provinceOption);
}
// 省下拉选择事件
provinceSelect.onchange = function (event) {
// 选择的序号
provinceIndex = event.target.selectedIndex;
// 清空市下拉内容
citySelect.options.length = 0;
// 清空区下拉内容
areaSelect.options.length = 0;
for(var j=0; j<cityList[provinceIndex].length; j++) {
var cityOption = new Option(cityList[provinceIndex][j]);
citySelect.options.add(cityOption);
}
// 加载区
for(var k=0; k<areaList[provinceIndex].length; k++) {
var areaOption = new Option(areaList[provinceIndex][0][k]);
areaSelect.options.add(areaOption);
}
};
// 市下拉选择事件
citySelect.onchange = function (event) {
var cityIndex = event.target.selectedIndex;
areaSelect.options.length = 0;
for(var i=0; i< areaList[provinceIndex][cityIndex].length; i++) {
var areaOption = new Option(areaList[provinceIndex][cityIndex][i]);
areaSelect.options.add(areaOption);
}
}
</script>
</body>
</html>
请求后台数据
// ajax请求省数据
(function(){
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if(xhr.readyState == 4) {
if(xhr.status == 200) {
var provinceList = JSON.parse(xhr.responseText);
for(var i=0; i<provinceList.length; i++) {
// 添加下拉选项
var provinceOption = new Option(provinceList[i]);
provinceSelect.options.add(provinceOption);
}
}
}
};
// type 0-省 1-市 2-区
xhr.open('get', 'b5_3cascade.php?type=0', true);
xhr.send(null);
}());
<?php
/**
* 三级联动
* TODO 加载市区数据
* User: Vincent
*/
$provinceList = ['山东', '河北', '黑龙江'];
$cityList = [
['济宁', '济南', '青岛'],
['保定', '石家庄'],
['大庆', '哈尔滨'],
];
$type = $_GET['type'];
if($type == 0) {
echo json_encode($provinceList);
} else {
echo json_encode($cityList);
}
封装ajax请求
b6_wrap_ajax.js
/**
* Created by Vincent on 2020/9/9.
*/
/**
* 封装ajax请求
* 请求类型 url data 回调
* get请求拼接url
* post请求构建formData
* @param params
*/
function wrapAjax(params) {
var formData = new FormData();
// 忽略大小写
if(params.type.toLowerCase() == 'get') {
params.data
var arr = [];
// 参数字符串拼接
for(var k in params.data) {
var str = k + "=" + params.data[k];
arr.push(str);
}
var paramStr = arr.join('&');
// url中可能已经有?参数
params.url += params.url.indexOf('?') == -1
? '?' + paramStr
: '&' + paramStr;
} else if(params.type.toLowerCase() == 'post') {
for(var k in params.data) {
formData.append(k, params.data[k]);
}
} else {
console.log("请求类型错误");
}
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if(xhr.readyState == 4) {
if(xhr.status == 200) {
params.success(JSON.parse(xhr.responseText));
}
}
};
xhr.open(params.type, params.url, true);
if(params.type.toLowerCase() == 'get') {
xhr.send(null);
} else if(params.type.toLowerCase() == 'post') {
xhr.send(formData);
}
}
b6_wrap_ajax.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>封装ajax请求</title>
</head>
<body>
<button class="btn">发送原生请求</button>
<button class="btn2">发送jquery请求</button>
<button class="btn3">发送封装请求</button>
<script src="js/jquery-1.12.3.min.js"></script>
<script src="js/b6_wrap_ajax.js"></script>
<script>
document.querySelector('.btn3').onclick = function () {
wrapAjax({
type: 'post',
url: 'b6_wrap_ajax.php',
data: {
uname: 'vincent',
upass: '123'
},
success: function (res) {
console.log(res);
}
});
};
// 原生复习
/*document.querySelector('btn').onclick = function () {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if(xhr.readyState == 4) {
if(xhr.status == 200) {
console.log(JSON.parse(xhr.responseText));
}
}
};
var formData = new FormData();
formData.append('uname', 'frank');
formData.append('upass', '123');
xhr.open('post', 'b6_wrap_ajax.php', true);
xhr.send(formData);
};*/
// jquery ajax复习
/* document.querySelector('.btn2').onclick = function () {
$.ajax ({
type: 'post',
url: 'b6_wrap_ajax.php',
dataType: 'json',
data: {
uname: 'vincent',
upass: '123'
},
success: function (res) {
console.log(res);
}
});
};*/
</script>
</body>
</html>
瀑布流
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>瀑布流</title>
<link rel="stylesheet" href="css/initialize.css">
<style>
.out{
position: relative;
margin: 0 auto;
}
.in {
float: left;
}
img{
margin: 10px;
padding: 10px;
border: 3px solid lightgray;
border-radius: 15px;
box-shadow: 0px 0px 5px orange;
}
</style>
</head>
<body>
<div class="out">
</div>
<script src="js/b6_wrap_ajax.js"></script>
<script>
// 页面加载完毕发送ajax请求
window.onload = function () {
window.ajax({
type: 'get',
url: 'b8_waterfall.php',
success: function (res) {
console.log(res);
var dataArr = res.info;
var outDiv = document.querySelector('.out');
for(var i=0; i<dataArr.length; i++) {
var div = document.createElement('div');
div.className = 'in';
div.innerHTML = '<img src="'+ dataArr[i] +'">';
outDiv.appendChild(div);
var inDivs = document.querySelectorAll('.in');
var num = Math.floor(document.documentElement.clientWidth/inDivs[0].offsetWidth);
outDiv.style.width = num * inDivs[0].offsetWidth;
// 第一行图片高度
var heightArr = [];
for(var i=0; i<inDivs.length; i++) {
// 第一行
if(i<num) {
heightArr.push(inDivs[i].offsetHeight);
// 其余所有行
} else {
inDivs[i].style.position = 'absolute';
minHeight = Math.min.apply(null, heightArr);
minIndex = heightArr.indexOf(minHeight);
inDivs[i].style.top = minHeight + 'px';
inDivs[i].style.left = inDivs[minIndex].offsetLeft + 'px';
heightArr[minIndex] += inDivs[i].offsetHeight;
}
}
}
}
});
};
</script>
</body>
</html>
b8_waterfall.php
<?php
// 模拟从数据库获取
$dataArr = ['img/i1.jpg','img/i2.jpg','img/i3.jpg','img/i4.jpg','img/i5.jpg','img/i6.jpg','img/i7.jpg','img/i8.jpg','img/i9.jpg','img/i10.jpg','img/i11.jpg','img/i12.jpg','img/i13.jpg','img/i14.jpg','img/i15.jpg'];
$success = array('msg' => 'OK', 'info' => $dataArr);
echo json_encode($success);
####### 跨域问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>跨域问题</title>
</head>
<body>
<button id="btn">发送请求</button>
<script src="js/b6_wrap_ajax.js"></script>
<script>
document.getElementById('btn').onclick = function () {
// 浏览器同源政策跨域出问题
/*window.ajax({
type: 'post',
url: 'http://localhost/04_php/b9_cors.php',
success: function (res) {
console.log(res);
}
});*/
// 相当于在页面中创建script标签,通过script标签引入php文件
var script = document.createElement('script');
// func充当success函数
script.src = 'http://localhost/04_php/b9_cors.php?callback=func';
document.body.appendChild(script);
};
// 1.jsonp方式解决跨域,数据被封装到回调函数的参数中
function func(res) {
console.log(res);
}
</script>
</body>
</html>
<?php
//$success = array('msg' => 'OK', 'info' => $_POST);
//echo json_encode($success);
// 准备返回数据
$tempData = array('msg' => 'cross ok');
// 获取前端发来的success方法
$callback = $_GET['callback'];
// 返回数据构建为函数调用的js语法,并直接返回
echo $callback."(".json_encode($tempData).")";
网友评论