Ajax入门及jQuery库对Ajax的封装
一、Ajax
1、什么是Ajax
全称为Asynchronous JavaScript And XML，异步JavaScript和XML的一种网页开发技术。是由JavaScript、XML、DOM、CSS等多种已有技术组合而成的一种浏览器端技术。用于实现与服务器进行异步交互的功能。它可以实现页面无刷新更新数据(页面的局部刷新),提高用户浏览网页的体验。相较于传统网页，使用Ajax技术的优势具体有以下几个方面：
（1）、减轻服务器的负担
（2）、节省带宽
（3）、用户体验更好
2、Ajax的实现步骤
(1)、创建Ajax对象
var xhr = new XMLHttpRequest(); //xhr就是Ajax对象(异步请求对象)
(2)、由Ajax对象调用open方法配置请求方式、请求地址
xhr.open('请求方式','请求地址')
(3)、由Ajax对象调用send方法向服务器发送请求
xhr.send()
(4)、获取服务器端的响应信息：监听onload事件
xhr.onload = function(){}
(5)、获取服务器端响应给客户端的数据：通过触发onreadystatechange事件
xhr.onreadystatechange = function() {}
3、Ajax的状态码
| Ajax状态码 | 说明 |
|---|---|
| 0 | 请求未初始化（还没有调用open()方法） |
| 1 | 请求已经建立(调用了open方法)，但是还没有发送（还没有调用send()方法） |
| 2 | 请求已经发送 |
| 3 | 请求正在处理中，通常响应中已经有部分数据可以用了 |
| 4 | 响应已经完成，可以获取并使用服务器的响应数据了 |
(1)、Ajax对象获取状态码的方法：
xhr.readyState
(2)、Ajax对象获取服务器端的响应数据
xhr.responseText
演示：
<!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>
<script>
var xhr = new XMLHttpRequest()
//2、输出Ajax对象的状态码
console.log(xhr.readyState)
//3、配置get地址和请求方式
xhr.open('get','http://localhost:3000/params/gets')
//4、再次输出Ajax对象的状态码
console.log(xhr.readyState)
//5、监听onland事件
xhr.onreadystatechange = function(){
console.log(xhr.readyState)
console.log(xhr.responseText)
}
//6、发送ajax异步请求
xhr.send()
</script>
</body>
</html>
在Express项目中执行到这一步时会出现跨域和同源问题，具体什么是跨域和同源以及解决方法可以看我之前写的博客
二、jQuery库对Ajax的封装：
1、底层封装函数
$.ajax({
url: '请求地址',
type:'请求方式',
contentType:'请求参数的类型',
data:'发送到服务器的数据',
dataType:'服务器返回的数据类型',
success:function(data, textStatus){}, --- 请求-响应成功后调用的函数
error：function(xhr,){} --- 请求-响应失败后调用的函数
})
演示：
<!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>
<style>
div{
width: 500px;
margin: 100px auto;
}
</style>
<body>
<form action="" method="get">
<label for="">
用户名：<input type="text" id="username">
</label>
<br><br>
<label for="">
密码:<input type="password" id="userpwd">
</label>
<br><br>
<button type="button" id="btn_reset">重置</button>
<button type="button" id="btn_submit">登录</button>
</form>
<br><br>
<span id="msg"></span>
<script src="../js/jquery-3.4.1.js"></script>
$(function(){
//1、给登录按钮绑定click事件
$('#btn_submit').click(function(){
//2、获取用户输入的用户名，密码
let name = $('#username').val()
let pwd = $('#userpwd').val()
//3、调用Ajax函数向服务器发起异步的请求
$.ajax({
url :'http://localhost:3000/login/get',
type:'get',
data:{
username:name,
userpwd:pwd
},
success:function(data){
$('#msg').html(data)
},
error:function(error){
console.log(error)
}
})
})
})
</body>
</html>
（express框架）：
var express = require('express')
var router = express.Router()
//http://localpost:3000/login/get
router.get('/get',(req, res) => {
let uname = req.body.username
let upwd = req.body.userpwd
if(uname === 'abc' && upwd ==='123456'){
res.send('登录成功')
}else{
res.send('用户名或密码错误，登录失败')
}
})
module.exports = router
输入用户名：abc，密码：123456，显示登录成功
输入用户名：abc，密码：12345，用户名或密码错误，登录失败
2、高层封装函数
2.1、get请求
$.get(url, [data], [callback], [type]) //发起get请求
url：请求的服务器地址
data：请求参数(key/value)
callback：请求成功的回调函数
type：响应信息的格式
<!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>
<style>
div{
width: 500px;
margin: 100px auto;
}
</style>
<body>
<div>
<form action="" method="get">
<label for="">
用户名：<input type="text" id="username">
</label>
<br><br>
<label for="">
密 码：<input type="password" id="userpwd">
</label>
<br><br>
<button type="button" id="btn_reset">重置</button>
<button type="button" id="btn_submit">登录</button>
</form>
<br><br>
<span id="msg"></span>
</div>
<script src="../js/js/jquery-3.4.1.js"></script>
<script>
$(function(){
//1、给登录按钮绑定click事件
$('#btn_submit').click(function(){
//2、获取用户输入的用户名，密码
let name = $('#username').val()
let pwd = $('#userpwd').val()
$.get('http://localhost:3000/login/get',{username:name,userpwd:pwd},function(result){
$('#msg').html(result)
})
})
})
</script>
express框架：
var express = require('express')
var router = express.Router()
//http://localpost:3000/login/get
router.get('/get',(req, res) => {
let uname = req.body.username
let upwd = req.body.userpwd
if(uname === 'abc' && upwd ==='123456'){
res.send('登录成功')
}else{
res.send('用户名或密码错误，登录失败')
}
})
module.exports = router
2.2、post请求
$.post(url, [data], [callback], [type]) //发起post请求
url：请求的服务器地址
data：请求参数(key/value)
callback：请求成功的回调函数
type：响应信息的格式
<!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>
<style>
div{
width: 500px;
margin: 100px auto;
}
</style>
<body>
<div>
<form action="" method="get">
<label for="">
用户名：<input type="text" id="userName">
</label>
<br><br>
<label for="">
密 码：<input type="password" id="userPwd">
</label>
<br><br>
<button type="button" id="btn_reset">重置</button>
<button type="button" id="btn_submit">登录</button>
</form>
<br><br>
<span id="msg"></span>
</div>
<script src="../js/js/jquery-3.4.1.js"></script>
<script>
$(function(){
//1、给登录按钮绑定click事件
$('#btn_submit').click(function(){
//2、获取用户输入的用户名，密码
let name = $('#userName').val()
let pwd = $('#userPwd').val()
// $.post('http://localhost:3000/login/post',{username:name,userpwd:pwd},function(result){
// $('msg').html(result)
// })
$.post('http://localhost:3000/login/post',{userName:name,userPwd:pwd},function(result){
$('#msg').html(result)
})
})
})
</script>
</body>
</html>
express框架：
var express = require('express')
var router = express.Router()
router.post('/post',(req, res) => {
let uname = req.body.userName
let upwd = req.body.userPwd
if(uname === 'abc' && upwd ==='123456'){
res.send('登录成功')
}else{
res.send('用户名或密码错误，登录失败')
}
})
module.exports = router
3、辅助函数
serialize()：表单序列化函数(将表单(form)中的控件的值转换成字符串)
演示：
<!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>
<p id="results"><b>毕业院校: </b> </p>
<form id="form">
<select name="single">
<option>西安交通大学</option>
<option>北京大学</option>
</select>
<br><br>
<label for="">爱好</label>
<input type="checkbox" name="hobby" value="足球"/> 足球
<input type="checkbox" name="hobby" value="电影" checked="checked"/> 电影
<br><br>
<label for="">性别：</label>
<input type="radio" name="sex" value="男" checked="checked"/> 男
<input type="radio" name="sex" value="女"/> 女
</form>
<br><br>
<button type="button" id="btn">获取表单数据</button>
<script src="../js/js/jquery-3.4.1.js"></script>
<script>
$(function(){
$('#btn').bind('click',function(){
let str = $('form').serialize()//表单序列化
$.post('http://localhost:3000/test/serlize',$('form').serialize(),function(result){
console.log(result)
})
})
})
</script>
</body>
</html>
结果：
