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等等,尤其后面两个控件的用户体验比较好, ...
随机推荐
- 我用HTML写简历
本文属于原创文章,转载请注明--来自桃源小盼的博客 起因 每次换工作写简历都是有点痛苦的事情,尤其是下载word模板,各种注册流程,有的还得买积分,冲会员,甚是不爽.就算下载好了,修改其中的一些细节也 ...
- 阿里云配置通用服务的坑 ssh: connect to host 47.103.101.102 port 22: Connection refused
1.~ wjw$ ssh root@47.103.101.102 ssh: connect to host 47.103.101.102 port 22: Connection refused ssh ...
- canvas介绍（画布）
canvas(画布)主要是位图 svg(矢量图) canvas标签,必须要写的3个属性 id width height 为什么不再style中设置width和height呢? 因为这设置width和h ...
- h5新标签介绍
html5新增了一些标签 这些标签都是语义标签,可以帮助我们更好的理解,代码中的意思:(都是双标签) 案例: 将语义标签翻译过来为 <div class="header"&g ...
- React Native商城项目实战14 - 首页中间下部分
1.MiddleBottomView.js /** * 首页中间下部分 */ import React, { Component } from 'react'; import { AppRegistr ...
- Netty 系列之 Netty 高性能之道 高性能的三个主题 Netty使得开发者能够轻松地接受大量打开的套接字 Java 序列化
Netty系列之Netty高性能之道 https://www.infoq.cn/article/netty-high-performance 李林锋 2014 年 5 月 29 日 话题:性能调优语言 ...
- 《Using Databases with Python》Week1 Object Oriented Python 课堂笔记
Coursera课程<Using Databases with Python> 密歇根大学 Charles Severance Week1 Object Oriented Python U ...
- 大数据架构师必读的NoSQL建模技术
大数据架构师必读的NoSQL建模技术 从数据建模的角度对NoSQL家族系统做了比较简单的比较,并简要介绍几种常见建模技术. 1.前言 为了适应大数据应用场景的要求,Hadoop以及NoSQL等与传统企 ...
- The bean 'dataSource', defined in BeanDefinition defined in class path resou
SpringCloud对应SpringBoot不匹配 Greenwich 2.1.x Finchley 2.0.x Edgware 1.5.x Dalston 1.5.x SpringBoot Spr ...
- Tensorflow之CNN卷积层池化层padding规则
padding的规则 · padding=‘VALID’时,输出的宽度和高度的计算公式(下图gif为例) 输出宽度:output_width = (in_width-filter_wid ...