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的基于标准 ...
随机推荐
- 启动docker某个image（镜像）的已经关闭的container（容器）
1．创建一个后台运行 ubuntu 容器 root@haima-PC:/home/haima/Desktop# docker run -d --name ubuntu-lnmp ubuntu bf24 ...
- WEB服务与NGINX（25）- LNMP架构-WEB集群部署phpmyadmin
目录 1 LNMP架构-WEB集群部署phpmyadmin 1.1 WEB集群架构需求分析 1.2 WEB集群架构环境 1.3 部署mariadb 1.4 部署web服务器nginx 1.5 部署re ...
- 谈谈 Spring 的过滤器和拦截器
前言 我们在进行 Web 应用开发时,时常需要对请求进行拦截或处理,故 Spring 为我们提供了过滤器和拦截器来应对这种情况.那么两者之间有什么不同呢?本文将详细讲解两者的区别和对应的使用场景. ( ...
- CentOS7部署Redis（离线单机）
一.检查是否安装 ## 检查是否安装了Redis [root@localhost /]# ps -ef | grep redis ## 存在就删除 [root@localhost /]# sudo y ...
- C语言：send + more = money,单词相加求解字母数字谜问题
我用的是穷举法,虽然有点笨,但是在想不到其他更好的方法对我而言就是穷举法. 有程序员大大想到其他方法也可以私信我一起探讨一下~ #include<stdio.h> int main() { ...
- 23ai免费版本环境快速就绪
笔者感受就是搞一套Oracle 23ai的学习测试环境,从未如此的简单高效. 因为近期Oracle 23ai这个话题很火,很多人也在找实验环境想亲自体验测试一番. 其实搞这样的环境没有任何的门槛,甚至 ...
- 【BI 可视化插件】怎么做？ 手把手教你实现
背景 对于现在的用户来说,插件已经成为一个熟悉的概念.无论是在使用软件. IDE 还是浏览器时,插件都是为了在原有产品基础上提供更多更便利的操作.在 BI 领域,图表的丰富性和对接各种场景的自定义是最 ...
- Django——form组件之循环生成标签
from django.contrib import admin from django.urls import path from app01.views import index urlpatte ...
- 分布式缓存NewLife.Redis
NewLife.Redis 是一个Redis客户端组件,以高性能处理大数据实时计算为目标. Redis协议基础实现位于Redis/RedisClient,FullRedis为扩展实现,主要增加列表结构 ...
- nginx基础安装使用和负载均衡高可用,日志切割配置
1. Nginx简介 Nginx [engine x]是HTTP和反向代理服务器,邮件代理服务器和通用TCP / UDP代理服务器,最初由Igor Sysoev编写.很长一段时间以来,它已经在许多重负 ...