本文详细介绍了Ajax技术的工作原理及其与传统网站的区别，强调了异步特性，并讲解了XMLHttpRequest对象的关键作用。同时，文章还探讨了在Express项目中解决跨域问题的cors方法。此外，对jQuery如何封装ajax进行了深入解析，包括$.ajax、$.get、$.post及表单序列化等实用功能。
目录
4、Ajax(Asynchronous JavaScript and XML,异步JavaScript和XML)
2、$.get(url,[data],[callback],[type])：实现get请求
3、$.post(url,[data],[callback],[type])：实现post请求
一、Ajax技术
1、传统网站的缺陷
（1）无法局部刷新页面
（2）只能通过刷新页面来获取服务器端的数据,若数据量大、网速慢用户等待的时间会很长
（3）表单提交问题
2、传统网站从浏览器端向服务器端发送请求的工作原理
3、Ajax网站从浏览器端向服务器端发送请求的工作原理
4、Ajax(Asynchronous JavaScript and XML,异步JavaScript和XML)
（1）同步：客户端向服务器端发送请求,然后等待服务器端响应后再进行后续的操作
（2）异步：客户端向服务器端发送请求后不等待服务器端的响应,继续进行后续操作;当服务器端响应后,客户端会调用相应的回调函数进行处理.
（3）Ajax技术的核心：XMLHttpRequest对象。不是w3c的标准对象,用户需要在JavaScript代码中获取该对象
① 获取方法：需要判断浏览器的类型
let xmlhttpRequest;
if(window.ActiveXObject){ //表示浏览器是早期的IE浏览器
xmlhttpRequest = new ActiveXObject('Microsoft.XMLHTTP')
}else if(window.XMLHttpRequest){ //表示符合w3c标准的浏览器
xmlhttpRequest = new XMLHttpRequest()
}② XMLHttpRequest对象的属性
| 属性 | 描述 |
| Onreadystatechane | 每次状态改变所触发事件的事件处理程序 |
| readyState | 对象状态值： 0 = 未初始化（uninitialized） 1 = 正在加载（loading） 2 = 加载完毕（loaded） 3 = 交互（interactive） 4 = 完成（complete） |
| responseText | 从服务器进程返回的数据的字符串形式 |
| responseXML | 从服务器进程返回的DOM兼容的文档数据对象 |
| status | 从服务器返回的数字代码，如404（未找到）或200（就绪） |
| statusText | 伴随状态码的字符串信息 |
③ Ajax实现get请求
var express = require('express');
var router = express.Router();
/*
http://localhost:3000/home/first
*/
router.get('/first',(req, res) => {
res.send("Hello Ajax")
})
module.exports = router;
5、Express项目中解决跨域问题：采用cors方式
（1）安装cors模块
（2）在app.js文件中配置cors导入cors模块
（3）使用express.use()中间件应用cors模块
二、jQuery对ajax的封装
1、$.ajax({})：可以实现get、post等请求
$.ajax({
url: '请求地址',
type: '请求类型',
data: '请求参数',
dataType: '服务器端响应数据的类型',
success: function(data){ -->请求成功后的回调函数
参数'data'存放的服务器端的响应数据
}
error: function(err){ -->请求失败后的回调函数
参数'err'存放的是请求失败的信息
}
})<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery对ajax的封装</title>
<script src="../js/jquery-3.4.1.js"></script>
</head>
<body style="text-align: center;">
<div>
<label>用户名：
<input type="text" id="username">
<span id="name_info"></span>
</label>
<br><br>
<label>密 码：
<input type="password" id="userpwd">
<span id="pwd_info"></span>
</label>
<br><br>
<button id="btn_get">get方式登录</button>
<button id="btn_post">post方式登录</button>
<br><br>
<h2 id="info"></h2>
</div>
<script>
$(function(){
$('#btn_get').click(function(){
//获取用户输入的信息
let name = $('#username').val();
let pwd = $('#userpwd').val();
//向服务器端发送请求
$.ajax({
url: 'http://localhost:3000/login/post',
type: 'post',
data: {
username: name,
userpwd: pwd
},
dataType: 'json',
success: function(result){
if(result.code===101){
$('#name_info').html(result.msg)
}else if(result.code === 102){
$('#pwd_info').html(result.msg)
}else{
$('#info').html(result.msg)
}
}
})
});
})
</script>
</body>
</html>2、$.get(url,[data],[callback],[type])：实现get请求
3、$.post(url,[data],[callback],[type])：实现post请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery对ajax的封装</title>
<script src="../js/jquery-3.4.1.js"></script>
</head>
<body style="text-align: center;">
<div>
<label>用户名：
<input type="text" id="username">
<span id="name_info"></span>
</label>
<br><br>
<label>密 码：
<input type="password" id="userpwd">
<span id="pwd_info"></span>
</label>
<br><br>
<button id="btn_get">get方式登录</button>
<button id="btn_post">post方式登录</button>
<br><br>
<h2 id="info"></h2>
</div>
<script>
$(function(){
$('#btn_get').click(function(){
//获取用户输入的信息
let name = $('#username').val();
let pwd = $('#userpwd').val();
$.get('http://localhost:3000/login/check',{username:name,userpwd:pwd},function(result){
if(result.code===101){
$('#name_info').html(result.msg)
}else if(result.code === 102){
$('#pwd_info').html(result.msg)
}else{
$('#info').html(result.msg)
}
},'json')
});
$('#btn_post').click(function(){
let name = $('#username').val();
let pwd = $('#userpwd').val();
$.post('http://localhost:3000/login/post',{username:name,userpwd:pwd},function(result){
if(result.code===101){
$('#name_info').html(result.msg)
}else if(result.code === 102){
$('#pwd_info').html(result.msg)
}else{
$('#info').html(result.msg)
}
},'json')
})
})
</script>
</body>
</html>const express = require('express');
const router = express.Router();
/*
http://localhost:3000/login/check
*/
router.get('/check',(req, res) => {
//获取客户端的get请求参数：req.query
console.log(req.query)
let uname = req.query.username
let upwd = req.query.userpwd
//对用户信息进行判断
if (uname !== 'abc'){
res.send({
code: 101,
msg: '用户名错误'
})
}else if (upwd !== '123456'){
res.send({
code: 102,
msg: '密码错误'
})
}else{
res.send({
code: 1000,
msg: '合法用户'
})
}
})
/*
http://localhost:3000/login/post
*/
router.post('/post',(req, res) => {
console.log(req.body)
res.send({
code: 1000,
msg: '合法用户'
})
})
module.exports = router;4、表单序列化serialize()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单序列化</title>
<script src="../js/jquery-3.4.1.js"></script>
</head>
<body style="text-align: center;">
<div>
<form id="testForm">
<label>姓名:
<input type="text" name="username">
</label>
<br><br>
<label>性别:
<input type="radio" value="男" name="sex">男
<input type="radio" value="女" name="sex">女
</label>
<br><br>
<label>年龄：
<input type="number" name="age">
</label>
<br><br>
<label>地址：
<input type="text" name="address">
</label>
<br><br>
<button type="button" id="btn">提交</button>
</form>
</div>
<script>
$(function(){
$('#btn').click(function(){
$.ajax({
url: 'http://localhost:3000/login/post',
type: 'post',
data: $('#testForm').serialize(), //表单序列化
dataType: 'json',
success: function(result){
console.log(result)
}
})
})
})
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
