javaWeb核心技术第十三篇之Ajax
Js--ajax--原理解释
概述:异步刷新网页,不会刷新整个页面. Get原理:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title> <script>
function sendGetAjax(){
//下面的代码可以不需要练习 但不可以使用IE 浏览器兼容 //1.获得ajax引擎
var xmlHttp = new XMLHttpRequest(); //2.设置回调函数--作用是 响应回来时 ajax引擎会调用回调函数 将数据返回
//回调函数将会被执行四次
xmlHttp.onreadystatechange = function(){
//判断 readyState 状态必须是4 表示响应结束
if(xmlHttp.readyState == 4 ){
//响应结束 不一定就是正确响应
//判断响应必须是成功 成功状态码是200
if(xmlHttp.status == 200){
//接受服务器的值
var textTemp = xmlHttp.responseText;
alert(textTemp);
} if(xmlHttp.status == 404){
alert("yyy");
}
} } //3.打开连接 建立连接
//参数1:请求方式
//参数2:请求的路径
xmlHttp.open("get", "/ee66_day44/DemoServlet?username=jack2&nickname=rose2"); //4.发送
//参数表示 请求体
xmlHttp.send(null);
}
</script> </head>
<body>
<form action="/ee66_day44/DemoServlet" method="post"> <input type="text" name="username" value="jack"/>
<input type="text" name="nickname" value="rose"/>
<input type="submit"/>
</form>
<a href="javascript:void(0)" onclick="sendGetAjax()">点我发送ajax请求</a>
</body>
</html> Post原理:
跟get方式相似,但需要在3和4中间加一个设置请求头的代码. Jquery -- ajax(重点)
Jquery:底层就是js 特性:兼容浏览器,api都是封装好的. Get方式:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title> <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.11.3.min.js"></script>
<script>
function sendGetAjax(){
//1.导入jquery的类库
//2.jquery的api提供工具类
/**
url :请求的路径
params:请求参数
格式1:key=value&key=value...
格式2:{key:value,key:value..} js对象
fn : 回调函数 function(data){} data就是回调函数中服务器响应的数据
type : text 默认值 表示服务器响应的数据是文本 如果设置的是json 直接将字符串数据转换成对象
*/
//$.get(url,params,fn,type);
//$.get("/ee66_day44/DemoServlet"); //应用场景 服务器统计访问人数
//$.get("/ee66_day44/DemoServlet","username=jack2&nickname=rose2");
//$.get("/ee66_day44/DemoServlet",{"username":"jack3","nickname":"rose3"});
$.get("/ee66_day44/DemoServlet","username=jack2&nickname=rose2",function(data){
alert(data);
},"text");
}
</script> </head>
<body>
<form action="/ee66_day44/DemoServlet" method="post"> <input type="text" name="username" value="jack"/>
<input type="text" name="nickname" value="rose"/>
<input type="submit"/>
</form>
<a href="javascript:void(0)" onclick="sendGetAjax()">点我发送ajax请求</a>
</body>
</
html> Post :
Post提交方式和get方式没有区别,参数一样,写法一样.
如果涉及乱码get和post处理是不一样,建议post 案例分析:
1.失去焦点时发送ajax请求.
2.编写函数.
3.发送ajax请求,请求中携带参数.
参数是username
4.编写servlet代码.
5.回调函数中处理响应数据
if(1 失败) {
用户名不可用,显示
可用隐藏
}else {
用户名不可用 隐藏
可用显示
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //1.获得
String username = request.getParameter("username");
//2.处理
if("jack".equals(username)){
//失败 返回1
//3.响应
response.getWriter().print("1");
}else{
//成功 返回0
//3.响应
response.getWriter().print("0");
} } <script> //页面加载
$(function(){
//初始化 可用和不可用都需要隐藏
$("#FailedId").hide();
$("#SuccessId").hide();
//绑定事件
$("#username").blur(function(){
//获得参数
var usernameVal = $("#username").val();
//发送ajax请求
$.post("${pageContext.request.contextPath}/CheckServlet",{"username":usernameVal},function(data){
if("1"==data){
//失败 用户名不可用显示 可用隐藏
$("#SuccessId").hide();
$("#FailedId").show();
}else{
//成功 用户名不可用隐藏 可用显示
$("#SuccessId").show();
$("#FailedId").hide();
}
});
});
})
</script> <div class="col-sm-4">
<span class="label label-success" id="SuccessId">用户名可用</span>
<span class="label label-danger" id="FailedId">用户名不可用</span>
</div> Json(重点):
Json是一种数据格式,用于通信获得数据传递数据方便.
Json对象:
Object:格式 {key:value,key:value....} 使用map,对象,描述
Json数组:
Object : 格式[obj,obj,obj...] 使用数组,list集合描述 数组中可以嵌套对象,对象可以嵌套数组.
Js--json
<script>
//js对象 json 的 和value必须用双引号包括起来 如果是数字 boolean 变量是不需要双引号的
var obj = {"a":"b","c":"d"};
//alert(obj.c); //var obj = "{'a':'b','c':'d'}";
//alert(obj.a);
//字符串 转换 对象
//1.eval可以将字符串转换成可执行的代码片段
//2.eval可以将字符串转换成对象
/* var objTemp = eval( "(" + obj +")" );
alert(objTemp.a); */ var arr = ["a" , "b" , 1 , true , obj];
alert(arr[4].a); var obj2 = {"abc":arr};
</script> 案例分析:自动联想功能
需求:在文本框中输入值,动态的联想数据库中数据填充在下拉框下.
1.联想时,数据库中所有全部联想(查询所有),js前台的细节.
2.加上条件联想(根据条件查询)
*/
首页:
文本框输入内容
1.文本框添加事件(keydown按下,keypress按住,keyup弹起)
使用keyup弹起事件
2.发送ajax,携带参数searchWord
3.编写servlet
4.回调函数中获得数据
将一根div显示,再往框里加数据, <script>
$(function(){
//1.给文本框绑定事件
$("#SearchId").keyup(function(){
//2.获得数据
var wordVal = $("#SearchId").val(); if(""==wordVal){
$("#completeShow").hide();
return;
} //清空ul
$("#showUI").html(""); //3.发送请求
$.post("${pageContext.request.contextPath}/SearchWordServlet",{"searchWord":wordVal},function(data){
//4.遍历 往div中添加数据
$(data).each(function(){
//this 表示 被遍历的当前对象 当前对象表示product List<Product>
$("#showUI").append("<li class='list-group-item'><a href=''>"+this.pname+"("+this.pinyin+")"+"</a></li>");
});
//5.将div显示
$("#completeShow").show(); },"json");
});
})
</script> <div id="completeShow">
<ul class="list-group" id="showUI">
</ul>
</div> 服务器:servlet
1.获得
获得searchWord
2.处理
service.findByWord(searchWord)
返回值List<类名> 3.响应
使用json-lib,将集合转换成json字符串 public class SearchWordServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
try {
//0.乱码
request.setCharacterEncoding("utf-8");
response.setHeader("content-type", "text/html;charset=utf-8");
//1.获得
String word = request.getParameter("searchWord");
//2.处理
ProductService service = new ProductService();
List<Product> list = service.findByWord(word);
//3.响应
String json = JSONArray.fromObject(list).toString();
response.getWriter().print(json);
} catch (Exception e) {
e.printStackTrace();
}
}
public List<Product> findByWord(String word) throws SQLException {
QueryRunner queryRunner = new QueryRunner(C3P0Utils.getDataSource()); String sql =" SELECT * FROM product WHERE pname LIKE ? OR pinyin LIKE ? ";
Object [] params = {
"%"+word+"%","%"+word+"%"
};
return queryRunner.query(sql, new BeanListHandler<Product>(Product.class), params);
}
javaWeb核心技术第十三篇之Ajax的更多相关文章
- javaWeb核心技术第五篇之jQuery
- 概述 - jQuery是一个优秀的javascript框架(js类库),兼容css3和各大浏览器,提供dom,events,animate,ajax等简易的操作.并且jQuery有非常丰富的插件, ...
- javaWeb核心技术第四篇之Javascript第二篇事件和正则表达式
- 事件 - 表单提交(掌握) "onsubmit" - 单击事件(掌握) "onclick" - 页面加载成功事件(掌握) "onload" ...
- javaWeb核心技术第十一篇之Listener
监听器:所谓的监听器是指对整个WEB环境的监听,当被监视的对象发生改变时,立即调用相应的方法进行处理. 监听术语: 事件源:被监听的对象. 监听器对象:监听事件源的对象 注册或绑定:1和2结合的过程 ...
- javaWeb核心技术第十篇之Filter
Web中有三大组件(需要配置web.xml) servlet:服务器端的小程序. Filter(过滤器):运行在服务器,对请求的资源进行过滤,对响应进行包装. 经典案例: 自动登录,网站全局编码,非法 ...
- javaWeb核心技术第八篇之Cookie和Session
会话技术: 会话是什么? 浏览器和服务器交互,浏览器打开网页访问服务器,会话开始,正常交互. 浏览器关闭,会话结束. 会话能干什么? 会话可以共享数据. Cookie和session将数据保存在不同的 ...
- javaWeb核心技术第七篇之HTTP、Tomcat、Servlet、Request和Response
- Web服务器 - 概念: - web资源: "英文直译"网"的意思 资源:一切数据文件 web资源:通过网络可以访问到的资源,通常指的是一切放在服务器上的文件&quo ...
- javaWeb核心技术第六篇之BootStrap
概述: Bootstrap 是最受欢迎的 HTML.CSS 和 JS 框架,用于开发响应式布局.移动设备优先的 WEB 项目. 作用: 开发响应式的页面 响应式:就是一个网站能够兼容多个终端 节约开发 ...
- javaWeb核心技术第三篇之JavaScript第一篇
- 概述 - JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言 - 作用:给页面添加动态效果,校验用户信息等. - 入门案例 - js和html的整合 - 方式1:内联式 ...
- 解剖SQLSERVER 第十三篇 Integers在行压缩和页压缩里的存储格式揭秘（译）
解剖SQLSERVER 第十三篇 Integers在行压缩和页压缩里的存储格式揭秘(译) http://improve.dk/the-anatomy-of-row-amp-page-compre ...
随机推荐
- K8S命令-Kubectl 命令大全
参考1:https://jimmysong.io/kubernetes-handbook/guide/kubectl-cheatsheet.html?h=kubectl Kubctl 命令是操作 ku ...
- 高精度模板 val.1
目录 高精构造 结构体 char数组转高精: 高精加高精 高精乘单精 高精除单精 同样搬以前初三写的... 其实还有个val.2,搬到文章里去了 @ 在做一道斯特林数的时候被卡高精...于是滚来写一些 ...
- C# HttpClient以multipart/form-data形式 提交文件和其它参数
调用文件接口,需要一个上传文件和一个Region参数,参考调用实例 public async Task<WebApiResult> UploadFile(UploadFileModel i ...
- 微信小程序APP生命周期
小程序APP生命周期需要先从app.js这个文件开始,App() 必须在 app.js 中调用,必须调用且只能调用一次,app.js中定义了一些应用的生命周期函数 onLaunch----当小程序初始 ...
- spring boot 2 + shiro 实现简单的身份验证例子
Shiro是一个功能强大且易于使用的Java安全框架,官网:https://shiro.apache.org/. 主要功能有身份验证.授权.加密和会话管理.其它特性有Web支持.缓存.测试支持.允许一 ...
- sonar安装和使用
安装 1. 从官网下载,https://www.sonarqube.org/downloads/ 2. 下载之前要看好要求,我安装的是7.6的版本,要求是jdk1.8,mysql 5.6 到8 ,我使 ...
- 部署flas到服务器：No module named flask
首先,你要先把nginx和uwsgi安装好(个人觉得这搭起来比较舒服),可以通过pip 或者源安装,具体方法在前面我有提到过,好了接下来我就讲讲我的踩坑经历与解决办法. 我先采用的pip insta ...
- GitHub 设置和取消代理，加速 git clone
git 设置代理: git config --global git 取消代理: git config --global --unset http.proxy 针对 github.com 设置代理: g ...
- linux（center OS7）安装JDK、tomcat、mysql 搭建java web项目运行环境
一.安装JDK 1.卸载旧版本或者系统自带的JDK (1)列出所有已安装的JDK rpm -qa | grep jdk (2)卸载不需要的JDK yum -y remove 安装包名称 2.下载并解压 ...
- jQuery实现回车触发登录按钮的功能
jQuery实现回车触发登录按钮的功能,代码如下: $('body').keyup(function(e){ if(e.keyCode===13){ $('.login').click() } }) ...