-
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对象(异步请求对象)- 1
(2)、由Ajax对象调用open方法配置请求方式、请求地址
xhr.open('请求方式','请求地址')- 1
(3)、由Ajax对象调用send方法向服务器发送请求
xhr.send()- 1
(4)、获取服务器端的响应信息：监听onload事件
xhr.onload = function(){}- 1
(5)、获取服务器端响应给客户端的数据：通过触发onreadystatechange事件
xhr.onreadystatechange = function() {}- 1
3、Ajax的状态码
Ajax状态码 说明 0 请求未初始化（还没有调用open()方法） 1 请求已经建立(调用了open方法)，但是还没有发送（还没有调用send()方法） 2 请求已经发送 3 请求正在处理中，通常响应中已经有部分数据可以用了 4 响应已经完成，可以获取并使用服务器的响应数据了 (1)、Ajax对象获取状态码的方法：
xhr.readyState- 1
(2)、Ajax对象获取服务器端的响应数据
xhr.responseText- 1
演示：
<!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>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
在Express项目中执行到这一步时会出现跨域和同源问题，具体什么是跨域和同源以及解决方法可以看我之前写的博客
二、jQuery库对Ajax的封装：
1、底层封装函数
$.ajax({ url: '请求地址', type:'请求方式', contentType:'请求参数的类型', data:'发送到服务器的数据', dataType:'服务器返回的数据类型', success:function(data, textStatus){}, --- 请求-响应成功后调用的函数 error：function(xhr,){} --- 请求-响应失败后调用的函数 })- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
演示：
<!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>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
（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- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
输入用户名：abc，密码：123456，显示登录成功
输入用户名：abc，密码：12345，用户名或密码错误，登录失败
2、高层封装函数
2.1、get请求
$.get(url, [data], [callback], [type]) //发起get请求 url：请求的服务器地址 data：请求参数(key/value) callback：请求成功的回调函数 type：响应信息的格式- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
<!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>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
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- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
2.2、post请求$.post(url, [data], [callback], [type]) //发起post请求 url：请求的服务器地址 data：请求参数(key/value) callback：请求成功的回调函数 type：响应信息的格式- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
<!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>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
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- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
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>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
结果：
-
相关阅读:
leaflet 地图遮罩、扣洞
(三十三)geoserver源码&添加新的数据存储
技术对接50
t-sne 数据可视化网络中的部分参数+
ts中关于path使用RouteLocationRaw报错
为什么方法断点那么慢
如何从戴尔笔记本电脑恢复数据？
Redis（12）Bitmap
拓展欧几里得算法思路解释、代码以及例题【线性同余方程】
从零开始搭建仿抖音短视频APP-后端开发粉丝业务模块（2）
- 原文地址：https://blog.csdn.net/thwr1881/article/details/126002280
