一.ajax定义
- asynchronous javascript and xml:异步的js和xml
- 它能使用js访问服务器,而且是异步访问！
- 服务器给客户端的响应一般是整个页面,一个html完整页面!但在ajax中因为是局部刷新,那么服务器就不用再响应整个页面,而只是数据!
text:纯文本
xml:大家都熟悉！！！//大数据的时候用这个来响应
json:它是js提供的数据交互格式,它在ajax中最受欢迎！ ajaj
二.异步交互和同步交互
- 同步
- 发一个请求,就要等待服务器的响应结束,然后才能发第二个请求!中间这段时间就是一个字卡
- 刷新的是整个页面！
- 异步:
- 发一个请求后,无需等待服务器的响应,然后就可以发第二个请求!
- 可以使用js接收服务器的影响,然后使用js来局部刷新！
我们来写一个js.jsp
<script type=”text/javascript”> window.onload=function(){ //在文档加载完成后马上执行！就是一个监听器 //得到btn元素 var btn=document.getElementById(“btn”); //给btn的click事件注册监听 btn.onclick=function(){ //在按钮被点击时执行！ //获取h1元素对应的DOM对象 var h1=document.getElementById(“h1”); h1.innerHTML=”Hello JS！！！！” }; }; </script>
<button id=”btn”>点击这里</button>
<h1 id=”h1”></h1>
* 这就是局部刷新,效果不错,用户体验也不错
三.异步交互和同步交互图解
- 上面是同步,下面是异步
四.AJAX常见应用情景
1.例子一:百度的操作框
- 当我们在百度中输入一个”传”字后,会马上出现一个下拉列表!列表中显示的是包含”传”字的10个关键字(当然是最火的)
其实这里就使用了AJAX技术!当文本框发生了输入变化时,浏览器会使用AJAX技术向服务器发送一个请求,查询包含”传”字的前10个关键字,然后服务器会把查询到的的结果响应给浏览器,最后浏览器把这10个关键字显示在下拉列表中
- 整个过程中页面没有刷新,只是刷新页面中的局部位置而已
- 当请求发出后,浏览器还可以进行其他操作,无需等待服务器的响应
2.例子二:用户注册时(校验用户名是否被注册过)
-
当输入用户名后,把光标移动到其他表单项上时,浏览器会使用AJAX技术向服务器发出请求,服务器会查询名为zhangSan的用户是否存在,最终服务器返回true表示名为zhangSan的用户已经存在了,浏览器再得到结果后显示”用户名已被注册!”
- 整个过程中页面没有刷新,只是局部刷新了
- 在请求发出后,浏览器不用等待服务器响应结果就可以进行其他操作
五.ajax的优缺点
1.优点
- 异步交互:增强了用户的体验
- 性能:因为服务器无需再响应整个页面,只需要响应部分内容,所以服务器的压力减轻了
2.缺点
- ajax不能应用在所有场景!
- ajax无端的增多了对服务器的访问次数,给服务器带来了压力