ajax - 初步介绍
进入ajax了，想要进入vue还有一个前提就是要把ajax给熟悉一下，看一看客户端与服务器之间是怎么一个通信的过程，第一天主要是先了解了一下ajax的一些介绍，ajax嘛，在进入之前，肯定是要了解一下客户端与服务器之间的一个通信过程，其实不管是请求还是发送都遵循的一个原则，即请求、处理、响应，如何来请求服务器上的数据，需要用到XMLHttpRequest对象，也就是声明一个对象实例var xhrObj = new XMLHttpRequest（）。
我们通常所说的资源请求方式主要是分为两种，一种是get请求向服务器所求资源，一种是post向服务器发送资源。
继续看到什么事ajax？可以简单理解为用到了xhr，那他就是ajax，那么为什么要学习ajax？因为它可以轻松实现网页与服务器之间的数据交互，主要应用在如检测用户名是否被占用、加载搜索提示列表、根据页码刷新表格数据等。
我们这部分先以jQuery为例对ajax做一些操作，因为浏览器提供的xhr用法比较复杂，就先用jq来实现，jq里面主要是就是分为三种$.get() $.post() $.ajax() 这三种，其中前两种的用法是（url，【data】，【callback】），url使我们要请求的资源地址，data是我们的参数，callback是请求成功后的回调函数，他们两个可以带参请求也可以不带参请求，然后$.ajax()它是既可以实现get也可以实现post，
（｛type : ‘get or post’， url ：‘’， data ： ｛｝ ， success ：｝） type就是请求方式，url请求地址，data参数，success是执行成功的回调
下面就是一些jq分别利用ajax的get以及post请求的用法
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>
<button>
发起不带参数的请求
</button>
<body>
<script src="./lib/jquery.js"></script>
<script>
$('button').on('click', () => $.get('http://www.liulongbin.top:3006/api/getbooks', res => console.log(res)))
</script>
</body>
</html>
2.
带参数的请求
<!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>
<button>
发起带参数的请求
</button>
<body>
<script src="./lib/jquery.js"></script>
<script>
$('button').click(() => {
$.get('http://www.liulongbin.top:3006/api/getbooks',{id : 2},res => console.log(res))
})
</script>
</body>
</html>
3.
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>
</head>
<body>
<button>提交</button>
<script src="./lib/jquery.js"></script>
<script>
$('button').on('click',function() {
$.post('http://www.liulongbin.top:3006/api/addbook', {bookname:'水浒传',author:'施耐庵',publisher:'上海图书出版社'},res => console.log(res))
})
</script>
</body>
</html>
4.
ajax的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>
</head>
<body>
<button>get</button>
<script src="./lib/jquery.js"></script>
<script>
$('button').on('click', function() {
$.ajax({
type : 'get',
url : 'http://www.liulongbin.top:3006/api/getbooks',
data : {
bookname : '红楼梦'
},
success : res => console.log(res)
})
}) </script>
</body>
</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>
<button>post</button>
<script src="./lib/jquery.js"></script>
<script>
$('button').on('click', function() {
$.ajax({
type : 'post',
url : 'http://www.liulongbin.top:3006/api/addbook',
data : {
bookname : '红楼梦',
author : '吴承恩',
publisher: '出清图书出版社'
},
success : res => console.log(res)
})
}) </script>
</body>
</html>
5.
然后是今天的综合案例，首先是一个图书管理的页面利用ajax也就是后面会说到的接口达到添加删除图书的作用，然后结构使用bootstrap实现
<!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>
<link rel="stylesheet" href="./lib/bootstrap.css">
<script src="./lib/jquery.js "></script>
</head>
<body style="padding: 15px;">
<!-- 添加图书的面板 -->
<!-- 1.primary表示蓝色的意思 先设置一个面板蓝色 -->
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">添加新图书</h3>
</div>
<!-- 2.1这里有个注意点 加了一个类名form-inline为form加可使里面的子元素为display inline block -->
<div class="panel-body form-inline">
<!-- 2.在面板body里面添加input表单 bs3-input-text这个 然后修改值-->
<div class="input-group">
<div class="input-group-addon">书名</div>
<input type="text" class="form-control" id="iptBookname" placeholder="请输入书名">
</div>
<div class="input-group">
<div class="input-group-addon">作者</div>
<input type="text" class="form-control" id="iptAuthor" placeholder="请输入作者">
</div>
<div class="input-group">
<div class="input-group-addon">出版社</div>
<input type="text" class="form-control" id="iptshiper" placeholder="请输入出版社">
</div>
<button id="btnAdd" class="btn btn-primary">添加</button>
</div>
</div>
<!-- 图书的表格 --> <table class="table table-bordered table-hover">
<thead>
<tr>
<th>ID</th>
<th>书名</th>
<th>作者</th>
<th>出版社</th>
<th>操作</th>
</tr>
</thead>
<tbody> </tbody>
</table>
<script>
// 1.获取图书列表
function getData() {
$.get('http://www.liulongbin.top:3006/api/getbooks',res => {
if (res.status == 500) {
return alert('获取数据失败')
}else {
// 1.1这里有个很厉害很厉害的点我搞了半天终于发现问题所在了，之前一直找不到 数据，就是这里循环的时候，他不是像原生js一样
// 可以只写一个参数值，jq的好像是要把索引和参数都写上才行！！！
let arr = []
$.each(res.data, (i, item) => {
arr.push(`<tr>
<td>${item.id}</td>
<td>${item.bookname}</td>
<td>${item.author}</td>
<td>${item.publisher}</td>
<td><a href="javascript:;" data-id="${item.id}" >删除</a></td>
</tr>`)
})
$('tbody').empty().append(arr.join(''))
}
})
}
getData()
// 1.2为每个删除按钮添加删除功能 首先还是要明确一个点，这里的a标签是后加的，所以才采用事件委托才行
$('tbody').on('click', 'a', function () {
var id = $(this).attr('data-id')
$.get('http://www.liulongbin.top:3006/api/delbook', { id: id }, function (res) {
if (res.status !== 200) return alert('删除图书失败！')
getData()
})
})
// 1.3 添加图书功能
$('#btnAdd').on('click', function() {
let bookname = $('#iptBookname').val()
let author = $('#iptAuthor').val()
let shiner = $('#iptshiper').val()
if (!bookname || !author || !shiner) {
alert(
'请输入完整内容'
)
}else {
$.post('http://www.liulongbin.top:3006/api/addbook', {
bookname : bookname,
author : author,
publisher : shiner
}, function(res) {
if(res.status == 500) return alert('请输入完整内容')
getData()
})
}
})
</script>
</body>
</html>
6.
第二个案例是一个聊天机器人的案例，这个案例还多有趣的，实现的功能有输入内容可出现到聊天的内容区域，对面自动回复机器人也可以对应的回答你，然后就是当聊天内容超过一页之后再发消息，会自动回弹到聊天框的底部，这个要用到一个scrol.js 调用一下里面的resetui（）即可，总体步骤分为先将用户输入内容渲染到聊天框，然后获取到用户输入内容并且发送到服务器获取机器人的回复内容并渲染到聊天界面，再通过一个接口将回复的消息转为语音播放，最后通过输入框的键盘事件检测是否按下回车来点击发送按钮一次
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/main.css" />
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<title>聊天机器人</title>
</head> <body>
<div class="wrap">
<!-- 头部 Header 区域 -->
<div class="header">
<h3>小思同学</h3>
<img src="img/person01.png" alt="icon" />
</div>
<!-- 中间 聊天内容区域 -->
<div class="main">
<ul class="talk_list" style="top: 0px;">
<li class="left_word">
<img src="img/person01.png" /> <span>你好</span>
</li>
</ul>
<div class="drag_bar" style="display: none;">
<div
class="drager ui-draggable ui-draggable-handle"
style="display: none; height: 412.628px;"
></div>
</div>
</div>
<audio style="display: none;" autoplay id="voice"></audio>
<!-- 底部 消息编辑区域 -->
<div class="footer">
<img src="img/person02.png" alt="icon" />
<input type="text" placeholder="说的什么吧..." class="input_txt" />
<input type="button" value="发 送" class="input_sub" />
</div>
</div>
<script type="text/javascript" src="js/scroll.js"></script>
<script src="./js/chat.js "> </script>
</body>
</html>
实现原理
$(function(){
// 初始化右侧滚动条
// 这个方法定义在scroll.js中
// 该方法的作用是一发消息就定位到聊天框的最底部
resetui()
// 1.将用户输入内容渲染到聊天窗口
var text = ''
$('.input_sub').on('click',function() {
var text = $('.input_txt').val()
if(text == '') {
return $('.input_txt').val('')
} else {
$('.talk_list').append('<li class="right_word"><img src="img/person02.png" /> <span>'+text+'</span></li>')
resetui()
$('.input_txt').val('')
getMsg(text)
}
})
// 2.发情请求获取聊天消息
function getMsg(text) {
$.ajax({
type : 'get',
url : 'http://www.liulongbin.top:3006/api/robot',
data : {
spoken : text
},
success : function(res) {
if (res.message == 'success') {
let msg = res.data.info.text
$('.talk_list').append('<li class="left_word"><img src="img/person01.png" /> <span>'+msg+'</span></li>')
resetui()
getAudio(msg)
}
}
})
}
// 3.将回复信息转为语音播放
function getAudio(msg) {
$.ajax({
type : 'get',
url : 'http://www.liulongbin.top:3006/api/synthesize',
data : {
text : msg
},
success : function(res) {
if (res.status == 200) {
$('#voice').attr('src', res.voiceUrl)
}
}
})
}
// 4.使用回车发送消息
$('.input_txt').on('keyup', function(e) {
console.log(e.keyCode);
if (e.keyCode == 13) {
$('.input_sub').trigger('click')
}
})
})
ajax - 初步介绍的更多相关文章
- Ajax初步理解
最近在项目中经常会使用Ajax技术,用法上倒是熟练了,但是只知其然,不知其所以然,抽时间读了读JavaScript高级程序设计中关于Ajax的介绍有了些初步的理解,在此总结一下. 什么是Ajax Aj ...
- 一起学微软Power BI系列-官方文档-入门指南(1)Power BI初步介绍
我们在前一篇文章微软新神器-Power BI,一个简单易用,还用得起的BI产品中,我们初步介绍了Power BI的基本知识.由于Power BI是去年开始微软新发布的一个产品,虽然已经可以企业级应用, ...
- 三、Android学习第三天——Activity的布局初步介绍（转）
(转自:http://wenku.baidu.com/view/af39b3164431b90d6c85c72f.html) 三.Android学习第三天——Activity的布局初步介绍 今天总结下 ...
- mxgraph进阶(二)mxgraph的初步介绍与开发入门
mxgraph的初步介绍与开发入门 前言 由于小论文实验需求,需要实现根据用户日志提取出行为序列,然后根据行为序列生成有向图的形式,并且连接相邻动作的弧上标有执行此次相邻动作的频次.为此,在大师兄徐凯 ...
- 新浪微博API使用初步介绍——解决回调地址的问题
# -*- coding: utf-8 -*- #python 27 #xiaodeng #新浪微博API使用初步介绍——解决回调地址的问题 #http://blog.csdn.net/monsion ...
- Html/CSS 初步介绍html和css部分重要标签
&初步介绍html和css部分重要标签& 注:开头书写:<!DOCTYPE html>表明对应标准html代码 先行总结重点 下方给出具体 CSS: 1. position ...
- Django 小实例S1 简易学生选课管理系统 0 初步介绍与演示
Django 小实例S1 简易学生选课管理系统 第0章--初步介绍与演示 点击查看教程总目录 作者自我介绍:b站小UP主,时常直播编程+红警三,python1对1辅导老师. 1 初步介绍 先介绍下这个 ...
- 【STM32】使用SDIO进行SD卡读写，包含文件管理FatFs（五）-文件管理初步介绍
其他链接 [STM32]使用SDIO进行SD卡读写,包含文件管理FatFs(一)-初步认识SD卡 [STM32]使用SDIO进行SD卡读写,包含文件管理FatFs(二)-了解SD总线,命令的相关介绍 ...
- [置顶] Ajax 初步学习总结
Ajax是什么 Ajax是(Asynchronous JavaScript And XML)是异步的JavaScript和xml.也就是异步请求更新技术.Ajax是一种对现有技术的一种新的应用,不是一 ...
- Ajax【介绍、入门、解决Ajax中文、跨域、缓存】
什么是Ajax Ajax(Asynchronous JavaScript and XML) 异步JavaScript和XML Ajax实际上是下面这几种技术的融合: (1)XHTML和CSS的基于标准 ...
随机推荐
- NASM中的内存引用
NASM对于内存的引用规则非常简单,如果想访问内存中的内容,就将地址用[]包围,如果没有[],就表示是地址本身,而不是内容. mov ax,[wordvar] mov ax,[wordvar+1] m ...
- three.js教程4-Group层级模型
1.组对象Group.层级模型-形成树状结构 //创建两个网格模型mesh1.mesh2 const geometry = new THREE.BoxGeometry(20, 20, 20); con ...
- console小知识
console.log(JSON.stringify(object,null,2));
- 可以远程剪视频、做PS设计的远程控制软件体验
编辑切换为居中 在这里插入图片描述 远程连接 资源共享的新时代 过去很长一段时间,计算机网络最主要的用途就是分享数据资源.进入新时代,伴随网络的高速发展以及云计算等技术的发展,我们进入了不仅仅是数 ...
- 密码学—仿射密码Python程序
文章目录 仿射密码 加密算法 解密算法 仿射密码 古典密码,且属于单表加密. 加密算法 仿射密码公式 c = m×k + b mod 26 c是密文,m是明文,m作为26字母中的明文,因此计算出来的密 ...
- JDK源码阅读-------自学笔记(三)(java.lang.String String用法和描述浅析)
一.源码特点 final约束,使得String不能被继承,内部其他也不能被继承 String用来表示字符串,或字符序列,序列即为数组 内建数组private final char value[];但是 ...
- angular 16 路由守卫更新
在 angular16 中守卫使用方式进行了更新,route 守卫被弃用(取消了CanActivate的使用),新增了功能性守卫(CanActivateFn),支持 inject 注入,官网提供了一个 ...
- pageoffice 6版本隐藏office工具栏和自定义按钮，并修改标题栏内容
在实际项目集成调用PageOffice的过程中: (1)有时需要把Office的工具栏隐藏,比如只读模式打开文件的时候,Office工具栏上的按钮几乎都是灰掉的,此时显示Office工具栏没有任何意义 ...
- saltstack实践案例
master某个配置参考案例 [root@]# cat /etc/salt/master file_ignore_regex: - '/\.git($|/)' file_ignore_glob: - ...
- MinIo对象存储文件上传，下载，预览，批量上传，创建桶等
MinIo 操作工具类 MinIo 旧中文文档 MinIo 英文文档 MinIo 官网地址 https://min.io/ package com.ming.utils; import io.mini ...