1.什么是Ajax?
传统请求: 基于超级链接 地址栏 form表单 地址栏 location.href 发起的请求全部是传统请求
特点: 请求之后,刷新整张页面,需要服务器响应完毕客户端才可以继续运行
缺点: 由于刷新了整张页面,用户操作被中断,造成大量网络流量的极大浪费。
异步请求: 基于ajax发起的请求都是异步请求
特点: 多个请求并行发生,请求之间互不影响,请求之后页面不动,刷新页面的局部,无需服务器响应客户端继续运行
2.基于原生JS的Ajax请求(不常用)
<script>
function Ajax() {
var xmlHttpRequest=new XMLHttpRequest(); //Ajax内置对象
//第一个参数是提交方式,第二个url地址,第三个true为异步false为同步
xmlHttpRequest.open("GET","http://localhost:8888/test_war_exploded/hello",true);
xmlHttpRequest.send();//发送异步请求
/*当readystate改变时触发事件
属性readystate
readystate=0时 表示请求未初始化
readystate=1时 表示服务器已连接
readystate=2时 表示请求已接收
readystate=3时 表示请求处理中
readystate=4时 表示请求处理完成,且响应就绪
属性status
status=200时 表示ok
status=404时 表示未找到页面
*/
xmlHttpRequest.onreadystatechange=function () {
if (xmlHttpRequest.readyState==4 &&xmlHttpRequest.status==200)
{
document.getElementById("div").innerHTML=xmlHttpRequest.responseText;
}
}
}
</script>
- Jquery封装Ajax
<script>
$(function () {
$("#btn").click(function () {
$.ajax({
url:"http://localhost:8888/test_war_exploded/hello",
type:"GET", //提交类型 GET 或 POST
dataType:"json", //返回的的数据类型 text ,xml, json
//后端返回的数据需要符合datatype格式,否则回调函数不执行
success:function (data) {
$("#div").html(data.name+" "+data.age+" "+data.balance);
}
})
});
});
</script>
Jquery也提供了对GET和POST异步请求的封装
/*
第一个参数url,第二个参数发送的数据(可省略),第三个参数回调函数(回调函数只有服务器有响应的时候才会调用),第四个返回类型
*/
$.get("http://localhost:8888/test_war_exploded/hello",function (data) {
$("#div").html(data.name+" "+data.age);
},"json");
});
同理还有$.JSON()方法
4.serialize序列化
$("#form").serialize()
Servlet
System.out.println(request.getParameter("user"));
System.out.println(request.getParameter("password"));
序列化数据存储格式为 user=value&password=value