javaWeb核心技术第十三篇之Ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://cloud.tencent.com/developer/article/1508629
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);
}本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2019年09月01日，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读