一.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无端的增多了对服务器的访问次数,给服务器带来了压力