1. 传统交互方式的弊端：
浏览器<-->请求/响应<-->服务器
客户端（浏览器）从服务器加载网页完毕后，网页中的内容如果需要更改，那么就必须让浏览器重新发送一次请求到服务器，服务器接收请求并处理完毕后会把一个完整的网页返回给客户端（浏览器），
每次操作都必须返回整个页面，带宽，响应速度都有影响的。
2. AJAX交互方式：
AJAX<-->请求/响应<-->服务器
网页中的内容如果需要更改，不使用浏览器发送请求，而是使用JavaScript中的XMLHttpRequest（及Ajax对象）对象发送请求到服务器，服务器接收请求并处理完毕后只返回页面需要的内容，XMLHttpRequest对象接收服务器返回的内容，程序员需要手动(javascript)的把内容更新到页面中。
3. 什么是ajax
ajax解决了传统方法的缺陷。AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新（不重新加载整个网页的情况下，对网页的某部分进行更新，提高用户的使用体验。
4. 哪些场景需要使用ajax ？
需要局部刷新的页面(要求：至少说出4个)
- 浏览器地图搜索
- 自动提示：Google Suggest 使用 AJAX 创造出动态性极强的 web 界面：当您在谷歌的搜索框输入关键字时，JavaScript 会把这些字符发送到服务器，然后服务器会返回一个搜索建议的列表。3
- 用户名重复检查：用户注册时，检查用户名是否存在，及时给用户反馈；4
- 邮箱提示：WEB版邮箱系统，当有新邮件到底服务器，浏览器不用刷新页面也知道是否有新邮件；5
- 无刷新分页：显示数据列表，用户点击下一页数据，整个页面不会刷新，只把下一页的数据更新到页面中；6
- 购物车：用户点击添加到购物车后，能继续进行其他操作，而购物车的数据存储服务器端；=
- 用户登录：用户登录的数据通过AJAX传输到后台，如果登录失败直接在当前登录页面提示用户，而不用刷新整个页面；
如果应用中的页面需要局部刷新并且需要与服务器交互，那么就可以使用AJAX；
- 视频网站
- 股票网站(轮询)
秘诀：浏览网站的时候，留心观察很多页面未刷新，但是页面中的内容被更改了，这些都是AJAX使用场景； 99%的网站都会用到Ajax。
5. 同步和异步
同步是指：发送方发出数据后，等接收方发回响应以后才发下一个数据包。（提交请求->等待服务器处理->处理完毕返回 这个期间客户端浏览器不能干任何事）
异步是指：发送方发出数据后，不等接收方发回响应，接着发送下个数据包。（请求通过事件触发->服务器处理（这时浏览器仍然可以作其他事情）->处理完毕）
6.ajax学习：
1：一个事件 onreadystatechange
2：2个状态 status readyState
3：三个方法 open send setRequestHeader
onreadystatechange，存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
status HTTP响应状态
200: "OK" 请求成功
404: "NOT FOUND" 没有找到对应资源
500:"Server Error" 服务器端错误
readyState
存有 XMLHttpRequest对象的请求状态。从 0 到 4 发生变化。
0: 请求未初始化 未创建
1: 服务器连接已建立 open()方法
2: 请求已接收 send()方法
3: 请求在服务器处理中
4: 请求已完成，且响应已就绪 ，响应完毕
open(method,url,async)
创建请求，并且规定请求的类型、URL 以及是否异步处理请求。
method：请求的类型；GET 或 POST
url：文件在服务器上的位置
async：true（异步），false（同步）
send(string) 将请求发送到服务器。
string：仅用于 POST 请求，字符串必须服务器URL编码格式（列如：param1=value1¶m2=value2）;
setRequestHeader(header,value)。 添加额外的请求头信息，post提交必须使用。
向请求添加 HTTP 头。
header: 规定头的名称
value: 规定头的值
注意：该方法必须在open与send之间调用；
原因：
1、open之后，open是创建一个请求，或者理解为请求的基本准备，如果没有请求，何来设置请求头信息；
2、send之前，send是发送一个请求，请求会把当前请求的头信息进行发送，发送后设置头信息无效；
7 Ajax正确写代码流程
Ajax检查用户名是否重复
register.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form action="" method="post">
用户名:<input type="text" name="username" onblur="checkName(this)"/><span id="msg"></span><br/><br/>
</form>
<input type="button" id="register" value="注册"/>
</body>
<script type="text/javascript">
var ajax;
function createAjax(){
if(window.XMLHttpRequest){
ajax = new XMLHttpRequest;
}else{
//低版本ie浏览器
ajax = new ActiveXObject("Microsoft.XMLHTTP");
}
}
function checkName(ele) {
var username = ele.value;
//1. 获取ajax对象
ajax = createAjax();
//2.以异步的方式发出get请求
//ajax.open("GET","checkNameServlet?username="+username+"&flag="+Math.random(),true);
ajax.open("POST","checkNameServlet",true);
//3. 设置请求头
ajax.setRequestHeader("Context-type","application/x-www-from-urlencoded");
//4. 编写事件函数
ajax.onreadystatechange = function() {
if(ajax.readyState==4 && ajax.status==200){
var data = ajax.responseText;
if(data == "true"){
document.getElementById("msg").innerHTML="<font style='color:green'>恭喜您，获得一个新账号</font>";
document.getElementById("register").disabled = false;//注册按钮状态可用
}else{
//console.log("用户名重复");
document.getElementById("msg").innerHTML="<font style='color:red'>用户名重复</font>";
document.getElementById("register").disabled = true;//注册按钮状态禁用
}
}
}
//get发送请求
//ajax.send();
//post发送请求
ajax.send("username="+username);
}
</script>
</html>
CheckNameServlet.java
@WebServlet("/checkServlet")
public class CheckNameServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
String username = request.getParameter("username");
username = new String(username.getBytes(),"UTF-8");
System.out.println(username+"----------");
//后台打印布尔值，前台还是获取字符串。
if(username.equals("admin")) {
response.getWriter().print(false);//注册失败
}else{
response.getWriter().print(true);//注册成功
}
}
}
8. jquery省市
City.java
package com.gs.domain;
public class City {
private Long id;
private String name;
private City parent;
public Long getId() {
return id;
}
public void setId(Long id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public City getParent() {
return parent;
}
public void setParent(City parent) {
this.parent = parent;
}
public City(Long id, String name, City parent) {
super();
this.id = id;
this.name = name;
this.parent = parent;
}
public City() {
super();
// TODO Auto-generated constructor stub
}
}
CityUtils.java
package com.gs.tools;
import java.util.ArrayList;
import java.util.List;
import com.gs.domain.City;
public class CityUtils {
static List<City> parentCitys = new ArrayList<>();
static List<City> childrenCitys = new ArrayList<>();
static {
Long id=1L;
City parent = new City(id++,"安徽省",null);
parentCitys.add(parent);
City child = new City(id++,"安庆市",parent);
childrenCitys.add(child);
child = new City(id++,"合肥市",parent);
childrenCitys.add(child);
parent = new City(id++,"浙江省",null);
parentCitys.add(parent);
child = new City(id++,"宁波市",parent);
childrenCitys.add(child);
child = new City(id++,"湖州市",parent);
childrenCitys.add(child);
child = new City(id++,"温州市",parent);
childrenCitys.add(child);
parent = new City(id++,"江苏省",null);
parentCitys.add(parent);
child = new City(id++,"南京市",parent);
childrenCitys.add(child);
child = new City(id++,"苏州市",parent);
childrenCitys.add(child);
child = new City(id++,"无锡市",parent);
childrenCitys.add(child);
}
public static List<City> getParentCitys() {
return parentCitys;
}
public static List<City> getChildrenCitys(Long parentId) {
List<City> temp = new ArrayList<>();//临时存储的集合
for(City i :childrenCitys) {
if(i.getParent().getId().equals(parentId)) {
temp.add(i);
}
}
return temp;
}
}
SelectCity.java
@WebServlet("/selectcity")
public class SelectCity extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/json;charset=utf-8");
Long id = new Long(request.getParameter("parentid"));
List<City> childrenCitys = CityUtils.getChildrenCitys(id);
JSON json = JSONSerializer.toJSON(childrenCitys);
System.out.println(json);
response.getWriter().print(json);
}
}
SelectProvince.java
@WebServlet("/selectprovince")
public class SelectProvince extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/json;charset=utf-8");//设置响应类型
List<City> parentCitys = CityUtils.getParentCitys();
//将集合转换为json对象
JSON json = JSONSerializer.toJSON(parentCitys);
response.getWriter().print(json);
}
}
provincecity.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>二级联动</title>
<script type="text/javascript" src="js/jquery-2.1.3.js"></script>
</head>
<body>
省：<select id="province"></select>
市：<select id="city"></select>
</body>
<script type="text/javascript">
$(function(){
$.get("selectprovince",null,function(data){
//i 索引从0开始，obj==this 代表当前 $(data)—— json数据。
$(data).each(function(i,obj){
$("#province").append("<option value='"+obj.id+"'>"+obj.name+"</option>");
});
});
$("#province").change(function(){
$("#city").empty();
var data ={"parentid":$("#province option:selected").val()};
//发请求
$.get("selectcity",data,function(data){
$(data).each(function(i,obj) {
$("#city").append("<option >"+obj.name+"</option>");
});
});
});
})
</script>
</html>