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 ...
随机推荐
- [NOIP模拟]文本编辑器 题解
bsoj5089 文本编辑器 /* 题意描述 九发明了一个完美的文本编辑器.这个编辑器拥有两个光标(cursor),所以九能够同时在两处地方插入和删除文本.这个编辑器除了正常的编辑功能以外,还有一些只 ...
- leetcode之缺失的第一个正数
给定一个未排序的整数数组,找出其中没有出现的最小的正整数. 示例 1: 输入: [1,2,0]输出: 3示例 2: 输入: [3,4,-1,1]输出: 2示例 3: 输入: [7,8,9,11,12] ...
- 松软科技Web课堂:JavaScript 类型转换
Number() 转换数值,String() 转换字符串,Boolean() 转换布尔值. JavaScript 数据类型 JavaScript 中有五种可包含值的数据类型: 字符串(string) ...
- React搭建项目（全家桶）
安装React脚手架: npm install -g create-react-app 创建项目: create-react-app app app:为该项目名称 或者跳过以上两步直接使用: npx ...
- docker alphine 安装vim 等软件
alphine 不带 yum,所以只能用apt-get 安装 apt-get update apt-get install vim apt-get install net-tools
- 【转】浅谈命令查询职责分离(CQRS)模式
原文链接:https://www.cnblogs.com/yangecnu/p/Introduction-CQRS.html 在常用的三层架构中,通常都是通过数据访问层来修改或者查询数据,一般修改和查 ...
- 群晖NAS再再折腾
问题 最近电信把我的公网地址收回去了,之前做好的网络端口映射失效了,在公司已经不能愉快地访问家里的网络.原先网络结构示意图如下: (直接访问方案网络结构图) 只需要对电信光猫(也是个路由器)和家用 ...
- Mysql - 高可用方案之MMM(一)
一.概述 本文将介绍mysql的MMM(Master-Master replication manager for MySQL)方案.官方文档地址:https://mysql-mmm.org/star ...
- Apollo 分布式配置中心（补充）
1. Namespace 1.1. 什么是Namespace Namespace是配置项的集合,类似于一个配置文件的概念. Apollo在创建项目的时候,都会默认创建一个“application ...
- tornado框架中redis使用
一.安装依赖 pip3 install tornado-redis 二.导入模块 import tornadoredis 三.创建redis对象 import tornadoredis CONNECT ...