目录
原生ajax
传统请求（同步方式）的问题
Ajax优势和作用
Ajax请求与传统请求的区别：
ajax原理（方法，属性 ）
XMLHttpRequest
open
send
属性
readyState
tatus
responseText
事件
ajax实现步骤
ajax的get和post传参
get
zhuce.html文件代码如下：
post
Jquery之Ajax
get
post
ajax
封装ajax
原生ajax
Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。
传统请求（同步方式）的问题
当网速比较慢或服务器太忙时，客户端(浏览器)在没有收到服务端返回的响应之前一直处在线等待状态，用户体验不好。
Ajax优势和作用
使用ajax技术后用户体验好，同时可以减轻服务端的压力。
ajax的应用场景：百度搜索框、百度地图、检查用户是否注册过、页面的局部刷新等。
Ajax请求与传统请求的区别：
-
传统方式请求：
- ajax方式请求
ajax原理（方法，属性 ）
XMLHttpRequest
let xhr =new XMLHttpRequest();描述：创建 ajax对象
open
xhr.open('请求方式','请求地址',true/false); //true：表示异步 false:表示同步描述：创建请求给ajax对。
send
语法：
xhr.send(string)描述：ajax对象将请求发送到服务器。string：仅用于 POST 请求
属性
readyState
xhr.readyState
描述：在创建ajax对象，配置ajax对象，发送请求，以及接收完服务器端响应数据，这个过程中的每一个步骤都会对应一个数值，这个数值就是ajax状态值。
包含的状态值：
(1)0：请求未初始化，还没有调用open
(2)1：请求已经建立，但是还没有发送send
(3)2：请求已经发送
(4)3：请求正在处理中，通常响应中已经有部分数据可以用了
(5)4：响应已经完成，可以获取并使用服务器的响应
tatus
语法：
xhr.status
描述：无论AJAX访问是否成功，由HTTP协议根据所提交的信息，服务器所返回的HTTP头信息代码，该信息使用“ajax.status”所获得；（由数字1XX,2XX三位数字组成)
常见状态码：200，304，404，500
responseText
语法：
xhr.responseText
描述：获得来自服务器的响应
事件
语法：
xhr.onreadystatechange = callback
描述：当请求被发送到服务器时，每当 readyState 改变时，就会触发 onreadystatechange 事件处理服务端返回的响应
ajax实现步骤
(1)创建Ajax对象
(2)Ajax请求的地址与请求方式
(3)发送请求
(4)获取服务器响应给客户端的数据
(5)处理服务器响应数据JSON.parse和JSON.stringify
ajax的get和post传参
get
语法：
xhr.open('get', 'http://www.api.com?username=ujiuye&password=123456')
描述：get传参只需要在url地址后按照?key=value格式进行传递
服务端代码如下：
const experss = require('express');
const path = require('path');const app = experss();app.listen(3000, () => {console.log(`web服务器工作在3000端口`);
});//设置ejs:
app.set('view engine', 'ejs'); //设置模板引擎为ejs
app.set('views', path.join(__dirname, 'views'));
app.engine('html', require('ejs').__express);//注册用户界面：
app.get('/zhuce', (req, res) => {res.render('zhuce.html');
});//检查用户是否注册过：
app.get('/checkuser', (req, res) => {//获取用户：let uname = req.query.uname ? req.query.uname : '';if (uname == 'demo') { //已注册res.send({ "msg": "用户已注册", "status": 500 });} else { //未注册res.send({ "msg": "用户可用", "status": 200 });}});zhuce.html文件代码如下：
<!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>Document</title>
</head><body><div>帐号：<input type="text" name="usr" id="usr"><span id="usrmsg"></span></div><div>密码：<input type="password" name="pwd" id="pwd"></div><div>密码：<input type="password" name="repwd" id="repwd"></div><div><input type="submit" value="注册"></div><script>let usrObj = document.getElementById('usr');let spanObj = document.getElementById('usrmsg');//第一步：创建ajax对象：new XMLHttpRequest()let xhr = new XMLHttpRequest();usrObj.onblur = function() {//获取用户输入的帐号：let usrval = usrObj.value;// alert(usrval);//true:表示异步 false:表示同步//第二步：创建请求给ajax对象：xhr.open('get/post','请求资源',true/false)xhr.open('get', `/checkuser?uname=${usrval}`, true);//注册事件：处理服务器返回的响应xhr.onreadystatechange = mytest;//第三步：ajax对象发送请求给服务器: xhr.send([参数])xhr.send();}function mytest() {// alert(xhr.readyState);//第四步：服务端处理完请求并返回响应给ajax对象if (xhr.readyState == 4) {//200:为http协议状态码if (xhr.status == 200) { //表示ajax对象与服务端交互是正常的//第五步：ajax对象获取返回的响应并填充到页面相关位置// alert(xhr.responseText);let resObj = JSON.parse(xhr.responseText);spanObj.innerHTML = resObj.msg;if (resObj.status == 200) {spanObj.style.color = 'green';} else {spanObj.style.color = 'red';}}}}</script>
</body></html>post
语法1:
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
xhr.send('username=ujiuye&password=123456');
语法2：
xhr.setRequestHeader('Content-Type', 'application/json')
let data = {username:'ujiuye',password:'123456'}
xhr.send(JSON.stringify(data))
描述：使用setRequestHeader设置响应头，并传递对应的post参数
const express = require("express");
const path = require("path");const app = express();app.listen(6060, () => {console.log(`工作在6060端口`);
});
//接收post的键值对格式发送的参数
app.use(express.urlencoded({extended: false}));
// 设置ejsapp.set('view engine', 'ejs');
app.set('views', path.join(__dirname, 'views'));
app.engine('html', require('ejs').__express);//显示注册界面
app.get('/register', (req, res) => {res.render('ZC_post.html');
});// 检查用户是否注册过app.post('/checkuser', (req, res) => {//获取用户：// let uname = req.query.uname ? req.query.uname : '';let uname = req.body.uname ? req.body.uname : '';let age = req.body.age ? req.body.age : '';console.log(age, uname, 777);if (uname == 'demo') { //已注册res.send({ "msg": "用户已注册", "status": 500 });} else { //未注册res.send({ "msg": "用户可用", "status": 200 });}});
客户端html
<!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>Document</title>
</head><body><div>帐号：<input type="text" name="usr" id="usr"><span id="usrmsg"></span></div><div>密码：<input type="password" name="pwd" id="pwd"></div><div>密码：<input type="password" name="repwd" id="repwd"></div><div><input type="submit" value="注册"></div><script>let usrObj = document.getElementById('usr');let spanObj = document.getElementById('usrmsg');//第一步：创建ajax对象：new XMLHttpRequest()let xhr = new XMLHttpRequest();usrObj.onblur = function() {//获取用户输入的帐号：let usrval = usrObj.value;// alert(usrval);//true:表示异步 false:表示同步//第二步：创建请求给ajax对象：xhr.open('get/post','请求资源',true/false)// xhr.open('get', `/checkuser?uname=${usrval}`, true);xhr.open('post', `/checkuser`, true);//设置请求头信息：以键值对格式发送post参数xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');//注册事件：处理服务器返回的响应xhr.onreadystatechange = mytest;//第三步：ajax对象发送请求给服务器: xhr.send([参数])// xhr.send();xhr.send(`uname=${usrval}&age=20`);}function mytest() {// alert(xhr.readyState);//第四步：服务端处理完请求并返回响应给ajax对象if (xhr.readyState == 4) {//200:为http协议状态码if (xhr.status == 200) { //表示ajax对象与服务端交互是正常的//第五步：ajax对象获取返回的响应并填充到页面相关位置// alert(xhr.responseText);let resObj = JSON.parse(xhr.responseText);spanObj.innerHTML = resObj.msg;if (resObj.status == 200) {spanObj.style.color = 'green';} else {spanObj.style.color = 'red';}}}}</script>
</body></html>Jquery之Ajax
get
$.get('请求地址',{请求参数},function(d){},'json')描述：发送get请求
客户端代码
<!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>Document</title><script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
</head><body><div>帐号：<input type="text" name="usr" id="usr"><span id="usrmsg"></span></div><div>密码：<input type="password" name="pwd" id="pwd"></div><div>密码：<input type="password" name="repwd" id="repwd"></div><div><input type="submit" value="注册"></div><script>$("#usr").blur(function() {//获取用户输入的帐号：let uname = $("#usr").val();// $.get(`/checkuser?uname=${uname}`, function(data) {// console.log(data, 2222);// }, 'json');$.get('/checkuser', {//uname=${uname}简写形式uname}, function(d) {console.log(d, 111);}, 'json');});</script>
</body></html>post
语法：
$.post('请求地址',[{请求参数},]function(d){},'json')描述：发送post请求，data为请求时传递的参数
<!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>Document</title><script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
</head><body><div>帐号：<input type="text" name="usr" id="usr"><span id="usrmsg"></span></div><div>密码：<input type="password" name="pwd" id="pwd"></div><div>密码：<input type="password" name="repwd" id="repwd"></div><div><input type="submit" value="注册"></div><script>$("#usr").blur(function() {//获取用户输入的帐号：let uname = $("#usr").val();$.post('/checkuser', {uname}, function(d) {console.log(d, 999);}, 'json');});</script>
</body></html>ajax
语法：
$.ajax({type: '',//请求方式url: '', //请求地址data: { },//请求的参数dataType:'json',//期望服务端返回的数据类型success: function(res) { }
})描述：可以发送get和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>Document</title><script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
</head><body><div>帐号：<input type="text" name="usr" id="usr"><span id="usrmsg"></span></div><div>密码：<input type="password" name="pwd" id="pwd"></div><div>密码：<input type="password" name="repwd" id="repwd"></div><div><input type="submit" value="注册"></div><script>$("#usr").blur(function() {//获取用户输入的帐号：let uname = $("#usr").val();$.ajax({url: '/checkuser', //请求地址// type: 'get', //请求方式: get/posttype: 'post',// data: {"uname":uneam,"age":20},data: { //设置请求的参数uname,"age": 20},dataType: 'json', //期望服务端返回的数据类型success: function(d) { //成功时要执行的回调函数console.log(d, 9999);$("#usrmsg").html(d.msg);if (d.status == 200) { //可用$("#usrmsg").css('color', 'green');} else { //不可用$("#usrmsg").css('color', 'red');}},error: function(e) {console.log(e, 888);}});});</script>
</body></html>封装ajax
//定义函数：发送ajax请求
function sendAjax(url, data = {}, type = 'get', dataType = 'json') {url = `http://120.55.79.33:6543${url}`return new Promise((resolve, reject) => {$.ajax({url,type,data,dataType,success(d) {//需求：返回dresolve([true, d]);},error(e) {resolve([false, '接口程序调用失败']);}});});
}
调用
$('.loginbtn').click(async function () {let username = $('#username').val();let password = $('#pass').val();let ucode = $('#ucode').val();let [err, obj] = await sendAjax('/users/login', {username,password,ucode,syscode}, 'post');// console.log(obj);if (err) {$('.tips').html(obj.msg);if (obj.status == 200) {$('.tips').css('color', 'green');if (obj.msg == '登录成功') {alert('登录成功');localStorage.ujwtdata = obj.data;location.href = '../userSeting.html';// console.log(obj.data,localStorage.ujwtdata );}} else {$('.tips').css('color', 'red');}} else {alert('登录接口调用失败')}});
