介绍
<!--
ajax 无刷新技术
不刷新，部分刷新
1.页面触发,请求由页面发起,ajax由js代码实现
2.ajax也是符合http请求
3.XMLHttpRequest ajax请求的核心对象 存在浏览器兼容性 IE7开始支持这个对象
IE6 要使用 new ActiveXObject("Microsoft.XMLHTTP")
4.ajax请求是不刷新页面的，请求是一次性的，不能使用转发或者重定向
第一种直接请求业务，不返回任何东西到页面
第二种请求业务得到结果数据，后台一定要使用response.getWrite().print()获取数据
第三种请求业务得到文件，音频，视频等等，后台要使用response.getOutputStream()
5.ajax的同步和异步 ajax默认是异步 true ajax请求相当于开了一多线程
同步 false ajax就不是多线程，会顺序运行
6.后台传递到前台不能传递对象只能传递字符串，如果要实现java和js中对象的互相转换
要使用json
-->
<html>
<head>
<title>Title</title>
<script language="JavaScript">
function getName(){
//作ajax请求
//浏览器的兼容性
//1.获取XMLHttpRequest对象
var xmlHttp;
if (window.XMLHttpRequest){
//如果存在 那浏览器是IE7以上
xmlHttp = new XMLHttpRequest();
}else{
//如果不存在，IE6
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//请求
//2.准备请求的参数
//open方法 三个参数
//第一个参数请求的方法类型
//第二个参数请求的地址
//第三个参数请求是同步还是异步 默认是true
xmlHttp.open("get","MyServlet",true);
//扩展 ajax的回调函数
xmlHttp.onreadystatechange = function(){
// if(xmlHttp.readyState == 1){
// console.log("1、服务器连接已经建立");
// }
// if(xmlHttp.readyState == 2){
// console.log("2、请求已接受");
// }
// if(xmlHttp.readyState == 3){
// console.log("3、请求处理中");
// }
if(xmlHttp.readyState == 4 && xmlHttp.status==200){
console.log("后台返回 回调函数");
console.log("4、请求已相应");
var data = xmlHttp.responseText;
console.log(data);
}
};
//3.发送请求
xmlHttp.send();
//4.获取请求的结果 responseText请求结果
var data = xmlHttp.responseText;
console.log("请求结束");
}
</script>
</head>
<body>
<a href="MyServlet">获取数据</a>
<form action="MyServlet">
<input type="submit" value="获取数据">
</form>
<input type="button" value="触发" onclick="getName()">
</body>
</html>
使用
$(function(){
$("#btn").click(function(){
var obj = {name:"xiaowang","sex":"男"};
$.ajax({
url:"MyServlet",
method:"get",
async:true,
data:"name=xiaowang&sex=男",
dataType:"text",
success:function(data){
alert(data);
}
});
});
});
