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 ...
随机推荐
- Android: Unable to resolve dependency for ':app@debugUnitTest/compileClasspath':
我按照ExoPlayer的github指引添加 implementation 'com.google.android.exoplayer:exoplayer:2.X.X' 发现根本run不起来,并报错 ...
- 大话设计模式Python实现-迭代器模式
迭代器模式(Iterator Pattern):提供方法顺序访问一个聚合对象中各元素,而又不暴露该对象的内部表示. 下面是一个迭代器模式的demo: #!/usr/bin/env python # - ...
- go笔记--rpc和grpc使用
目录 go笔记--rpc和grpc使用 rpc server.go client.go (sync) client.go (async) grpc protoc server.go client.go ...
- IPFS学习-内容标识符(CIDs)
内容标识符(CIDs) 内容标识符也称为CID,是用于指向IPFS中材料的标签. 它不会指示内容的存储位置,但会根据内容本身形成一种地址. CID简短,无论其基础内容的大小如何. CID基于内容的加密 ...
- webpack4配置学习(一)
webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler).当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency gr ...
- Java 8——重复注解和注解的作用范围的扩大化
一.重复注解 在某些情况下,希望将相同的注解应用于声明或类型用途.从Java SE 8发行版开始,重复注解使可以执行此操作. 例如,正在编写代码以使用计时器服务,该服务使能够在给定时间或某个计划上运行 ...
- WebShell代码分析溯源(六)
WebShell代码分析溯源 一.一句话变形马样本 <?php call_user_func('assert', $_REQUEST['assert']); ?> 二.代码分析 1.分析代 ...
- (转)两种高效过滤敏感词算法--DFA算法和AC自动机算法
原文:https://blog.csdn.net/u013421629/article/details/83178970 一道bat面试题:快速替换10亿条标题中的5万个敏感词,有哪些解决思路? 有十 ...
- Java生鲜电商平台-高可用微服务系统如何设计？
Java生鲜电商平台-高可用微服务系统如何设计? 说明:Java生鲜电商平台高可用架构往往有以下的要求: 高可用.这类的系统往往需要保持一定的 SLA,7*24 时不间断运行不代表完全不挂,而是有一定 ...
- How to: Use XPO Upcasting in XAF 如何：在 XAF 中使用 XPO 强制转换
In this topic, you will learn how to use the Upcasting feature of XPO in XAF. It is useful when you ...