AJAX
AJAX（异步的JAVASCRIPT和XML）
AJAX：是一种无刷新的页面和交互技术：（页面不需要刷新就可以收到服务器的数据）
改变了我们传统的交互方式：
传统请求：
1.发请求
2 服务器收到请求，处理请求经常要给页面携带数据 request setAttribute("map",map);转发到页面
3 浏览器收到页面数据，在页面上使用el表达式获取数据
这种方式会导致页面全部刷新 造成很大的服务器负担
AJAX请求：
现在不直接用浏览器接收数据 用XMLHttpRequest对象来接收和发送数据 利用dom增删改的方式来改变页面数据
dom：整个html页面文档对象 Document Object Model，简称DOM
异步：可以看成 两个人在做事情 发请求或收请求不会等到一个出路好了再继续下一步
同步：同一个人 请求发送出去必须等到服务器整个响应完成下面才能执行
异步不会阻塞浏览器
原来的交互：
1 发送请求
2 服务器收到请求 调用对应的Servlet进行处理；Servlet处理完成会生成响应信息
3 浏览器收到了服务器响应的数据 就会把之前的页面清除掉 显示新的数据 （效果就是页面刷新）
现在的交互 （XMLHttpRequest对象）
1 XMLHttpRequest对象帮我们发送请求
2 服务器收到请求 调用对应的Servlet进行处理 Servlet处理响应会有响应信息生成（浏览器收数据）
3 XMLHttpRequest对象收数据（浏览器就感受不到这个数据）
使用方式
原生的AJAX使用起来非常的麻烦 参考https://www.w3school.com.cn/ajax/index.asp
如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：
xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();
GET 请求：
var xhr=xmlhttp.resquetXML();//创建XMLHttpRequest对象
xhr.open("GET","demo_get.asp",true);//创建链接
xhr.send();//通过地道发送数据
响应
//监听xhr的状态 当响应成功
xhr.onreadystatechange=function(){ if (xhr.readyState==4 && xhr.status==200) { document.getElementById("myDiv").innerHTML=xhr.responseText; } }//拿到返回的内容 （字符串）
//要把这个字符串转成js格式才能在页面上面显示
所以原生的太过于繁琐 目前选择jquery包装好的AJAX 使用起来相对简单一点
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
</body>
<script type="text/javascript">
//一个复杂的json对象
var student = {
username : "zhagnshang",
age : 18,
car : {
color : "red",
weight : "1.1吨",
price : "300000￥"
},
infos : [ {
bookname : "",
price : 99.88
}, 18, true ]
};
//js 对象的好处，属性操作特别方便
/* alert(student.username);//usernaem
alert("weishenmebuxing"); */
//json的要求和js对象是一样的，只不过key必须是字符串
//js对象在声明key的时候是否加双引号可以选择
var student2 = {
username : "zhagnshang",
age : 18
}
/* alert(student2); */
//假设服务器给了我们这么一个字符串
var strjson=JSON.stringify(student2);
//想使用这个字符串，并且获取到他原来代表的js对象里面的属性值
//需要把字符串（满足js对象表示法（json）格式）转为js对象
var student3=JSON.parse(strjson)
alert(student3.username);
</script>
<a href="ajaxDemo">give me some information ...</a>
</html>
浙公网安备 33010602011771号