这里写目录标题
Ajax & Jquery
1. Ajax概念
Ajax：(Asynchronous JavaScript And XML)指异步 JavaScript 及 XML。不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的 Web 应用程序的技术，是基于JavaScript、XML、HTML、CSS新用法
Ajax：只刷新局部页面的技术
- JavaScript：更新局部的网页
- XML：一般用于请求数据和响应数据的封装
XMLHttpRequest对象：发送请求到服务器并获得返回结果- CSS：美化页面样式
- 异步：发送请求后不等返回结果，由回调函数处理结果
JavaScript中XMLHttpRequest对象是整个Ajax技术的核心，它提供了异步发送请求的能力
同时，不同浏览器，甚至相同浏览器的不同版本，获取该对象的方式是不同的。
1.1 常用方法
1.1.1 方法
- open() “get|post” ，“url?name=tom” ，“true|false”
- send() 发送请求 。可以带参数 或 null
- setRequestHeader()
1.1.2 属性
- readyState：类型short；只读
- responseText：类型String；只读
- responseXML：类型Document；只读
- status：类型short；只读
readyState: XMLHttpRequest的状态信息
status：HTTP的状态码
responseText：获得响应的文本内容
responseXML：获得响应的XML文档对象 documednt
注：就绪状态是4而且状态码是200，才可以处理服务器数据
使用Ajax验证用户名是否存在实现步骤：
- 使用文本框的onBlur事件
- 使用Ajax技术实现异步交互
- 创建XMLHttpRequest对象
- 通过 XMLHttpRequest对象设置请求信息
- 向服务器发送请求
- 创建回调函数，根据响应状态动态更新页面
1.1.3 事件处理器
- onreadystatechange 指定回调函数
1.2 数据请求
1.2.1 Get
1.创建对象
function ajaxFunction(){
var xmlHttp;
try{ // Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e){
try{// Internet Explorer
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e){}
}
}
return xmlHttp;
}
- 发送请求
//执行get请求
function get() {
//1. 创建xmlhttprequest 对象
var request = ajaxFunction();
//2. 发送请求。
// http://localhost:8080/day16/demo01.jsp
//http://localhost:8080/day16/DemoServlet01
/*
参数一： 请求类型 GET or POST
参数二： 请求的路径
参数三： 是否异步， true or false
*/
request.open("GET" ,"/day16/DemoServlet01" ,true );
request.send();
}
如果发送请求的同时，还想获取数据，那么代码如下
//执行get请求
function get() {
//1. 创建xmlhttprequest 对象
var request = ajaxFunction();
//2. 发送请求
request.open("GET" ,"/day16/DemoServlet01?name=aa&age=18" ,true );
//3. 获取响应数据 注册监听的意思。 一会准备的状态发生了改变，那么就执行 = 号右边的方法
request.onreadystatechange = function(){
//前半段表示 已经能够正常处理。 再判断状态码是否是200
if(request.readyState == 4 && request.status == 200){
//弹出响应的信息
alert(request.responseText);
}
}
request.send();
}
1.2.2 Post
<script type="text/javascript">
//1. 创建对象
function ajaxFunction(){
var xmlHttp;
try{ // Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e){
try{// Internet Explorer
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e){}
}
}
return xmlHttp;
}
function post() {
//1. 创建对象
var request = ajaxFunction();
//2. 发送请求
request.open( "POST", "/day16/DemoServlet01", true );
//如果不带数据，写这行就可以了
//request.send();
//如果想带数据，就写下面的两行
//如果使用的是post方式带数据，那么 这里要添加头， 说明提交的数据类型是一个经过url编码的form表单数据
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//带数据过去 ， 在send方法里面写表单数据。
request.send("name=aobama&age=19");
}
</script>
1.2.3 数据获取
<script type="text/javascript">
function post() {
//1. 创建对象
var request = ajaxFunction();
//2. 发送请求
request.open( "POST", "/day16/DemoServlet01", true );
//想获取服务器传送过来的数据， 加一个状态的监听。
request.onreadystatechange=function(){
if(request.readyState==4 && request.status == 200){
alert("post："+request.responseText);
}
}
//如果使用的是post方式带数据，那么 这里要添加头， 说明提交的数据类型是一个经过url编码的form表单数据
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//带数据过去， 在send方法里面写表单数据。
request.send("name=aobama&age=19");
}
</script>
2. Ajax案例 【校验用户名是否可用】
2.1 搭建环境
- 页面准备
<body>
<table border="1" width="500">
<tr>
<td>用户名:</td>
<td><input type="text" name="name" id="name" onblur="checkUserName()"><span id="span01"></span></td>
</tr>
<tr>
<td>密码</td>
<td><input type="text" name=""></td>
</tr>
<tr>
<td>邮箱</td>
<td><input type="text" name=""></td>
</tr>
<tr>
<td>简介</td>
<td><input type="text" name=""></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="注册"></td>
</tr>
</table>
</body>
- 数据库准备
2.2 Servlet 代码
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
try {
request.setCharacterEncoding("UTF-8");
//1. 检测是否存在
String name = request.getParameter("name");
System.out.println("name="+name);
UserDao dao = new UserDaomImpl();
boolean isExist = dao.checkUserName(name);
//2. 通知页面，到底有还是没有。
if(isExist){
response.getWriter().println(1); //存在用户名
}else{
response.getWriter().println(2); //不存在该用户名
}
} catch (SQLException e) {
e.printStackTrace();
}
}
2.3 Dao 代码
public class UserDaomImpl implements UserDao{
@Override
public boolean checkUserName(String username) throws SQLException {
QueryRunner runner = new QueryRunner(JDBCUtil02.getDataSource());
String sql = "select count(*) from t_user where username =?";
runner.query(sql, new ScalarHandler(), username);
Long result = (Long) runner.query(sql, new ScalarHandler(), username);
return result > 0 ;
}
}
2.4 jsp页面显示
function checkUserName() {
//获取输入框的值 document 整个网页
var name = document.getElementById("name").value; // value value() val val()
//1. 创建对象
var request = ajaxFunction();
//2. 发送请求
request.open("POST" ,"/day16/CheckUserNameServlet" , true );
//注册状态改变监听，获取服务器传送过来的数据
request.onreadystatechange = function(){
if(request.readyState == 4 && request.status == 200){
//alert(request.responseText);
var data = request.responseText;
if(data == 1){
//alert("用户名已存在");
document.getElementById("span01").innerHTML = "<font color='red'>用户名已存在!</font>";
}else{
document.getElementById("span01").innerHTML = "<font color='green'>用户名可用!</font>";
//alert("用户名未存在");
}
}
}
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
request.send("name="+name);
}
3. JQuery概述
- 是什么?
javascript 的代码框架。
- 有什么用?
简化代码，提高效率。
- 核心
write less do more , 写得更少，做的更多。
3.1 JQuery 的 Ajax
Servlet
public class DemoServlet02 extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String name = request.getParameter("name");
int age = Integer.parseInt(request.getParameter("age"));
System.out.println("收到了请求..."+name+"="+age);
response.setContentType("text/html;charset=utf-8");
response.getWriter().write("给你一份数据");
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}
3.2 Load()
<script type="text/javascript">
function load() {
//找到这个元素， 去执行加载的动作， 加载/day16/DemoServlet02 ， 得到的数据，赋值显示
$("#aaa").load("/day16/DemoServlet02" , function(responseText , statusTXT , xhr) {
//alert("jieguo:"+responseText);
//找到id为text01的元素， 设置它的value属性值为 responseText 对应的值
$("#aaa").val(responseText);
});
}
</script>
</head>
<body>
<!-- <h3><a href="" οnclick="load()">使用JQuery执行load方法</a></h3>
有两次刷新, 先走 onClick的方法，取到数据回来之后，赋值显示。
接着 走 href=""的路径，但是这个属性没有给值，所以会把当前的页面重新再刷新一次。
所以导致看不见值。-->
<h3><input type="button" onclick="load()" value="使用JQuery执行load方法"> </h3>
<input type="text" id="aaa">
3.3 Get方法
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
//$.get(URL,callback);
function get() {
$.get("/day16/DemoServlet02" , function(data ,status) {
alert("结果是："+data);
//$("#div01") 等价于 document.getElementById("div01");
//$("#div01").val(); //val 用于设置 元素里面有values 的属性值
//$("#div01").text("A="+data);
$("#div01").html(data); // <font>
});
}
</script>
<title>Insert title here</title>
</head>
<body>
<input type="button" onclick="get()" value="使用JQuery演示 get方法">
<div id="div01" style="width: 100px ; height: 100px ; border: 1px solid blue; ">
</div>
</body>
赋值显示
- val(); 只能放那些标签带有value属性
- html(); 可以写写html代码
- text();
其实html()和text()没有什么区别，如果想针对这分数据做html样式处理，那么只能用html()
3.4 Post方法
- load
$("#元素id").load(url地址);
$("#div1").load(serlvet); 使用的get请求，回来赋值的时候， 使用text();去赋值
- get
//语法格式 ： $.get(URL,callback);
使用案例： $.get("/day16/DemoServlet02" , function(data ,status) {
$("#div01").text(data);
});
- post
//语法格式：$.post(URL,data,callback);
function post() {
$.post("/day16/DemoServlet02", {name:"zhangsan",age:18},function(data,status) {
//想要放数据到div里面去。 --- 找到div
$("#div01").html(data);
});
}
3.5 ajax方法
- 4 $.ajax() 底层功能最强大的
url:发送请求的地址data:发送到服务器的数据,请求参数type:请求方式 (“POST” 或 “GET”)，success:成功的回调函数，success(data, textStatus, jqXHR)error:请求失败时调用此函数dataType:预期服务器返回的数据类型"xml": 返回 XML 文档，可用 jQuery 处理。"html": 返回纯文本 HTML 信息；包含的script标签会在插入dom时执行。"script": 返回纯文本 JavaScript 代码。不会自动缓存结果。"json": 返回 JSON 数据 。"jsonp": JSONP 格式。"text": 返回纯文本字符串
$.ajax({
"url":url,
"data":params,
"type":"POST",
"success":function(data){
alert(data);
},
"error":function(){
alert("服务器繁忙，请稍后重试");
},
"dataType":"json"
});
4. 使用JQuery去实现校验用户名
<!-- 导入JQuery的支持 -->
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
function checkUserName() {
//1. 获取输入框的内容
var name = $("#name").val();
//2. 发送请求
$.post("/day16/CheckUserNameServlet" , {name:name} , function(data , status){
//alert(data);
if(data == 1){//用户名存在
//alert("用户名存在");
$("#span01").html("<font color='red'>用户名已被注册</font>");
}else{
//alert("用户名可用");
$("#span01").html("<font color='green'>用户名可以使用</font>");
}
} );
//3. 输出响应的数据到页面上。
}
</script>
</head>
<body>
<body>
<table border="1" width="500">
<tr>
<td>用户名:</td>
<td><input type="text" name="name" id="name" onblur="checkUserName()"><span id="span01"></span></td>
</tr>
<tr>
<td>密码</td>
<td><input type="text" name=""></td>
</tr>
<tr>
<td>邮箱</td>
<td><input type="text" name=""></td>
</tr>
<tr>
<td>简介</td>
<td><input type="text" name=""></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="注册"></td>
</tr>
</table>
</body>
5. 实现百度搜索提示
搭建环境
- 定义首页
<body>
<center>
<h2>黑马</h2>
<input type="text" name="word" id="word" style="width: 600px ; height: 50px ;font-size: 20px;">
<input type="button" value="黑马一下" style="height: 55px ; width: 100px ; ">
<div id="div01" style="position:relative; left : -54px; width: 600px; height: 200px ; border: 1px solid blue; display: none"></div>
</center>
</body>
- 定义数据库
捕获键盘弹起
$(function(){
$("#word").keyup(function() {
alert("键盘弹起了..");
})
});
JS请求
$(function(){
$("#word").keyup(function() {
//2。 获取输入框的值
//var word = $("#word").val();
//this 对应就是执行这个方法的那个对象， $("#word")
var word = $(this).val();
if(word == ""){
$("#div01").hide();
}else{
//3. 请求数据。
$.post("find",{word:word} ,function(data , status){
//alert(data);
$("#div01").show();
$("#div01").html(data);
});
}
})
});
Servlet 代码
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
try {
//1. 先获取参数
String word = request.getParameter("word");
System.out.println("word="+word);
//2. 让dao执行查询
WordsDao dao = new WordsDaoImpl();
List<WordBean> list = dao.findWords(word);
for (WordBean wordBean : list) {
System.out.println("==="+wordBean.toString());
}
request.setAttribute("list", list);
//3. 返回数据
response.setContentType("text/html;charset=utf-8");
//response.getWriter().write("数据是：");
request.getRequestDispatcher("list.jsp").forward(request, response);
} catch (SQLException e) {
e.printStackTrace();
}
}
list.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<table style="width: 100%">
<c:forEach items="${list }" var="wordBean">
<tr>
<td>${wordBean.words}</td>
</tr>
</c:forEach>
</table>
6. 使用JQuery实现 省市联动
6.1 服务器和客户端数据传输的方式
- xml
<list>
<city>
<id>1<id>
<pid>1</pid>
<cname>深圳</cname>
</city>
<city >
<id>2<id>
<pid>1</pid>
<cname>东莞</cname>
</city>
</list>
-
json
阅读性更好 、 容量更小。
对象
对象数组
去除不要的字段
6.2 环境准备
1.准备数据库
2.准备页面
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/city_json.js"></script>
<!-- 引用的是 xml的处理方法 <script type="text/javascript" src="js/city.js"></script> -->
</head>
<body>
省份: <select name="province" id ="province">
<option value="" >-请选择 -
<option value="1" >广东
<option value="2" >湖南
<option value="3" >湖北
<option value="4" >四川
</select>
城市:
<select name="city" id="city">
<option value="" >-请选择 -
</select>
</body>
</html>
6.3 方式1： XStream的使用
public class CityServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
try {
//1. 获取参数
int pid = Integer.parseInt(request.getParameter("pid"));
//2 找出所有的城市
CityDao dao = new CityDaoImpl();
List<CityBean> list = dao.findCity(pid);
//3. 返回数据。手动拼 ---> XStream 转化 bean对象成 xml
XStream xStream = new XStream();
//想把id做成属性
//xStream.useAttributeFor(CityBean.class, "id");
//设置别名
xStream.alias("city", CityBean.class);
//转化一个对象成xml字符串
String xml = xStream.toXML(list);
//返回数据
response.setContentType("text/xml;charset=utf-8");
response.getWriter().write(xml);
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
};
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}
JS代码
$(function() {
//1。找到省份的元素
$("#province").change(function() {
//2. 一旦里面的值发生了改变，那么就去请求该省份的城市数据
//$("#province").varl();
var pid = $(this).val();
/*<list>
<city>
<id>1<id>
<pid>1</pid>
<cname>深圳</cname>
</city>
<city >
<id>2<id>
<pid>1</pid>
<cname>东莞</cname>
</city>
</list>*/
$.post( "CityServlet",{pid:pid} ,function(data,status){
//alert("回来数据了:"+data);
//先清空以前的值：
$("#city").html("<option value='' >-请选择-")
//遍历：
//从data数据里面找出所有的city ， 然后遍历所有的city。
//遍历一个city，就执行一次function方法
$(data).find("city").each(function() {
//遍历出来的每一个city，取它的孩子。 id , cname
var id = $(this).children("id").text();
var cname = $(this).children("cname").text();
$("#city").append("<option value='"+id+"' >"+cname)
});
} );
});
});
6.4 方式2 使用json显示省市联动效果
serlvet代码：
public class CityServlet02 extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
try {
//1. 获取参数
int pid = Integer.parseInt(request.getParameter("pid"));
//2 找出所有的城市
CityDao dao = new CityDaoImpl();
List<CityBean> list = dao.findCity(pid);
//3. 把list ---> json数据
//JSONArray ---> 变成数组 ， 集合 []
//JSONObject ---> 变成简单的数据 { name : zhangsan , age:18}
JSONArray jsonArray = JSONArray.fromObject(list);
String json = jsonArray.toString();
response.setContentType("text/html;charset=utf-8");
response.getWriter().write(json);
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
};
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}
js代码
$(function() {
//1。找到省份的元素
$("#province").change(function() {
//2. 一旦里面的值发生了改变，那么就去请求该省份的城市数据
//$("#province").varl();
var pid = $(this).val();
/*[
{
"cname": "深圳",
"id": 1,
"pid": 1
},
{
"cname": "东莞",
"id": 2,
"pid": 1
}
...
]*/
$.post( "CityServlet02",{pid:pid} ,function(data,status){
//先清空
$("#city").html("<option value='' >-请选择-");
//再遍历，追加
$(data).each(function(index , c) {
$("#city").append("<option value='"+c.id+"' >"+c.cname)
});
},"json" );
});
});
方法2
//action
/* 市显示 */
public String ShiShow() throws IOException {
System.out.println("选择好了省，加载市");
System.out.println(shengstring);
List<Shi> shilist = null;
shilist = shiDao.SelectByShengId(shengstring);
//根据参数将想要的数据拿到，示例现在拿到了一个list对象
Map<Integer, String> map =new HashMap<Integer, String>();
List<Map<Integer, String>> listmaps = new ArrayList<Map<Integer, String>>();
for (Shi shi : shilist) {
System.out.println("市的名字："+shi.getSName());
map.put(shi.getSKey(), shi.getSName());
}
listmaps.add(map);
Gson gson = new Gson();
String json = gson.toJson(listmaps);
ServletActionContext.getResponse().setContentType("text/html;charset=utf-8");
ServletActionContext.getResponse().getWriter().write(json);
System.out.println(json);
return null;
}
/* 区显示 */
public String RegionShow() throws IOException {
System.out.println("选择好了市，加载区");
List<Region> rlist = null;
rlist = regionDao.SelectregionByshengidshiid(shistring);
//根据参数将想要的数据拿到，示例现在拿到了一个list对象
Map<Integer, String> map =new HashMap<Integer, String>();
List<Map<Integer, String>> listmaps = new ArrayList<Map<Integer, String>>();
for (Region region : rlist) {
System.out.println("县区的名字"+region.getRName());
map.put(region.getRKey(), region.getRName());
}
listmaps.add(map);
Gson gson = new Gson();
String json = gson.toJson(listmaps);
ServletActionContext.getResponse().setContentType("text/html;charset=utf-8");
ServletActionContext.getResponse().getWriter().write(json);
System.out.println(json);
return null;
}
function shengSelect() { /*选省显示市*/
var shengstring = $("#shengstring").val();
/* alert(shengstring); */
$("#shi").empty();
$("#regionstring").empty();
$("#xiangzhen").empty();
$("#cun").empty();
var params = $.param({
'shengstring' : shengstring
}, true);
$.ajax({
url : "HT_UserAddlink_Action_ShiShow",
async : true,
type : "POST",
data : params,
success : function(datas) {
/* alert(datas); */
datas = JSON.parse(datas)
$("#shi").empty();
$("#shi").append(
"<option>-----------请选择-----------</option>");
$("#regionstring").append(
"<option>-----------请选择-----------</option>");
$("#xiangzhen").append(
"<option>-----------请选择-----------</option>");
$("#cun").append(
"<option>-----------请选择-----------</option>");
for (x in datas[0]) {
$("#shi").append(
"<option value="+x+">" + datas[0][x]
+ "</option>");
}
}
});
}
function shiSelect() {
//选市显示区
var shengstring = $("#shengstring").val();
var shi1 = $("#shi").val();
/* alert(shi1); */
$("#regionstring").empty();
$("#xiangzhen").empty();
$("#cun").empty();
var params1 = $.param({
'shistring' : shi1
}, true);
$.ajax({
url : "HT_UserAddlink_Action_RegionShow",
async : true,
type : "POST",
data : params1,
success : function(datas1) {
/* alert(datas1); */
datas1 = JSON.parse(datas1)
$("#regionstring").append(
"<option>-----------请选择-----------</option>");
$("#xiangzhen").append(
"<option>-----------请选择-----------</option>");
$("#cun").append(
"<option>-----------请选择-----------</option>");
for (x in datas1[0]) {
$("#regionstring").append(
"<option value="+x+">" + datas1[0][x]
+ "</option>");
}
}
});
}
扫一扫
349
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
