一、ajax使用一种异步更新技术，可以只刷新局部页面的数据
优点：不需要插件、优秀的用户体验、提高WEB程序的性能、减轻服务器和带宽的负担
缺点：浏览器对XmlHttpServlet对象的支持度不足、破坏浏览器前进和后退按钮的正常功能、对搜索引擎支持不足、开发和调试工具欠缺
二、ajax的使用
ajax是一门与服务器端无关的语言技术，可使用服务器端的任何语言。从服务器端接收数据的时候，那些数据必须以浏览器能后理解的形式格式进行发送，服务器的数据可以用xml、json的格式返回数据
三、json数据
json是一种简单的数据格式，比xml格式的数据效率更高。json是js的原生格式，所以js在处理json数据的时候不用导入任何特殊的API和工具包
json的规则：对象是一个无序的 名称：值 对的集合。一个对象以一个 { 开始，一个 } 结束，一个{}里边可以写多个值对，值对之间使用 “ ， ”（逗号） 隔开
1）映射用冒号（“ ： ”）表示。 名称：值
2）并列的数据之间用逗号（“ ， ”）分割。名称1：值1，名称2：值2
3）映射的集合（对象）用大括号（" {} "）表示。{名称1：值1，名称2：值2}
4）并列数据的集合（数组）用方括号（“[]”）表示。[{名称1：值1，名称2：值2} , {名称1：值1，名称2：值2} ]
5）元素值可具有的类型：string,number,object,array,true,false,null
Json格式案例：
//json对象的数据格式
var user={"name":"xiaoming","pawd":"123456"};
alert(user.pawd);
var userlist=[
{"name":"xiaoming","pawd":"123456"},
{"name":"xiaohong","pawd":"1234567"},
{"name":"xiaoqiang","pawd":"1234568"}
]
alert(userlist[2].name);
var userNew={"name":"xiaoming",
"pawd":"1239087",
"hibbies":[{"name":"lanqiu"},{"name":"zuqiu"}]
};
var hibbies = userNew.hibbies;
for(var i=0;i<hibbies.length;i++){
alert(hibbies[i].name);
}
Json的优缺点：
优点：作为一种数据传输格式，JSON与XML很相似，但是更加轻巧
json不需要从服务器端发送含有特定内容类型的首部信息，只是一个HTML普通字符串
缺点：太过严谨
代码不容易阅读
四、jquery中的AJAX操作
jquery对ajax进行了封装，在JQuery中最常用的是load（），$.ajax()，$.get()，$.post()，最常用的是后三种
1、 $.get()和$.post()写法相似，写法没有差别
要导入jquery的包
两者中用一个举例 $.get()：
$.get(url,data,function(backresult，status,xmlHttpRequest){
var result=eval(backresult)；//转换为JSON的解析格式
});
第一个参数 url： ajax传值的方向地址
第二个参数 data；要传递过去的参数 {“名称”:"值"} 可以为空
第三个参数 回调函数：处理后返回的值由此提取。 backresult：后台响应过来的数值 status：请求的状态结果 （successerror） xmlHttpRequest：ajax请求封装的对象，内容和backresult一样
----------->>>>>>> json的转换格式处理用eval()还可以用 $.get(url,data,function(backresult，status,xmlHttpRequest){ },"json"）;
实例
jsp页面：
<input type="button" onclick="ajaxget()" value="get请求"/>
servlet：
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
req.setCharacterEncoding("utf-8");
String time = req.getParameter("time");
System.out.println(time);
ArrayList<User> users = new ArrayList<>();
User user = new User("18","xiaoming","123564");
User user1 = new User("19","xiaohong","000000");
User xiaobai = new User("17", "xiaobai", "111111");
users.add(user);
users.add(user1);
users.add(xiaobai);
String result = JSON.toJSONString(users);//将结果转为json对象
resp.getWriter().write(result);//将json对象放在响应输出流
}
ajax处理：
function ajaxget() {
$.get("<c:url value='/ADS'/>",{"time":"sdf"},
function (backresult,ststus,xmlHttpServlet) {
var result=eval(backresult);
alert(result[2].name);
alert("ststus"+ststus);
});
}
GET请求和post请求的区别：
1、get请求的url地址有最大字节数限制，所以传参及路径不能过长，post没有限制
2、Get请求参数会带在地址后边，不安全，post不在后边，较安全
3、但是效率高，post效率相对较低
4、Get进行ajax异步请求的话，浏览器会判断原来是否已经请求过，并且参数没有任何改变，若原来请求过，且参数没有任何改变的话，
就可能直接读取缓存里的内容了，不在真正执行请求的地址代码了（通常在URL里加时刻在边的数据来保持请求的更新，例如 <c:url value="/JS?time="+new Date()+">），post没有此问题
2、$.ajax()的写法和get、post不同，如下
$.ajax({
type:"post",//提交方式
url:"<c:url value="/CS"/>",
data:{"sfid":sfid},
dataType:"json",//返回数据的格式
//处理正确执行success
success:function (backresult,status,xmlHttpServlet) {
},
//处理错误执行error
error:function (XMlHttpServlet,status,errorThrown) {
alert("出错了!!!!!!!!!!");
}
});
XMLHttpRequest.readyState: 状态码的意思：
0 － （未初始化）还没有调用send()方法
1 － （载入）已调用send()方法，正在发送请求
2 － （载入完成）send()方法执行完成，已经接收到全部响应内容
3 － （交互）正在解析响应内容
4 － （完成）响应内容解析完成，可以在客户端调用了
XMLHttpRequest.status ：返回的HTTP状态码，比如常见的404,500等错误代码。
第二个参数 Status：返回的是字符串类型，表示返回的状态，根据服务器不同的错误可能返回下面这些信息："timeout"（超时）, "error" （错误）, "abort"(中止), "parsererror"（解析错误），还有可能返回空值。
第三个参数 String errorThrown：也是字符串类型，表示服务器抛出返回的错误信息，如果产生的是HTTP错误，那么返回的信息就是HTTP状态码 对应的错误信息，比如404的Not Found,500错误的Internal ServerError。
实例：利用ajax实现select的联动
构建一个city实体类，代替调用数据库的数据
jsp页面：
<!--利用ajax实现select二级联动-->
省份:<select id="shengfen" onchange="ajax()">
<option value="0">------请选择省份-------</option>
<option value="1">--------河南-------</option>
<option value="2">--------湖北-------</option>
</select>
城市：<select id="chengshi">
<option value="0">--------请选择城市---------</option>
</select>
Servlet：
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String sfid = req.getParameter("sfid");
System.out.println(sfid);
List<City> cities = new ArrayList<City>();
if(sfid.equals("1")){
City c1 = new City(1, "郑州");
City c2 = new City(2, "信阳");
City c3 = new City(3, "新郑");
cities.add(c1);
cities.add(c2);
cities.add(c3);
}else if (sfid.equals("2")){
City c1 = new City(1, "武汉");
City c2 = new City(2, "黄石");
City c3 = new City(3, "武昌");
cities.add(c1);
cities.add(c2);
cities.add(c3);
}
System.out.println("sssssssssssss");
System.out.println(cities);
String city = JSON.toJSONString(cities);
resp.setContentType("text/html;charset=utf-8");
resp.getWriter().write(city);
}
ajax处理：
function ajax() {
//拿到被选中的省份
var sfid = $("#shengfen option:selected").val();
//alert(sfid);
//清空上次操作留在页面上的数据,gt()-->大于
$("#chengshi option:gt(0)").remove();
$.ajax({
type:"post",
url:"<c:url value="/CS"/>",
data:{"sfid":sfid},
dataType:"json",
success:function (backresult,ststus,xmlHttpServlet) {
$.each(backresult,function (i,res) {
//alert(i+""+res.bianhao);
//利用id选择器选中要操作的标签，利用append向里边添加新标签
$("#chengshi").append("<option value='+res.bianhao+'>"+res.cityname+"<option/>");
})
},
error:function (XMlHttpServlet,status,errorThrown) {
alert("出错了!!!!!!!!!!");
}
});
}
其中ajax中的遍历方法$.each(breakresult,funciton(i,res)){}中，i是索引，从0开始res是遍历出来的结果