什么是Ajax?
AJAX全称为“Asynchronous JavaScript and XML”（异步JavaScript和XML），是一种创建交互式网页应用的网页开发技术。
不是一种新技术，是如下几种技术的组合应用：
- 基于web标准（standards-based presentation）XHTML+CSS的表示；
- 使用 DOM（Document Object Model）进行动态显示及交互；
- 使用 XML 和 XSLT 进行数据交换及相关操作；
- 使用 XMLHttpRequest 进行异步数据查询、检索；
- 使用 JavaScript 将所有的东西绑定在一起。
Ajax本质上是一个浏览器端的技术。
为什么学习Ajax?
- 通过异步模式，提升了用户体验
- 优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用
- 现在几乎所有的B/S软件项目都会增加Ajax，从而提高用户体验度。最典型的应用：Google Maps!
创建ajax程序的基本流程
- 创建XMLHttpRequest对象
- 使用XMLHttpRequest对象创建请求
- 监视response的状态，写回调函数处理服务器返回的数据
- 使用XMLHttpRequest对象发送请求
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'demo1.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
</head>
<!-- 声明js代码域 -->
<!--
Ajax学习：
1.ajax的概念：
局部刷新技术，不是一门新技术，而是多种技术的集合，是浏览器端的技术
2。ajax的作用
实现当前结果页面中响应其他请求的响应内容
3.ajax使用
ajax的基本流程
//创建ajax引擎
//复写readystatementChange函数
//判断ajax状态吗
//判断响应状态码
//获取响应信息(响应内容的格式)
//处理响应信息(js操作文档结构)
//发出请求
ajax的状态码
ajax的状态码 ReadyState:0 1 2 3 4
4——表示响应内容被成功接受
响应状态码
status
200 OK
404 资源未找到
500 内部服务错误
ajax的异步同步
ajax.open(method,url,async)
async:设置同步代码块执行还是异步代码块执行
false 异步（默认）
true 同步
-->
<script type="text/javascript">
function getData(){
//创建引擎对象
var ajax;
if(window.XMLHttpRequest){ //火狐 基本现在高级浏览器都支持
ajax = new XMLHttpRequest();
}else{ //低版本ie
ajax = new ActiveXObject("Msxm12.XMLHTTP");
}
//复写onreadystateChange函数————监听函数 （声明而不是调用）
ajax.onreadystatechange = function(){
//判断ajax的状态吗
if(ajax.readyState == 4){
//判断响应状态码
if(ajax.status == 200){
//获取响应内容
var result = ajax.responseText;
//获取元素对象
var shadow = document.getElementById("t1");
shadow.innerHTML = result;
}else if(ajax.status == 404){
var shadow = document.getElementById("t1");
shadow.innerHTML = "业务繁忙1";
}else if(ajax.status == 500){
var shadow = document.getElementById("t1");
shadow.innerHTML = "业务繁忙2";
}else{
var shadow = document.getElementById("t1");
shadow.innerHTML = "业务繁忙2";
}
}else{
//当我们数据因为各种各样原因延迟获取了我们可以给用户友好显示
var shadow = document.getElementById("t1");
shadow.innerHTML = "<img src='2.gif' width='200px' height='200px' /> ";
}
}
//发送请求
ajax.open("get","ajax",false);
//发送数据 在火狐浏览器中如果没有数据必须为null
ajax.send(null);
}
</script>
<style type="text/css">
#t1 {width: 200px;height: 200px;border: 1px solid;}
</style>
<body>
<input type="button" onclick="getData()" value="按钮">
<div id="t1"></div>
</body>
</html>
package com.servlet;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServlet;
//在web3.0后不用配置web就可以直接利用注解来实在url=pattern
//@WebServlet("/ajax")
public class myAjax extends HttpServlet {
@Override
public void service(ServletRequest req, ServletResponse resp)
throws ServletException, IOException {
resp.setContentType("text/html;charset=utf-8");
//模拟数据获取阻塞
try {
Thread.sleep(3000);
} catch (InterruptedException e) {
e.printStackTrace();
}
resp.getWriter().write("执手相看泪眼，竟无语凝噎");
}
}
Ajax的俩种传参方式
- Get方法
- 直接通过url传参
-
注意：get方式提交经常会遇到浏览器缓存问题，浏览器不对同样的url重复提交。这时可以在url后面增加参数：
-
?rand = Math.random() 或者：rand = new Date()；
-
-
Post方法
- 需要设置参数解析格式
-
request.open(“post”,url);
req.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
req.send("a=3&b=中国");<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>My JSP 'demo2.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <!-- <link rel="stylesheet" type="text/css" href="styles.css"> --> </head> <script type="text/javascript"> function getData(){ //创建引擎对象 var ajax; if(window.XMLHttpRequest){ //火狐 基本现在高级浏览器都支持 ajax = new XMLHttpRequest(); }else{ //低版本ie ajax = new ActiveXObject("Msxm12.XMLHTTP"); } //复写onreadystateChange函数————监听函数 ajax.onreadystatechange = function(){ //判断ajax的状态吗 if(ajax.readyState == 4){ //判断响应状态码 if(ajax.status == 200){ //获取响应内容 var result = ajax.responseText; //获取元素对象 var shadow = document.getElementById("t1"); shadow.innerHTML = result; } } } //发送请求 /* //get 请求实体拼接在url后面 ajax.open("get","ajax?name=田坤&password=123456"); //发送数据 在火狐浏览器中如果没有数据必须为null ajax.send(null); */ //post 请求需要单独的发送 ajax.open("post", "ajax"); //post方法需要设置解析格式 以下格式是以键值对的格式解析 当然在form表单中也有 ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); ajax.send("name=田坤&password=123456"); } </script> <style type="text/css"> #t1 {width: 200px;height: 200px;border: 1px solid;} </style> <body> <input type="button" onclick="getData()" value="按钮"> <div id="t1"></div> <!-- 解析编码格式 --> <form action="" enctype="application/x-www-form-urlencoded"> </form> </body> </html>package com.servlet; import java.io.IOException; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; //在web3.0后不用配置web就可以直接利用注解来实在url=pattern //@WebServlet("/ajax") public class myAjax extends HttpServlet { @Override public void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { req.setCharacterEncoding("utf-8"); resp.setContentType("text/html;charset=utf-8"); String name = req.getParameter("name"); String password = req.getParameter("password"); System.out.println(name+"---"+password+"---"+req.getMethod()); resp.getWriter().write("执手相看泪眼，竟无语凝噎"); } }
Ajax接受数据的几种方式
- 普通文本数据
- req.responseText得到返回的文本数据
- XML数据（testxml.jsp）
- 暂时没学习，先空着
- JSON（javascript object native）(重点)
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'selectHero.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
</head>
<script type="text/javascript">
function GetData(){
//获取参数信息
var heroname = document.getElementById("heroname").value;
if(heroname!=null){
//创建引擎对象
var ajax;
if(window.XMLHttpRequest){
ajax = new XMLHttpRequest();
}else {
ajax = new ActiveXObject("MSxml2.XMLHTTP");
}
//重写onreadystateChange函数
ajax.onreadystatechange = function(){
//判断ajax状态编码
if(ajax.readyState == 4){
//判断响应状态码
if(ajax.status == 200){
/*json(重点)
其实就是将数据按照json的格式拼接好的字符串，方便使用eval()将接受的
字符串数据直接转成JS对象
json格式
var 对象名={
属性名:值,
属性名:值，
...
}
*/
var result = ajax.responseText;
eval("var hero="+result);
//处理响应数据
//获取table表格对象
var tab = document.getElementById("tab");
tab.innerHTML="";
var tr = tab.insertRow(0);
var cell0 = tr.insertCell(0);
cell0.innerHTML="编号";
var cell1 = tr.insertCell(1);
cell1.innerHTML="名称";
var cell2 = tr.insertCell(2);
cell2.innerHTML="价格";
var cell3 = tr.insertCell(3);
cell3.innerHTML="简介";
//插入新的行 及其数据
var tr = tab.insertRow(1);
var cell0 = tr.insertCell(0);
cell0.innerHTML=hero.uid;
var cell1 = tr.insertCell(1);
cell1.innerHTML=hero.name;
var cell2 = tr.insertCell(2);
cell2.innerHTML=hero.price;
var cell3 = tr.insertCell(3);
cell3.innerHTML=hero.desc;
}
}
}
ajax.open("get", "hero?name="+heroname);
ajax.send(null);
}
}
</script>
<body>
<h3>欢迎来到英雄商店</h3>
<hr>
英雄名称:<input type="text" id="heroname" name="heroname" value=""/>
<input type="button" value="查询" onclick="GetData()"/>
<hr>
<table border="1px" id="tab">
</table>
</body>
</html>
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
//请求编码格式
req.setCharacterEncoding("utf-8");
//响应编码格式
resp.setCharacterEncoding("utf-8");
resp.setContentType("text/html;charset=utf-8");
//获取请求数据
String heroname = req.getParameter("name");
//处理请求数据
Hero hero = null;
HeroService hs = new HeroServiceImpl();
hero = hs.getHeroInfo(heroname);
//响应处理结果
resp.getWriter().write(new Gson().toJson(hero));
}我们在通过ajax实现一个检验用户名是否存在的功能
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'user.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
</head>
<script type="text/javascript">
function CheckUsername(){
//获取用户名的信息
var uname = document.getElementById("uname").value;
if(uname!=null){
var ajax;
//创建ajax引擎
if(window.XMLHttpRequest){
ajax = new XMLHttpRequest();
}else{
ajax = new ActiveXObject("MSxml2:XMLHTTP");
}
//重写readystatechange函数
ajax.onreadystatechange = function(){
//判断ajax的状态码
if(ajax.readyState == 4){
//判断响应的状态码
if(ajax.status == 200){
//处理响应数据
var result = ajax.responseText;
if(result == "true"){
alert("用户名已经存在");
}else if (result == "false"){
alert("可以使用该用户名");
}
}
}
}
//发送请求
ajax.open("get", "cuser?uname="+uname);
ajax.send(null);
}
}
</script>
<body>
<!-- 实现一个检测用户名是否存在 -->
<input type="text" id="uname" name ="uname" value="" placeHolder="用户名">
<input type="button" value="检测用户名是否存在" onclick="CheckUsername()">
</body>
</html>
package com.servlet;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.servlet.service.HeroService;
import com.servlet.service.impl.HeroServiceImpl;
public class CheckUsername extends HttpServlet {
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
//请求编码格式
req.setCharacterEncoding("utf-8");
//响应编码格式
resp.setContentType("text/html;charset=utf-8");
//获取请求数据
String uname = req.getParameter("uname");
System.out.println(uname);
//处理请求数据
//获取业务层对象
HeroService hs = new HeroServiceImpl();
Boolean flag = hs.checkUsernameExist(uname);
System.out.println(flag);
String str = "";
if(flag==true){
str = "true";
}else
str = "false";
//返回处理数据结果
resp.getWriter().write(str);
}
}