ajax概述

前端之家收集整理的这篇文章主要介绍了ajax概述前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

一.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无端的增多了对服务器的访问次数,给服务器带来了压力
原文链接:https://www.f2er.com/ajax/160653.html

猜你在找的Ajax相关文章