ajax的基本使用
什么是ajax：
- 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML）
- XML： 和JSON一样是目前主流的两种返还格式
ajax的特点： 无刷，局部更新
服务器文件
const Koa = require("koa");
const static = require("koa-static");
const Router = require("koa-router");
const userData = require("./data/users.json");
const koaBody = require("koa-body");
let app = new Koa();
let router = new Router();
app.use(koaBody());
app.use(static(__dirname+"/static"));
router.get("/",ctx=>{
ctx.body="hello world"
});
// query : 传递--> ?属性名 = 属性值&属性名=属性值。。。
// 接收--> ctx.query
router.get("/checkUserName",(ctx,next)=>{
// 服务端接收数据
// ctx.query.username
// 过滤数据，只留下相同的
let res = userData.find(v=>v.username == ctx.query.username);
// res存在，说明用户名正确，不存在说明不正确
if(res){
ctx.body = {
status : 1,
info : "用户名正确"
}
}else{
ctx.body = {
status : 2,
info : "用户名错误"
}
}
});
app.use(router.routes());
app.listen(8080);
static内部静态文件（应该在views内，但为了演示方便，放在了static内部，实际使用时应该放在views内）
<!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" />
<link rel="stylesheet" href="css/login.css" />
<title>Document</title>
</head>
<body>
<div class="loginContainer">
<h1>登录</h1>
<form action="/checkUser" method="post">姓名：
<input class="inputStyle" type="text" name="username" />
<div class="exchange">用户名错误</div>
<br />密码：
<input class="inputStyle" type="password" name="pwd" /><br />
<input class="loginStyle" type="submit" value="登录" />
</form>
</div>
<script>
// ajax
// XML.HttpRequest
document.querySelector(".inputStyle").onblur = function () {
console.log(this.value)
// ajax的基本使用
// 1. 实例化 ajax对象
let xhr = new XMLHttpRequest();
// 2. 创建请求 并配置参数
// 1）请求方式 2）请求路径 3）是否是异步
xhr.open("get", `checkUserName?username=${this.value}&age=20`, true)
// 3. 接收返还值
xhr.onload = function () {
let obj = JSON.parse(xhr.responseText); // xhr.responseText是字符串，需要转成对象
document.querySelector(".exchange").innerHTML = obj.info; //
// 接受到返回值后，通过status判断是否加载成功并修改相应的颜色
if (obj.status == 1) {
document.querySelector(".exchange").style.color = "green";
} else {
document.querySelector(".exchange").style.color = "red";
}
};
// 4. 发送服务器
xhr.send();
}
</script>
</body>
get与post
get 是明文传参， post是密文传参
get
const Koa = require("koa");
const static = require("koa-static");
const Router = require("koa-router");
const userData = require("./data/users.json");
const koaBody = require("koa-body");
let app = new Koa();
let router = new Router();
app.use(koaBody());
app.use(static(__dirname+"/static"));
router.get("/",ctx=>{
ctx.body="hello world"
});
// params : 传递--> /属性值
// 接收--> 路由中 ： 地址/属性名
// ctx.parms
router.get("/get/:age",ctx=>{
console.log(ctx.params)
ctx.body = {
status : 1,
info : "用户名正确"
}
});
app.use(router.routes());
app.listen(8080);
static内部静态文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>点击发送ajax</button>
<script>
document.querySelector("button").onclick = function(){
let xhr = new XMLHttpRequest();
xhr.open("get","/get/1234567890",true); // /get 后+ / 然后就可以直接写值了
xhr.onload = function(){
console.log(xhr.responseText);
}
xhr.send();
}
</script>
</body>
</html>
get注意点:
- get通过parmas传参 必须给参数，否则地址错误，
- query方式传参，则不会影响地址。
- post也可以使用query方式，不是get独有的
- get和querystring的问题,通过url传参
get传递后显示的位置
post
const Koa = require("koa");
const static = require("koa-static");
const Router = require("koa-router");
const userData = require("./data/users.json");
const koaBody = require("koa-body");
let app = new Koa();
let router = new Router();
app.use(koaBody());
app.use(static(__dirname+"/static"));
router.get("/",ctx=>{
ctx.body="hello world"
});
router.post("/post",ctx=>{ //需要用到koa-body
console.log(ctx.request.body);
ctx.body = {
info : "post请求成功"
}
});
app.use(router.routes());
app.listen(8080);
static内部静态文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- <form action="" enctype="application/x-www-form-urlencoded"></form> -->
<button>点击发送ajax</button>
<script>
document.querySelector("button").onclick = function(){
let xhr = new XMLHttpRequest();
xhr.open("post","/post",true);
xhr.onload = function(){
console.log(xhr.responseText);
}
// 使用post传参，是需要设置头部信息
// 第一种： 默认编码
// xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
// 第二种： 二进制编码-----上传文件时使用
// xhr.setRequestHeader("Content-type","multipart/form-data");
// 第三种： json编码
xhr.setRequestHeader("Content-type","application/json");
let data = JSON.stringify({// 需要字符串格式
username : "光达",
age : 20
})
xhr.send(data); //post传参在这里写着
}
</script>
</body>
</html>
post注意点:
- post传参是没有数据量限制的，通常会是服务器限制。
- post传参是正文区域传参所以需要设置编码格式，而get是在头部Url中，所以不需要
- 发送数据时候需要设置http正文头格式；
post传递后显示的位置
同步异步的区别
- 准备代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button> 按钮1 </button>
<button> 按钮2 </button>
<script>
let btns = document.querySelectorAll("button");
btns[0].onclick = function () {
let xhr = new XMLHttpRequest();
xhr.open("get", "/get/1234567890", false);
xhr.onload = function () {
console.log(xhr.responseText);
}
xhr.send();
};
btns[1].onclick = function () {
console.log(1)
}
</script>
</body>
</html>
- 调整浏览器具体步骤
1. 打开浏览器
2. 打开检查
3. 点击Network
4. 找到online并把他换为Slow3G
1310
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
