Ajax
是什么?
AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术 , 它并不是一种新的技术
ajax并非一种新的技术,而是几种原有技术的结合体。它由下列技术组合而成。
1.使用CSS和XHTML来表示。
2. 使用DOM模型来交互和动态显示。
3.使用XMLHttpRequest来和服务器进行异步通信。
4.使用javascript来绑定和调用。
在上面几中技术中,除了XmlHttpRequest对象以外,其它所有的技术都是基于web标准并且已经得到了广泛使用,XMLHttpRequest虽然目前还没有被W3C所采纳,但是它已经是一个事实的标准,因为目前几乎所有的主流浏览器都支持它。
有什么用?
传统的网页,如果需要更新内容,必须加载整个网页。 如果只需要对网页上的某个内容进行局部刷新, 那么就需要使用到Ajax了。 它可以让我们无需重新加载全部网页内容,即可完成对某个部分的内容执行刷新 。 最典型的的例子, 莫过于大家在注册网站的时候, 输入的用户名,会自动的提示我们,该用户已被注册。
AJAX - 向服务器发送请求:
get方法:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 使用Ajax演示get方法 -->
<script type="text/javascript">
//1.获取XMLHttpRequest的对象
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","DemoServlet01?name=zhangsan&age=18",true);
//3. 获取响应数据 注册监听的意思。 一会准备的状态发生了改变,那么就执行 = 号右边的方法
request.onreadystatechange=function()
{
//前半段表示 已经能够正常处理。 再判断状态码是否是200
if (request.readyState==4 && request.status==200)
{
//弹出相应的信息
alert(request.responseText);
}
}
request.send();
}
</script>
</head>
<body>
<h2><a href=" " onclick="get()" >这是一个get请求</a></h2>
</body>
</html>
Post方法:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 使用Ajax演示post方法 -->
<script type="text/javascript">
//1.获取XMLHttpRequest的对象
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.提交对象
function post() {
//获取XMLHttpRequest对象
var request=ajaxFunction();
//2.发送请求
request.open("POST","DemoServlet01",true);
//想获取服务器传送过来的数据, 加一个状态的监听。
request.onreadystatechange=function(){
if(request.readyState==4 && request.status == 200){
alert("post:"+request.responseText);
}
}
//3.带上参数 ,如果使用的是post方式带数据,那么 这里要添加头, 说明提交的数据类型是一个经过url编码的form表单数据
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//4.发送
request.send("name=Bill&age=18");
}
</script>
</head>
<body>
<h2><a href="" onclick="post()">这是一个post请求</a></h2>
</body>
</html>
服务器响应:
如需获得来自服务器的响应,请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。
responseText | 获得字符串形式的响应数据。 |
responseXML | 获得 XML 形式的响应数据。 |
onreadystatechange 事件
当请求被发送到服务器时,我们需要执行一些基于响应的任务。
每当 readyState 改变时,就会触发 onreadystatechange 事件。
readyState 属性存有 XMLHttpRequest 的状态信息。
下面是 XMLHttpRequest 对象的三个重要的属性:
属性 | 描述 |
---|---|
onreadystatechange | 存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。 |
readyState | 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
|
status | 200: "OK" 404: 未找到页面 |
GET 还是 POST?
与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用。
然而,在以下情况中,请使用 POST 请求:
- 无法使用缓存文件(更新服务器上的文件或数据库)
- 向服务器发送大量数据(POST 没有数据量限制)
- 发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠
实例:校验用户密码
前端页面:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//使用ajax演示用户名校验
//1.获取XMLHttpRequest的对象
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.提交对象
function checkUserName() {
//1.获取输入框的内容
var name=document.getElementById("name").value;
//2.创建XMLHttpRequest对象
var xmlHttp=ajaxFunction();
//发送数据到服务器
xmlHttp.open("POST","/AjaxDemo01/CheckUserNameServlet",true);
//获取服务器发来的数据,注册监听
xmlHttp.onreadystatechange=function(){
if(xmlHttp.readyState==4 && xmlHttp.status == 200){
var rs=xmlHttp.responseText;
if(rs==1)
document.getElementById("span01").innerHTML="<font color='red'>用户名已存在!</font>";
else
document.getElementById("span01").innerHTML="<font color='green'>用户名可用</font>";
}
}
//3.带上参数 ,如果使用的是post方式带数据,那么 这里要添加头, 说明提交的数据类型是一个经过url编码的form表单数据
xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//4.发送
xmlHttp.send("name="+name);
}
</script>
</head>
<body>
<TABLE>
<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="psw"></TD>
</TR>
<TR>
<TD>邮箱:</TD>
<TD><INPUT TYPE="text" NAME="mail"></TD>
</TR>
<TR>
<TD>简介:</TD>
<TD><TEXTAREA NAME="" ROWS="5" COLS="5"></TEXTAREA></TD>
</TR>
<tr>
<td colspan="2"><input type="submit" value="注册"></td>
</tr>
</TABLE>
</body>
</html>
用于检查用户名的Servlet:
public class CheckUserNameServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
try {
//1.用于检查用户名
String name = request.getParameter("name");
System.out.println("name="+name);
UserDao dao=new UserDaoImpl();
boolean isExist = dao.checkUserName(name);
//2.通知页面,是否有该用户名
if (isExist) {
response.getWriter().println(1);//有该用户
} else {
response.getWriter().println(2);//未有该用户
}
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}
Dao实现:
public class UserDaoImpl implements UserDao {
public boolean checkUserName(String name) throws SQLException {
QueryRunner runner=new QueryRunner(JDBCUtil.getDataSource());
String sql="select count(*) from t_suer where username =?";
Long resault = (Long) runner.query(sql, new ScalarHandler(),name);
return resault>0;
}
}
JQuery
是什么?
javascript 的代码框架。
有什么用?
简化代码,提高效率。write less do more , 写得更少,做的更多。
jQuery load() 方法
jQuery load() 方法是简单但强大的 AJAX 方法。
load() 方法从服务器加载数据,并把返回的数据放入被选元素中。
语法:
$(selector).load(URL,data,callback);
例子:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta 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">
function show() {
//找到这个元素, 去执行加载的动作, 加载/day16/DemoServlet02 , 得到的数据,赋值显示
$("#aaa").load("/AjaxDemo01/DemoServlet02" , function(responseText , statusTXT , xhr) {
//找到id为text01的元素, 设置它的value属性值为 responseText 对应的值
$("#aaa").val(responseText);
});
}
</script>
</head>
<body>
<input type="button" value="使用jQuery演示load方法" onclick="show()"/>
<input type="text" id="aaa">
</body>
</html>
HTTP 请求:GET vs. POST
两种在客户端和服务器端进行请求-响应的常用方法是:GET 和 POST。
- GET - 从指定的资源请求数据
- POST - 向指定的资源提交要处理的数据
GET 基本上用于从服务器获得(取回)数据。注释:GET 方法可能返回缓存数据。
POST 也可用于从服务器获取数据。不过,POST 方法不会缓存数据,并且常用于连同请求一起发送数据。
get() 方法
$.get() 方法通过 HTTP GET 请求从服务器上请求数据。
语法:
$.get(URL,callback);
必需的 URL 参数规定您希望请求的 URL。
可选的 callback 参数是请求成功后所执行的函数名。
实例:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta 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">
function get() {
$.get("/AjaxDemo01/DemoServlet02?name=zhangsan&age=18" , function(data ,status) {
$("#div01").text(data);
});
}
</script>
</head>
<body>
<input type="button" value="使用jQuery演示get方法" onclick="get()"/>
<div id="div01" style="width: 100px;height: 100px; border: 1px solid blue; ">
</div>
</body>
</html>
post方法:
$.post() 方法通过 HTTP POST 请求从服务器上请求数据。
语法:
$.post(URL,data,callback);
必需的 URL 参数规定您希望请求的 URL。
可选的 data 参数规定连同请求发送的数据。
可选的 callback 参数是请求成功后所执行的函数名。
赋值显示
val("aa"); ---只能放那些标签带有value属性
html("aa"); ---写html代码
text("aa");
其实没有什么区别,如果想针对这分数据做html样式处理,那么只能用html()
实例:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta 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">
function post() {
$.post("/AjaxDemo01/DemoServlet02",{name:"zhangsan",age:18}, function(data ,status) {
$("#div01").html(data);
});
}
</script>
</head>
<body>
<input type="button" value="使用jQuery演示post方法" onclick="post()"/>
<div id="div01" style="width: 100px;height: 100px; border: 1px solid blue; ">
</div>
</body>
</html>
使用JQuery校验用户名
前端页面:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta 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">
//使用jQuery演示用户名校验
function checkUserName() {
//1.获取输入框的数据
var name=$("#name").val();
//2.发送请求给服务器
$.post("/AjaxDemo01/CheckUserNameServlet",{name:name},function(data ,status){
if (data==1) {
//3.输出到页面上
$("#span01").html("<font color='red'>用户名已被注册</font>");
} else {
$("#span01").html("<font color='green'>用户名可以使用</font>")
}
})
}
</script>
</head>
<body>
<TABLE>
<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="psw"></TD>
</TR>
<TR>
<TD>邮箱:</TD>
<TD><INPUT TYPE="text" NAME="mail"></TD>
</TR>
<TR>
<TD>简介:</TD>
<TD><TEXTAREA NAME="" ROWS="5" COLS="5"></TEXTAREA></TD>
</TR>
<tr>
<td colspan="2"><input type="submit" value="注册"></td>
</tr>
</TABLE>
</body>
</html>
后端通前面Ajax的一样。。。
实现百度搜索提示:jaxDemo02baidu
前端页面:
<%@ 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 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/qiandu.js"></script>
</head>
<body>
<center>
<h2>千度</h2>
<input type="text" name="word" id="word" style="width: 600px;height: 50px;font-size: 20px;">
<input type="button" value="揪一下" style="width: 100px;height: 50px;"/>
<div id="div01" style="position:relative; left : -54px; width: 600px; height: 200px ; border: 1px solid blue; display: none"></div>
</center>
</body>
</html>
js部分:
/**
* 捕捉键盘弹起事件
* 在文档准备就绪的时候,对某一个元素进行onkeyup事件监听
*/
$(function() {
$("#word").keyup(function() {
//1.获取输入的值
var word=$("#word").val();
//2.请求数据
if (word=="") {//页面无输入时,隐藏提示框
$("#div01").hide();
} else {//页面有输入时,根据查找服务器的数据,在提示框显示
$.post("FindWordServlet",{word:word},function(data,status){
//alert(data);
$("#div01").show();
$("#div01").html(data);
});
}
})
});
用于处理页面请求的Servlet :
public class FindWordServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
try {
//1.获取页面数据
String word = request.getParameter("word");
System.out.println("word="+word);
//2.执行查询
WordsDao dao=new WordsDaoImpl();
List<WordBean> list = dao.findWord(word);
//3.返回数据
response.setContentType("text/html;charset=utf-8");
// response.getWriter().write("数据是:");
//存值
request.setAttribute("list", list);
//返回一个页面,把list.jsp上的内容返回给页面
request.getRequestDispatcher("list.jsp").forward(request, response);
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}
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="w">
<tr>
<td>
${w.word }
</td>
</tr>
</c:forEach>
</table>
封装查询结果的bean:
public class WordBean {
private int id;
private String word;
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getWord() {
return word;
}
public void setWord(String word) {
this.word = word;
}
}
dao实现:
public class WordsDaoImpl implements WordsDao {
public List<WordBean> findWord(String word) throws SQLException {
QueryRunner runner=new QueryRunner(JDBCUtil.getDataSource());
return runner.query("select * from word where word like ? limit ?",
new BeanListHandler<WordBean>(WordBean.class),word+"%",5);
}
}
使用JQuery实现省市联动:
前端页面:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<!-- 这是使用xml的方式
<script type="text/javascript" src="js/city_xml.js"></script>
-->
<!-- 这是使用json-->
<script type="text/javascript" src="js/city_json.js"></script>
</head>
<body>
省份:<select name="province" id="province">
<option value="">-请选择-
<option value="1">陕西
<option value="2">四川
<option value="3">广州
</select>
城市:<select name="city" id="city">
<option value="">-请选择-
</select>
</body>
</html>
1.使用XML格式传输数据
js代码:
/**
* 用xml的方式省市联动
*/
$(function () {
//1.找到省份的元素
$("#province").change(function() {
//2.获取省份的pid
var pid=$(this).val();
$.post("CityServlet",{pid:pid},function(data,status){
//清空之前的值
$("#city").html("<option value=''>-请选择-");
//从data数据里面找出所有的city , 然后遍历所有的city。
//遍历一个city,就执行一次function方法data里面找出所有的city,然后遍历
$(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)
});
});
});
});
使用XML格式的Servlet:
public class CityServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
try {
//1.获取页面提交的省份pid
int pid = Integer.parseInt(request.getParameter("pid"));
//2.根据pid查询城市
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);
//把list集合转化成一个xml字符串
String xml = xStream.toXML(list);
response.setContentType("text/xml;charset=utf-8");
response.getWriter().write(xml);
} catch (SQLException e) {
e.printStackTrace();
}
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}
2.使用json格式传输数据
js代码:
$(function () {
//1.找到省份的元素
$("#province").change(function() {
//2.获取省份的pid
var pid=$(this).val();
$.post("CityServlet2",{pid:pid},function(data,status){
//清空之前的值
$("#city").html("<option value=''>-请选择-");
//遍历,追加
$(data).each(function(index,c) {
$("#city").append("<option value='"+c.id+"'>"+c.cname);
});
},"json");
});
});
使用Json格式的Servlet :
public class CityServlet2 extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
try {
//1.获取页面提交的省份pid
int pid = Integer.parseInt(request.getParameter("pid"));
//2.根据pid查询城市
CityDao dao=new CityDaoImpl();
List<CityBean> list = dao.findCity(pid);
//3.把list转成json数据
//JSONArray-->>变成数组或集合 []
//JSObject-->>变成普通数据 {}
JSONArray jsonArray=JSONArray.fromObject(list);
String json = jsonArray.toString();
//4.发送数据给页面
response.setContentType("text/html;charset=utf-8");
response.getWriter().write(json);
} catch (SQLException e) {
e.printStackTrace();
}
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}
用于封装城市查询结果的bean:
public class CityBean {
private int id;
private int pid;
private 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;
}
}
用于根据省份id查询城市的dao:
public class CityDaoImpl implements CityDao {
public List<CityBean> findCity(int pid) throws SQLException {
QueryRunner runner=new QueryRunner(JDBCUtil.getDataSource());
return runner.query("select * from city_province where pid=?",
new BeanListHandler<CityBean>(CityBean.class),pid);
}
}
XStream的使用:转化 bean对象成 xml
// XStream 转化 bean对象成 xml
XStream xStream = new XStream();
//想把id做成属性
xStream.useAttributeFor(CityBean.class, "id");
//设置别名
xStream.alias("city", CityBean.class);
//转化一个对象成xml字符串
String xml = xStream.toXML(list);
转化bean对象成json
//3.把list转成json数据
//JSONArray-->>变成数组或集合 []
//JSObject-->>变成普通数据 {}
JSONArray jsonArray=JSONArray.fromObject(list);
String json = jsonArray.toString();
服务器和客户端数据传输的方式
xml:
<list>
<city>
<id>1<id>
<pid>1</pid>
<cname>深圳</cname>
</city>
<city >
<id>2<id>
<pid>1</pid>
<cname>东莞</cname>
</city>
</list>
Json:阅读性更好 、 容量更小。
{"name":"aaa" , "age":19}