Ajax后端极简笔记
AJAX
第一章：AJAX基础
概念：AJAX = Asynchronous JavaScript And XML（异步的 JavaScript 和 XML）。阿贾克斯css
AJAX 不是新的编程语言，而是一种使用现有标准的新方法。html
AJAX 是与服务器交换数据并更新部分网页的艺术，在不从新加载整个页面的状况下。简言之：是局部刷新技术。异步刷新。前端
回顾历史：java
- Web 1.0 sina sohu 用户被动接受新闻
- Web 2.0 社区，web群 互动 环节增长，用户和服务器交互
- Web 3.0 自媒体，突出客户的实现，客户也能够成为中心，其余人订阅 参与 讨论等
- Web 4.0 物联网时代 自媒体 人 服务器 +机器交互，机器自己也是参与者。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-b2zn4Crx-1595717644137)(E:\政通路\课堂笔记\S2\Ajax\assets\image-20200509143743804.png)]node
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-M9fByRhC-1595717644139)(E:\政通路\课堂笔记\S2\Ajax\assets\image-20200509143807384.png)]python
1.Ajax核心 XMLHttpRequest
全部现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。jquery
XMLHttpRequest 用于在后台与服务器交换数据。这意味着能够在不从新加载整个网页的状况下，对网页的某部分进行更新。web
1.1 对象的建立
let xmlhttp;if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}123456789
1.2 对象的方法
method：http请求的方法有俩get/post,选择就是get/post。ajax
url：就是View层的页面要提交到服务器的请求，通常是Servletsql
async:true：异常请求；false:同步请求
异步请求：效率、性能更高；
同步请求：会致使网络卡顿|网页无响应的现象、页面冻结。
| 方法 | 描述 |
|---|---|
| open(method,url,async) | 建立一个请求 |
| send(string) | 将请求发送到服务器。 string：仅用于 POST 请求 |
1.3 onreadystatechange 事件
当请求被发送到服务器时，咱们须要执行一些基于响应的任务。
每当 readyState 改变时，就会触发 onreadystatechange 事件。
readyState 属性存有 XMLHttpRequest 的状态信息。
下面是 XMLHttpRequest 对象的三个重要的属性：
| 属性 | 描述 |
|---|---|
| onreadystatechange | 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。 |
| readyState | 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。 0: 请求未初始化 1: 服务器链接已创建 2: 请求已接收 3: 请求处理中 4: 请求已完成，且响应已就绪 |
| status | 200: "OK"404: 未找到页面；500：服务器问题 |
1.4 服务器的响应
如需得到来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。
| 属性 | 描述 |
|---|---|
| responseText | 得到字符串形式的响应数据。 |
| responseXML | 得到 XML 形式的响应数据。 |
2.使用步骤
如何使用ajax，使用有两种：一种是前端的纯粹的使用，node+ajax；一种是后台的，咱们关注的是后台。
咱们以前增长用户的时候，假设用户名(帐户)不能重复，咱们以前是没有判断的。
当数据库服务器存在某用户的时候，文本框离开，则报已经存在该用户了；不然，显示能够注册。
- 建立XMLHttpRequest对象
- 设置请求信息open(get|post,url,true|false)
- 向服务器发送请求
- 让XmlHttpRequest对象接受服务器的响应数据，经过建立的回调函数
- 编写服务器端处理客户端请求
| 步 骤 | 请求方式 | 实 现 代 码 |
|---|---|---|
| 初始化组件 | GET | xmlHttpRequest.open( “GET”,url, true ); |
| POST | xmlHttpRequest.open( “POST”,url, true ); xmlHttpRequest.setRequestHeader( “Content-Type”, “application/x-www-form-urlencoded” ); | |
| 发送请求 | GET | xmlHttpRequest.send( null ); |
| POST | xmlHttpRequest.send(“key=xxx&type=12&year=2016” ); |
get代码实现：
//1.建立XmlHttpRequest对象,封装一下，封装到一个函数;
function createXhr() {
if(window.XMLHttpRequest)
return new XMLHttpRequest();//若是有，则建立其对象;
else
return new ActiveXObject("Microsoft.XMLHTTP");
}
//2.开始实现咱们的目标；离开的事件是blur
$(function () {
//离开的时候，先判断一下；用户名不能为空，实际上应该是正则验证;
$("#name").blur(function () {
let name=$("#name").val();
if(name==null||name==''){//后续使用正则实现
$("#nameinfo").html("用户不能为空!").addClass("nameinfo");
/*刚才的错误是style里面加了一个html的注释，亏!!!*/
}else{
//不然，就是输入的不是空了，有值，那这个值就要看看是否存在于数据库了。
//2.1 这时候要获得XmlHttpRequest对象;
xhr=createXhr();
//2.2设置请求行open,请求后台的Servlet,客户端向服务器发送了一个参数name，值name
xhr.open("get","userServletByName?name="+name,true);
//2.3.发送请求,get的时候不加东西；
xhr.send(null);
//2.4当事件改变Ok的时候，响应的函数；
xhr.onreadystatechange=function () {
//readyState==4;而且状态为200的时候，才OK。
if(xhr.readyState==4 && xhr.status==200){
//定义变量data，接受异步对象xhr的服务器的响应数据;由Servlet来返回
let data=xhr.responseText;
console.log(data);
//暂停一下;
//下面就是根据data响应的数据值作出判断;
//服务器端响应给咱们，true|false了.data-->文本;咱们把它当成了boolean
if(data=='true'){
$("#nameinfo").html("用户名已经注册").addClass("nameinfo");
}else{
$("#nameinfo").html("用户名能够注册");
$("#nameinfo").css("color","green");
}
}
}
}
});
})123456789101112131415161718192021222324252627282930313233343536373839404142434445
post代码实现：
修改get的2. 3.步骤便可;
//2.2设置请求行open,请求后台的Servlet,客户端向服务器发送了一个参数name，值name
//xhr.open("get","userServletByName?name="+name,true);
xhr.open("post","userServletByName",true);
xhr.setRequestHeader( "Content-Type", "application/x-www-form-urlencoded" ); //必须有;
//2.3.发送请求,get的时候不加东西；
//xhr.send(null);get 没东西;
xhr.send("name="+name);1234567
问题：
1.[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6K4fNd27-1595717644143)(E:\政通路\课堂笔记\S2\Ajax\assets\image-20200509155731042.png)]
//向客户端发响应，编码要一致;
response.setContentType("text/html;charset=UTF-8");
response.setCharacterEncoding("UTF-8");123
2.出来2行的问题是须要加判断,而且&&符号；
if(xhr.readyState==4 && xhr.status==200){
代码 }123
总结一下：
1.了解异步对象XmlHttpRequest
2.了解其四大步骤；
3.经过javaweb代码来实践一下。这个是重点，看视频，一步一步走；
第二章 jQuery实现Ajax
传统方式实现Ajax的不足
- 步骤繁琐
- 方法、属性、经常使用值很差记忆
- 处理复杂数据（如XML）比较麻烦
- 浏览器兼容问题
jQuery Ajax将Ajax相关操做进行了封装。$.ajax() 方法经过 HTTP 请求加载远程数据。
该方法是 jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get(), . p o s t ( ) 等 。 .post() 等。.post()等。.ajax() 返回其建立的 XMLHttpRequest 对象。
. a j a x ( ) 它 包 括 ： .ajax()它包括：.ajax()它包括：.get(),$.post()
2.1 语法格式
();小括号里面包括了{}。
在{}里面，写了type,url,data,success,dataType这样几个key关键字的，给这几个关键字赋值的时候，使用的是:"值"的方式。
$.ajax({
type: ‘POST’, //请求方式，默认为get
url: url ,
data: data ,
success: success ,
dataType: dataType
});
参数
| 参数 | 描述 |
|---|---|
| url | 必需。规定把请求发送到哪一个 URL,Servlet|Controller |
| data | 可选。映射或字符串值。规定连同请求发送到服务器的数据，客户端向服务器的数据 |
| success(result, textStatus, jqXHR) | 可选。请求成功时执行的回调函数。 |
| dataType | 可选。规定预期的服务器响应的数据类型。 默认执行智能判断（xml、json、script 或 html）。 |
昨天else以后的代码替换：
$.ajax({
type:"get",
url:"userServletByName",
//data:"name="+name, //是客户端向服务器的请求数据
//按照json格式传递;
data:{"name":name}, //""里面的是key,不带"的是value。
datatype:"text",
success:function(result) { //成功的时候，执行的匿名函数;对比昨天的onreadyStatechange
console.log(result);
if(result=='true'){
$("#nameinfo").html("用户名已经注册").addClass("nameinfo");
}else{
$("#nameinfo").html("用户名能够注册").addClass("gre");
}
}
});12345678910111213141516
代码量很是简练。
第三章 JSON
概念：是一种轻量级的数据交换格式，采用彻底独立于编程语言的文本格式来存储和表示数据。英文：JavaScript Object Notation
3.1语法格式
{key1：value1, key2：value2, …} 的键值对结构，当值为字符串的时候，须要使用"",引发来。
let str={“name”:“张三”,“age”:18,“address”:“河南郑州”}
json数组,数组的格式：
[],这个[]里面放多个{}对象或字符串
[
{}, 这些都是json格式
{},
{}
]
json对象读取：
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<title>ajax</title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
//1.定义一个简单的json对象
//这个json对象，前面的key，id name age,这些是否是数据库里面的字段呢？？？
//未来，咱们的数据库的数据，能够转换为json数据,python,go,java均可以使用
let user={"id":1,"name":"张三","age":22};
//let user='{"id":1,"name":"张三","age":22}';
//json字符串，字符串以""或'',包括起来;
//console.log(user);
//下面将这个json的数据拿到html元素里面;
$(function(){
//加载的时候，追加到span里面
//访问json对象的时候，格式：对象名.key,对象是user
$("#cont").append("编号:"+user.id+"<br/>"+
"姓名:"+user.name+"<br/>"+
"年龄:"+user.age+"<br/>");
})
</script>
</head>
<body>
<span id="cont" style="display:block;border: 1px solid #2A65BA;"></span>
</body></html>1234567891011121314151617181920212223242526272829
json数组读取：
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<title>json数组的格式</title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
//1.定义json数组格式;强调，不加''或""的都是对象格式;
let users=[
{"id":1,"name":"张三","age":22},
{"id":2,"name":"李四","age":12},
{"id":3,"name":"卢本伟","age":33}
];
console.log(users);//json对象数组;
//目标：将name放到下拉框里面？？？
$(function(){
//针对users左一个遍历;
for(let i=0;i<users.length;i++){
//将name放到select元素里面;value的好处，能够未来给后台传递id，name作显示。
$("#sel").append("<option value="+users[i].id+">"+users[i].name+"</option>");
}
})
</script>
</head>
<body>
<!-- 下拉框;下拉框里面的元素对象是option列表对象； -->
<select id="sel">
</select>
<!-- 如何扩充，将users的数据填充到table里面呢？？？ -->
</body></html>123456789101112131415161718192021222324252627282930313233
第四章 Ajax和Json
案例 Ajax实现搜索框自动补全
由于Ajax技术异步请求和无刷新特性，使得在客户端用户体验愈来愈丰富。 最典型的一个案例是各大搜索引擎都应用的搜索关键字自动联想功能，当打开Google或者百度， 在搜索栏中输入关键字时， 会自动弹出不少和关键字相关的信息。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-L3AKdB5Y-1595717644148)(E:\政通路\课堂笔记\S2\Ajax\assets\image-20200512094045330.png)]
思路
1.当用户松开键盘（输入内容）时向服务器发送请求，处理事件是onkeyup;
2.服务器获得客户端的请求数据以后，去数据库查询结果，返回查询结果到客户端；
3.客户端获得响应数据以后，自动填充到自动提示区域；
4.在选中内容上，光标悬停会有背景突出显示；
5.当咱们单击某个内容的时候，内容显示到搜索框，整个提示区域关闭；
步骤
1.构建页面，onkeyup事件
搜索框的onkeyup事件;
<%@ page contentType="text/html;charset=UTF-8" language="java" %><html><head>
<title>ajax自动补全</title>
<style>
@import url("css/news.css");
</style>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
//1.2 搜索框onkeyup事件
$(function () {
$("#key").keyup(function () {
//首选仍是先判断文本框内容是否为空;
let key=$(this).val();
if(key==null||key==''){
$("#tips").css("display","none");
return;
}else{
//其余，就是搜索框有内容，ajax操做；
}
});
});
</script></head><body>
<!--1.1构建页面：页面元素（搜索框，按钮，提示区域）-->
<form action="" method="get">
<input type="text" name="key" id="key" placeholder="请输入新闻标题">
<button id="search" type="button">搜索</button><br/>
<div id="tips"></div>
</form></body></html>1234567891011121314151617181920212223242526272829303132333435
2.客户端请求服务器的数据
$.ajax({})–>Servlet–>业务层对象–>dao层对象–sql数据；
NewsDaoImpl容易出错的代码，sql语句的模糊查询，再次强调！！！
能够先填坑！！！
// String sql="select * from news where title like ?";
// //预编译语句对象赋值，？% key %
// Object[]params={"%"+key+"%"};
String sql="select * from news where title like concat('%',?,'%')";
Object[]params={key};
return BaseDao.findList(sql,News.class,params);1234567
补充：fastjons jar
Servlet代码
坑1：xml问题，须要设置编码；
坑2：json,修改text/json,务必有json
//1.服务器端的Servlet,接受客户端的数据；
String key=request.getParameter("key");
//2.调用业务层的对象；业务层的对象，又须要去调用dao层对象;
NewsService newsService=new NewsServiceImpl();
//业务层对象，根据关键字来查找新闻;
List<News> newsList = newsService.selNewsByKey(key);
//System.out.println(newsList);
response.setContentType("text/html;charset=utf-8");
response.setCharacterEncoding("utf-8");
//向客户端发送数据;
PrintWriter writer = response.getWriter();
//注意：此处有变化，使用到了新的jar：fastjson
//以前输出的是List<News>对象;
writer.print(JSON.toJSON(newsList)); //fastJson直接将咱们的对象集合转换为json数据;
writer.flush();
writer.close();12345678910111213141516
3.填充数据到显示区域
这时候已经获得数据了：
[{}] 是json数组;
//测试json数组的长度
//console.log(result.length);
//如何显示2条json数组的数据；思路：循环；
let content=""; //定义变量，接受title的内容;
for(let i=0;i<result.length;i++){
content+="<div>"+result[i].title+"</div>";
}
//填充到提示区域;
$("#tips").html(content).show();123456789
4.5 剩下功能
//4.背景突出显示;利用hover(a,b):至关于mouseover,mouseout
$(".list_link").hover(
function(){
$(this).addClass("hover");
},
function () {
$(this).removeClass("hover");
}
);
//5.单击选中内容的时候，提示区域没有了，选中内容到了搜索框 ；
$(".list_link").click(function () {
$("#key").val($(this).html());
$("#tips").html("").hide();//清空，并隐藏;
});1234567891011121314
做业：如何显示新闻标题 新闻做者,模仿天猫的自动补全；
},
function () {
$(this).removeClass("hover");
}
);
//5.单击选中内容的时候，提示区域没有了，选中内容到了搜索框 ；
$(".list_link").click(function () {
$("#key").val($(this).html());
$("#tips").html("").hide();//清空，并隐藏;
});12345678910
做业：如何显示新闻标题 新闻做者,模仿天猫的自动补全； [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SlrYvPTS-1595717644153)(E:\政
- 1. Ajax后端极简笔记
- 2. 【极简笔记】OpenPose
- 3. Node.js 极简笔记
- 4. 极简笔记 DeepLabv3+
- 5. 极简笔记 AlphaPose
- 6. ajax极简教程
- 7. 极简笔记 Deformable Convolutional Networks
- 8. Git极简学习笔记
- 9. 【极简笔记】Focal Loss
- 10. 极简笔记 Instance Segmentation Survey
- 更多相关文章...
- • AJAX 简介 - PHP教程
- • AJAX 简介 - ASP 教程
- • Tomcat学习笔记（史上最全tomcat学习笔记）
- • Git可视化极简易教程 — Git GUI使用方法
-
每一个你不满意的现在，都有一个你没有努力的曾经。