Ajax是一种创建动态网页的技术，允许在后台与服务器进行数据交换，实现页面的异步更新，无需整体刷新。它提高了用户体验，减少了服务器负担，支持标准技术且不需额外插件。然而，Ajax存在不支持浏览器back按钮、安全性问题、搜索引擎友好性差、异常处理缺陷和调试难度高等缺点。文章还将介绍Ajax的基本用法，包括示例代码。
ajax是异步的javascript和xml
ajax是一种用于创建快速动态网页的技术
通过在后台与服务器进行少量的数据交换，ajax可以对网页实现异步更新。即在不重新加载整个网页的情况下，对网页进行局部更新。
传统网页(不适用ajax)，需要更新内容时，必须重新加载整个网页。
XML： 和JSON一样是目前主流的两种数据返还格式
ajax的优点：
1、最大的一点是页面无刷新，用户的体验非常好。
2、使用异步方式与服务器通信，具有更加迅速的响应能力。
3、“按需取数据”，可以最大程度的减少冗余请求，和响应对服务器和带宽的负担，节约空间和宽带租用成本。
4、基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。
ajax的缺点：
1、ajax不支持浏览器back按钮。
2、安全问题 AJAX暴露了与服务器交互的细节。
3、对搜索引擎的支持比较弱。
4、破坏了程序的异常机制。
5、不容易调试。
我们来学习一下ajax的用法，一个小实例如下：
index.js
// ajax请求 get和post方式
// 文件、图片上传
const Koa = require("koa");//引入koa框架
const static = require("koa-static");//处理静态组员模块
const Router = require("koa-router");//路由控制
let userData = require("./data/user.json");//外部用户数据文件
const koaBody = require("koa-body");//处理post请求及文件上传
const fs = require("fs");//文件操作模块
//实例化
let app = new Koa();
let router = new Router();
app.use(koaBody({
// 设置允许文件上传(必须设置)
multipart:true
}));
app.use(static(__dirname+"/static"));
router.get("/",ctx=>{
ctx.body = "开始使用ajax";
});
// get请求
// get通过parmas传参 必须给参数，否则地址错误
// params: /属性值
//路由中：地址/属性名
router.get("/get/:name",ctx=>{
console.log(ctx.params);
ctx.body={
info:"get请求成功了"
}
});
// post请求
// post传参没有数据量限制，通常是服务器来限制
router.post("/post",ctx=>{
console.log(ctx.request.body);
ctx.body = {
info:"post请求成功了"
}
});
// 检测用户名
router.get("/checkUserName",(ctx,next)=>{
let result = userData.find(v=>v.username == ctx.query.username);
console.log(result);
if (result) {
ctx.body={
status:1,
userInfo:"用户名正确"
}
} else {
ctx.body={
status:2,
userInfo:"用户名错误"
}
}
});
// 检测密码
router.get("/checkUserPwd",(ctx,next)=>{
let resPwd = userData.find(v=>v.pwd == ctx.query.pwd);
console.log(resPwd);
if (resPwd) {
ctx.body={
status:1,
pwdInfo:"密码正确"
}
} else {
ctx.body={
status:2,
pwdInfo:"密码错误"
}
}
});
// 文件、图片上传
router.post("/upload",ctx=>{
console.log(ctx.request.files.img);
// 读取传递过来的文件数据
let fileData = fs.readFileSync(ctx.request.files.img.path);
// 将读取到的文件写入到指定目录中
// 比如 static/imgUpload/ + 01.png
fs.readFileSync("static/imgUpload/"+ctx.request.files.img.name,fileData);
ctx.body = "上传请求成功";
});
app.use(router.routes());//启动路由
app.listen(8000);//设置端口号
post.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>post请求方式</title>
</head>
<body>
<button class="btnSend">点击发送ajax</button>
<script>
// 注意点：
// post是密文传参
// post传参是没有数据量限制的，通常会是服务器限制。
// post传参是正文区域传参所以需要设置编码格式，而get是在头部Url中，所以不需要
// 发送数据时候需要设置http正文头格式
document.querySelector(".btnSend").onclick = function () {
let xhr = new XMLHttpRequest();
xhr.open("post", "/post", true);
xhr.onload = function () {
console.log(xhr.responseText);
}
//使用post传参，需要设置头部信息(3种方式)
// 默认和json格式的差别不大，如果上传图片或文件，比较大的使用二进制的方式
//第一种：默认
// xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
//第二种：二进制
// xhr.setRequestHeader("content-type","multipart/form-data");
//第三种：json格式
xhr.setRequestHeader("content-type", "application/json");
// 获取头部信息；
// getAllResponseHeaders 或者是getResponseHeader ；
let data = JSON.stringify({
username: "小马",
age: 18
});
xhr.send(data);
}
</script>
</body>
</html>
get.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>get请求方式</title>
</head>
<body>
<button class="btnSend">点击发送ajax</button>
<script>
//注意点:
//get是明文传参
//get通过parmas传参 必须给参数，否则地址错误，
//query方式传参，则不会影响地址。
//post也可以使用query方式，不是get独有的
//get和querystring的问题,通过url传参
document.querySelector(".btnSend").onclick = function(){
let xhr = new XMLHttpRequest();
xhr.open("get","/get/name",true);
xhr.onload = function(){
console.log(xhr.responseText);
}
xhr.send();
}
</script>
</body>
</html>
login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/login.css">
<title>登录页</title>
</head>
<body>
<div class="loginContainer">
<h1>登录</h1>
<form action="/checkUser" method="get">
姓名<input type="text" class="inputStyle" name="username">
<div class="exchange" style="display: none;">用户名错误</div>
<br />
密码<input type="text" class="inputStyle" name="pwd">
<div class="exchange" style="display: none;">密码错误</div>
<br />
<input type="button" class="loginStyle" value="登录">
</div>
<script>
//ajax检测用户名与密码是否正确
let inputs = document.querySelectorAll(".inputStyle");
let changeDv = document.querySelectorAll(".exchange");
// 用户名输入框焦点事件
inputs[0].onblur = function(){
//1、实例化对象
let xhr = new XMLHttpRequest();
// 2、创建请求，设置参数
/* 参数1：提交方式
参数2：提交地址
参数3：是否异步 true是,false否
*/
xhr.open("get", `/checkUserName?username=${this.value}`, true);
//3、当前页面加载完成后，执行的方法
xhr.onload = function () {
console.log(xhr.responseText);//响应的信息
let obj = JSON.parse(xhr.responseText);//将响应信息解析成 json对象
changeDv[0].innerHTML = obj.userInfo;//输入用户名时错误提示信息
//状态为1，则说明用户名输入正确，显示绿色的提示文字
if (obj.status == 1) {
changeDv[0].style.display = "block";
changeDv[0].style.color = "green";
} else { //否则，用户名不正确，显示红色的提示文字
changeDv[0].style.display = "block";
changeDv[0].style.color = "red";
}
}
// 4、发送请求
xhr.send();
}
// 密码框焦点事件(同用户名检测)
inputs[1].onblur = function(){
let xhr = new XMLHttpRequest();
xhr.open("get", `/checkUserPwd?pwd=${this.value}`, true);
xhr.onload = function () {
console.log(xhr.responseText);
let obj = JSON.parse(xhr.responseText);
changeDv[1].innerHTML = obj.pwdInfo;
if (obj.status == 1) {
changeDv[1].style.display = "block";
changeDv[1].style.color = "green";
} else {
changeDv[1].style.display = "block";
changeDv[1].style.color = "red";
}
}
xhr.send();
}
</script>
</body>
</html>
扫一扫
1980
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
