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等等,尤其后面两个控件的用户体验比较好, ...
随机推荐
- 原生js实现简单的放大镜效果
前言:相信很多同学在浏览购物网站的时候都会用到过放大镜的功能,这个功能在日常的网站也会经常用到.接下来我们开始实现一下它吧: (1)首先了解一下放大镜效果的html架构:如下图,它由两部分组成. ht ...
- 关于跨域踩的坑，浏览器 status code为200，但实际上是跨域了
背景 后端使用Nginx并更改本地host文件,起本地服务.将aaa.bbbb.com代理至本地IP地址(10.26.36.156).使用$.ajax调用后端restful接口,要求content-t ...
- 项目二、自定义文件上传函数(js函数)
/** * 文件上传工具 v1.0 * @param file 要上传的文件 * @param url 要上传到的路径 * @param div 要显示的区域 */ function uploader ...
- 使用Git上传本地项目到http://git.oschina.net
本文前言,因倡导开源精神,我也把代码传上了开源社区,可是,当初使用http://git.oschina.net 网站上传代码的时候不知道使用工具.我竟然一个文件一个文件复制粘贴,可费了我好大一个劲儿, ...
- 背包&数位dp(8.7)
背包 0/1背包 设dp[i][j]为前i个物品选了j体积的物品的最大价值/方案数 dp[i][j]=max(dp[i-1][j-w[i]]+v[i],dp[i-1][j])(最大价值) dp[i][ ...
- mysql_存储引擎层-innodb buffer pool
buffer pool 是innodb存储引擎带的一个缓存池,查询数据时,首先从内存中查询 数据如果内存中存在的话直接返回. innodb buffer pool 和 qcache 的区别:Qcach ...
- 如何搭建Vue环境？
搭建vue的开发环境: https://cn.vuejs.org/v2/guide/installation.html 1. 必须要安装nodejs cnpm 下载包的速度更快一些. 地址: ...
- 什么是HIS、PACS、LIS、RIS
什么是HIS?医院信息系统的定义(HIS)医院信息系统(Hospital Information System,HIS)在国际学术界已公认为新兴的医学信息学(Medical Informatics)的 ...
- 多线程06-Lock
; i < ; i++) { c.Increment(); c.Decrement(); ...
- [Web 前端] 002 html 常用行行级元素
目录 1. html 常用的行级元素 1.1 链接标签 1.2 a 标签的锚点的使用 1.3 文本标签 1.4 无语义的行级元素 span 1.5 html 中的实体字符 1. html 常用的行级元 ...