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 ...
随机推荐
- LeetCode刷题总结-二分查找和贪心法篇
本文介绍LeetCode上有关二分查找和贪心法的算法题,推荐刷题总数为16道.具体考点归纳如下: 一.二分查找 1.数学问题 题号:29. 两数相除,难度中等 题号:668. 乘法表中第k小的数,难度 ...
- VS删除代码中没用的空白行
在vs编辑器中有时需要批量删除无用的空白行,为此,可以使用vs编辑器的查找替换功能: 1. Ctrl+H,打开替换功能框. 2.选择“使用正则表达式”,“当前文档”. 3.在查找框中输入: (?< ...
- 4.Android-adt安卓打包过程、adb指令学习
本章学习adt安卓打包过程.adb指令学习.并通过adb将打包的APK发给设备 1.打包 在eclipse中已经帮我们实现打包了. 具体打包流程如下: 最终一个APK包含了如下: classes.de ...
- 百度大脑IOCR财会票据识别技术接入小程序，快速实现财会票据识别
本文主要介绍iOCR财会票据识别的小程序功能实现. 想了解微信小程序的开发过程,请参看我之前的帖子:<UNIT接入小程序>https://ai.baidu.com/forum/topic/ ...
- IDEA开发、测试、生产环境pom配置及使用
pom文件 一般放在最下面,project里 <!--开发环境.测试环境.生产环境--> <!--生产环境--> <profiles> <profile> ...
- 想精通分布式以及高并发架构？那你得先搞定ZooKeeper架构原理！
Zookeeper是分布式一致性问题的工业解决方案,是Apache Hadoop下解决分布式一致性的一个组件,后被分离出来成为Apache的顶级项目. 工程来源:是雅虎公司内部项目,据说雅虎内部很多项 ...
- CentOS 线上搭建 jupyter_server 笔记
一.背景 为公司负责 Data Science 的同事配置线上 jupyter_server (jupyter + jupyter_kernel_gateway)环境. 二.环境 CentOS 7.6 ...
- 解决video.js不兼容ie8问题
使用视频播放器的时候,常常会让兼容一些浏览器问题,比如兼容ie8浏览器.在工作中使用的是video.js. 如果需要兼容,引入两个js库,就可以做到兼容ie8浏览器 <script src=&q ...
- 更换国内pip
pip国内的一些镜像 原始地址:https://pypi.python.org/simple 国内地址: 阿里云 http://mirrors.aliyun.com/pypi/simple/ 中国科技 ...
- HTML基础——基础标签
一.HTML概述 htyper text markup language 即超文本标记语言. 超文本: 就是指页面内可以包含图片.链接,甚至音乐.程序等非文字元素. 标记语言: 标记(标签)构成的语 ...