13Ajax和JQuery
1.Ajax
1.1是什么?
“Asynchronous Javascript And XML”（异步JavaScript和XML），
并不是新的技术，只是把原有的技术，整合到一起而已。
1.使用CSS和XHTML来表示。
2. 使用DOM模型来交互和动态显示。
3.使用XMLHttpRequest来和服务器进行异步通信。
4.使用javascript来绑定和调用。
1.2有什么用?
咱们的网页如果想要刷新局部内容。 那么需要重新载入整个网页。用户体验不是很好。 就是为了解决局部刷新的问题。 保持其他部分不动，只刷新某些地方。
1.3数据请求 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;
}
2）发送请求
//执行get请求
function get() {
//1. 创建xmlhttprequest 对象
var request = ajaxFunction(); //2. 发送请求。
/*
参数一： 请求类型 GET or POST
参数二： 请求的路径
参数三： 是否异步， true or false */
request.open("GET", "/day13Ajax/DemoServlet01", true);
request.send();
}
如果发送请求的同时，还想获取数据，那么代码如下
//执行get请求
function get() {
//1. 创建xmlhttprequest 对象
var request = ajaxFunction(); //2. 发送请求。
/*
参数一： 请求类型 GET or POST
参数二： 请求的路径
参数三： 是否异步， true or false */
//request.open("GET", "/day13Ajax/DemoServlet01", true);
request.open("GET", "/day13Ajax/DemoServlet01?name=aa&age=18", true); //3. 获取响应数据 注册监听的意思。 一会准备的状态发生了改变，那么就执行 = 号右边的方法
request.onreadystatechange = function(){ //前半段表示 已经能够正常处理。 再判断状态码是否是200
if(request.readyState == 4 && request.status == 200){
//弹出响应的信息
alert(request.responseText);
}
}
request.send();
1.4数据请求 Post
package cn.jxufe.web; import java.io.IOException; import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse; public class DemoServlet01 extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println("收到了一个请求。。。");
String name = request.getParameter("name");
String age = request.getParameter("age");
System.out.println("收到了一个请求。。。" + name + "=" + age); response.setContentType("text/html;charset=utf-8");
response.getWriter().write("收到了请求...");
} public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println("现在来了一个post请求，将要去走get的代码了。");
doGet(request, response);
} }
如果不带数据
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 post() {
//1. 创建xmlhttprequest 对象
var request = ajaxFunction();
//2. 发送请求。
/*
参数一： 请求类型 GET or POST
参数二： 请求的路径
参数三： 是否异步， true or false
*/
request.open("POST", "/day13Ajax/DemoServlet01", true);
request.send();
}
带数据
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 post() {
//1. 创建xmlhttprequest 对象
var request = ajaxFunction();
//2. 发送请求。
/*
参数一： 请求类型 GET or POST
参数二： 请求的路径
参数三： 是否异步， true or false
*/
request.open("POST", "/day13Ajax/DemoServlet01", true);
//如果想带数据，就写下面的两行
//如果使用的是post方式带数据，那么 这里要添加头， 说明提交的数据类型是一个经过url编码的form表单数据
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
//带数据过去 ， 在send方法里面写表单数据。
request.send("name=obama&age=19");
}
//执行get请求
function post() {
//1. 创建xmlhttprequest 对象
var request = ajaxFunction(); //2. 发送请求。
/*
参数一： 请求类型 GET or POST
参数二： 请求的路径
参数三： 是否异步， true or false */
request.open("POST", "/day13Ajax/DemoServlet01", true); //3. 获取响应数据 注册监听的意思。 一会准备的状态发生了改变，那么就执行 = 号右边的方法
request.onreadystatechange = function() { //前半段表示 已经能够正常处理。 再判断状态码是否是200
if (request.readyState == 4 && request.status == 200) {
//弹出响应的信息
alert(request.responseText);
}
} //如果想带数据，就写下面的两行 //如果使用的是post方式带数据，那么 这里要添加头， 说明提交的数据类型是一个经过url编码的form表单数据
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); //带数据过去 ， 在send方法里面写表单数据。
request.send("name=obama&age=19"); }
2.JQuery
2.1是什么?
javascript 的代码框架。
2.2有什么用?
简化代码，提高效率。
2.3核心
write less do more , 写得更少，做的更多。
2.4load()方法
package cn.jxufe.web; import java.io.IOException; import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse; public class DemoServlet02 extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println("收到了请求。。。");
response.setContentType("text/html;charset=utf-8");
response.getWriter().write("给你一份数据");
} public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
} }
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head> <title>My JSP '01demo.jsp' starting page</title> <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script> <script type="text/javascript">
function load() { //$("#aaa").val("aaa");
//$("#aaa").html("9999999"); //$("#aaa").load("/day16/DemoServlet02"); //$("#text01") --- document.getElementById("text01");
$("#aaa").load("/day13Ajax/DemoServlet02", function(responseText, statusTXT, xhr) {
//alert("jieguo:"+responseText);
//找到id为text01的元素， 设置它的value属性值为 responseText 对应的值
$("#aaa").val(responseText);
});
}
</script>
</head> <body>
<!-- <h3><a href="" onclick="load()">使用JQuery执行load方法</a></h3> -->
<h3>
<input type="button" onclick="load()" value="使用JQuery执行load方法">
</h3> <input type="text" id="aaa"> </body>
</html>
2.5get()方法
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head> <title>My JSP '01demo.jsp' starting page</title> <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script> <script type="text/javascript">
//$.get(URL,callback);
function get() {
$.get("/day13Ajax/DemoServlet02", function(data, status) {
//alert("结果是：" + data);
//$("#div01") -- document.getElementById("div01"); //$("#div01").val(); //val 用于设置 元素里面有values 的属性值
//$("#div01").html(data);
//$("#div01").val(data);
$("#div01").text("aaa=" + data);
//$("#div01").html(data); // <font>
});
}
</script>
</head> <body> <input type="button" onclick="get()" value="使用JQuery演示 get方法"> <div id="div01"
style="width: 100px ; height: 100px ; border: 1px solid blue; "> </div> </body>
</html>
* val("aa");
> 只能放那些标签带有value属性
* html("aa"); ---写html代码
* text("aa");
> 其实没有什么区别，如果想针对这分数据做html样式处理，那么只能用html()
2.6POST()方法
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head> <title>My JSP '06demo.jsp' starting page</title> <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script> <script type="text/javascript">
function post() {
$.post("/day13Ajax/DemoServlet02", {
name : "zhangsan",
age : "18"
}, function(data, status) {
//想要放数据到div里面去。 --- 找到div
$("#div01").html(data);
});
}
</script>
</head> <body> <input type="button" onclick="post()" value="使用JQuery演示 post方法"> <div id="div01"
style="width: 100px ; height: 100px ; border: 1px solid blue; "> </div> </body>
</html>
2.7城市联动小案例
1）准备数据库
2） 准备页面
<%@ 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 type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/city02.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>
3)创建javabean
package cn.jxufe.entity;
public class CityBean {
private int id ;
private int pid;
String cname;
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public int getPid() {
return pid;
}
public void setPid(int pid) {
this.pid = pid;
}
public String getCname() {
return cname;
}
public void setCname(String cname) {
this.cname = cname;
}
}
4）创建dom接口及实现类
package cn.jxufe.dao; import java.sql.SQLException;
import java.util.List; import cn.jxufe.entity.CityBean; public interface CityDao {
List<CityBean> findCity(int pid) throws SQLException ;
}
package cn.jxufe.dao.impl; import java.sql.SQLException;
import java.util.List; import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.BeanListHandler; import cn.jxufe.dao.CityDao;
import cn.jxufe.entity.CityBean;
import cn.jxufe.util.JDBCUtil02; public class CityDaoImpl implements CityDao{
@Override
public List<CityBean> findCity(int pid) throws SQLException {
// TODO Auto-generated method stub
QueryRunner runner = new QueryRunner(JDBCUtil02.getDataSource());
String sql = "select * from city where pid = ?";
return runner.query(sql, new BeanListHandler<CityBean>(CityBean.class) , pid); }
}
5）创建servlet
#1 以xml的形式返回数据
package cn.jxufe.web; import java.io.IOException;
import java.sql.SQLException;
import java.util.List; import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse; import com.thoughtworks.xstream.XStream; import cn.jxufe.dao.CityDao;
import cn.jxufe.dao.impl.CityDaoImpl;
import cn.jxufe.entity.CityBean; public class CityServlet extends HttpServlet { public 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();
}
} public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
} }
#02以json的形式返回数据
package cn.jxufe.web; import java.io.IOException;
import java.sql.SQLException;
import java.util.List; import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse; import com.thoughtworks.xstream.XStream; import cn.jxufe.dao.CityDao;
import cn.jxufe.dao.impl.CityDaoImpl;
import cn.jxufe.entity.CityBean;
import net.sf.json.JSONArray; public class CityServlet02 extends HttpServlet { public 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();
}
} public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
} }
6）JSP
#1
<%@ 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 type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/city.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>
#2
<%@ 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 type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/city02.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>
7）js
#1
$(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
$(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" );
});
});
13Ajax和JQuery的更多相关文章
- Angular杂谈系列1-如何在Angular2中使用jQuery及其插件
jQuery,让我们对dom的操作更加便捷.由于其易用性和可扩展性,jQuer也迅速风靡全球,各种插件也是目不暇接. 我相信很多人并不能直接远离jQuery去做前端,因为它太好用了,我们以前做的东西大 ...
- jQuery UI resizable使用注意事项、实时等比例拉伸及你不知道的技巧
这篇文章总结的是我在使用resizable插件的过程中,遇到的问题及变通应用的奇思妙想. 一.resizable使用注意事项 以下是我在jsfiddle上写的测试demo:http://jsfiddl ...
- Jquery的点击事件，三句代码完成全选事件
先来看一下Js和Jquery的点击事件 举两个简单的例子 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...
- jQuery实践-网页版2048小游戏
▓▓▓▓▓▓ 大致介绍 看了一个实现网页版2048小游戏的视频,觉得能做出自己以前喜欢玩的小游戏很有意思便自己动手试了试,真正的验证了这句话-不要以为你以为的就是你以为的,看视频时觉得看懂了,会写了, ...
- jquery和Js的区别和基础操作
jqery的语法和js的语法一样,算是把js升级了一下,这两种语法可以一起使用,只不过是用jqery更加方便 一个页面想要使用jqery的话,先要引入一下jqery包,jqery包从网上下一个就可以, ...
- jQuery之ajax实现篇
jQuery的ajax方法非常好用,这么好的东西,你想拥有一个属于自己的ajax么?接下来,我们来自己做一个简单的ajax吧. 实现功能 由于jq中的ajax方法是用了内置的deferred模块,是P ...
- 利用snowfall.jquery.js实现爱心满屏飞
小颖在上一篇一步一步教你用CSS画爱心中已经分享一种画爱心的方法,这次再分享一种方法用css画爱心,并利用snowfall.jquery.js实现爱心满屏飞的效果. 第一步: 利用伪元素before和 ...
- jQuery的61种选择器
The Write Less , Do More ! jQuery选择器 1. #id : 根据给定的ID匹配一个元素 <p id="myId">这是第一个p标签< ...
- jquery.uploadify文件上传组件
1.jquery.uploadify简介 在ASP.NET中上传的控件有很多,比如.NET自带的FileUpload,以及SWFUpload,Uploadify等等,尤其后面两个控件的用户体验比较好, ...
随机推荐
- Spring整合Hibernate实现Spring Data JPA （介绍和使用）
Spring Data JPA是Spring基于Hibernate开发的一个JPA框架.如果用过Hibernate或者MyBatis的话,就会知道对象关系映射(ORM)框架有多么方便. 但是Sprin ...
- 高级软件测试技术（测试管理工具实践day2）
今天在紧张的学习之余,我们小组选定了bugzilla,并且打算在今天晚上刚进行下载安装. 在安装bugzilla需要的软件有MySQL数据库软件,activeperl软件,bugzilla安装包,II ...
- 标签button：点击button按钮时，出现了页面自动刷新的情况
原html: <button class="btn btn-primary" id="btnSubmit" name="btnSubmit&qu ...
- 记一次SQL Server delete语句的优化过程
今天测试反应问题,性能测试环境一个脚本执行了3个小时没有出结果,期间其他dba已经建立了一些索引但是没有效果. 语句: DELETE T from License T WHERE exists ( ...
- SQLserver基础--连接查询、联合查询、索引
一.子查询补充: Exists的用法:select*from haha where exists(select*from bumen where bumen.code=haha.bumen,and b ...
- PROD异机全备份恢复验证实施文档
PROD异机全备份恢复验证实施文档 ******利用10月25日的全量备份.10月26日当天的归档日志及当前redo日志,恢复数据库到故障前数据库状态****** 准备工作:source 源库:PRO ...
- java操作JSON字符串转换成对象的时候如何可以不建立实体类也能获取数据
引入依赖 <dependency> <groupId>com.alibaba</groupId> <artifactId>fastjson& ...
- spring包
下载的spring包中文件及各种包众多,在项目中往往只有部分是我们必须的,如果不清楚什么时候需要什么包的话,看看下面就知道了. aspectj目录 下是在Spring框架下使用aspectj的源代码和 ...
- Pku2054 Color a Tree
有一个N个结点的有根树,1是这个树的根.现在要对这N个结点依次进行染色,每个结点染色要花费1个单位的时候,同时要满足一个结点仅在其父亲被染色后才可被染色,每个结点有个权值Ci,如果我们在第Ti时间对i ...
- rac节点挂掉后，vip飘到别的节点，但是业务连接不上报 no listener问题处理
客户一套rac系统,三节点,其中一个节点的p260主机主板有问题(经常机器重启,好像是这个型号的通病,主板被炒到20W),临时把故障节点的vip作为业务地址用. 首先,查看确定故障节点vip飘到那个节 ...