本地环境简单搭建
为什么要环境搭建
因为Ajax是基于服务器来运行的，需要配置服务器环境来实现对本地资源的访问。
环境搭建有很多种
- 下载phpstudy集成环境
- appserv集成环境、xammp、phpstudy、wampserver
- xammp、phpstudy、wampserver
- 编译器自带的环境（**VSCode****）
如何使用VsCode自带的服务器环境
- 在VSCode中下载 Live Server插件
- 在vsCode下方会出现这样的图标，运行带有Ajax请求的文件时，直接点击该图标运行
- 本环境自动以打开的本文件夹作为服务器的根目录，端口可以自行改变
jQuery中的Ajax
GET请求和POST请求的异同
相同点:
都是将数据提交到远程服务器
不同点:
1. 提交数据存储的位置不同
GET请求会将数据放到URL后面
POST请求会将数据放到请求头中
2. 提交数据大小限制不同
GET请求对数据有大小限制
POST请求对数据没有大小限制
js原生Ajax
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>原生Ajax</title>
<!--
1.什么是Ajax?
AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。
-->
<script>
window.onload = function (ev) {
var oBtn = document.querySelector("button");
oBtn.onclick = function (ev1) {
// 1.创建一个异步对象
var xmlhttp=new XMLHttpRequest();
// 2.设置请求方式和请求地址
/*
method：请求的类型；GET 或 POST
url：文件在服务器上的位置
async：true（异步）或 false（同步）
*/
xmlhttp.open("GET", "./data/ajaxTest.json", true);
// 3.发送请求
xmlhttp.send();
// 4.监听状态的变化
xmlhttp.onreadystatechange = function (ev2) {
/*
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪
*/
if(xmlhttp.readyState === 4){
// 判断是否请求成功
if(xmlhttp.status >= 200 && xmlhttp.status < 300 ||
xmlhttp.status === 304){
// 5.处理返回的结果
console.log("接收到服务器返回的数据");
}else{
console.log("没有接收到服务器返回的数据");
}
}
}
}
}
</script>
</head>
<body>
<button>发送请求</button>
</body>
</html>
jQuery使用Ajax
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="./lib/bootstrap/css/bootstrap.css">
<script src="./lib/jquery/jquery.js"></script>
<style>
form {
width: 500px;
margin: 100px auto;
}
</style>
</head>
<body>
<button type="button" class="btn btn-primary" id="submit">发送请求</button>
<script>
$("#submit").click(function () {
var username = $('#username').val();
var password = $('#password').val();
$.ajax({
url: "./data/ajaxTest.json",//请求和发送数据地址
type: "get",//请求方式
data:{"username":userNname,"password":password},//要发送给后台的数据，可以在后台接收
dataType: "json", //返回数据类型
success: function (xhr) { //成功
console.log('xhr :', xhr); //返回的就是一个json对象，可以直接使用
console.log('xhr[0].username :', xhr[0].username);
console.log('xhr[0].password :', xhr[0].password);
},
error: function () { //失败
alert("服务器出错，，，")
}
})
})
</script>
</body>
</html>
AjaxTest案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="./lib/bootstrap/css/bootstrap.css">
<script src="./lib/jquery/jquery.js"></script>
<style>
form {
width: 500px;
margin: 100px auto;
}
</style>
</head>
<body>
<!-- 本来表单中的数据应该发送到后台进行数据操作，由于还没有学习后端语言，先在前端调用后端的数据进行数据操作 -->
<form action="" method="POST" role="form">
<legend style="text-align: center;">请登录</legend>
<div class="form-group">
<label for="">用户名</label>
<input type="text" class="form-control" name="username" id="username" placeholder="请输入用户名">
</div>
<div class="form-group">
<label for="">密码</label>
<input type="password" class="form-control" name="username" id="password" placeholder="请输入密码">
</div>
<button type="button" class="btn btn-primary" id="submit">登录</button>
</form>
<script>
$("#submit").click(function () {
var username = $('#username').val();
var password = $('#password').val();
$.ajax({
url: "./data/ajaxTest.json",
type: "get",
dataType: "json",
success: function (xhr) { //成功
// var data = eval('('+data+')');
// console.log(xhr[1]);
/* console.log(xhr.username);
console.log(xhr.password); */
var flag = false;
for (let i = 0; i < xhr.length; i++) {
console.log('xhr[i] :', xhr[i]);
if (username === xhr[i].username && password === xhr[i].password) {
flag = true;
break;
}
}
if (flag) {
confirm("登录成功！");
window.location.href = "http://www.xyc.edu.cn/";
} else {
confirm("用户名或密码错误")
}
},
error: function () { //失败
alert("服务器出错，，，")
}
})
})
</script>
</body>
</html>