AJAX概述

举报
Joey啊 发表于 2019/09/20 17:22:56 2019/09/20
【摘要】 1 什么是AJAXAJAX(Asynchronous Javascript And XML)翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互,传输的数据为XML(当然,传输的数据不只是XML)。AJAX还有一个最大的特点就是,当服务器响应时,不用刷新整个浏览器页面,而是可以局部刷新。这一特点给用户的感受是在不知不觉中完成请求和响应过程。与...

1 什么是AJAX

AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互,传输的数据为XML(当然,传输的数据不只是XML)。

AJAX还有一个最大的特点就是,当服务器响应时,不用刷新整个浏览器页面,而是可以局部刷新。这一特点给用户的感受是在不知不觉中完成请求和响应过程。

  1. 与服务器异步交互;

  2. 浏览器页面局部刷新;

2. 同步交互与异步交互

  1. 同步交互:客户端发出一个请求后,需要等待服务器响应结束后,才能发出第二个请求;

  2. 异步交互:客户端发出一个请求后,无需等待服务器响应结束,就可以发出第二个请求。

3. AJAX常见应用情景

image.png

当我们在百度中输入一个“传”字后,会马上出现一个下拉列表!列表中显示的是包含“传”字的10个关键字。

其实这里就使用了AJAX技术!当文件框发生了输入变化时,浏览器会使用AJAX技术向服务器发送一个请求,查询包含“传”字的前10个关键字,然后服务器会把查询到的结果响应给浏览器,最后浏览器把这10个关键字显示在下拉列表中。

  1. 整个过程中页面没有刷新,只是刷新页面中的局部位置而已!

  2. 当请求发出后,浏览器还可以进行其他操作,无需等待服务器的响应!

image.png

当输入用户名后,把光标移动到其他表单项上时,浏览器会使用AJAX技术向服务器发出请求,服务器会查询名为zhangSan的用户是否存在,最终服务器返回true表示名为zhangSan的用户已经存在了,浏览器在得到结果后显示“用户名已被注册!”。

  1. 整个过程中页面没有刷新,只是局部刷新了;

  2. 在请求发出后,浏览器不用等待服务器响应结果就可以进行其他操作;

4 AJAX的优缺点

优点:

  1. AJAX使用Javascript技术向服务器发送异步请求;

  2. AJAX无须刷新整个页面;

  3. 因为服务器响应内容不再是整个页面,而是页面中的局部,所以AJAX性能高;

缺点:

  1. AJAX并不适合所有场景,很多时候还是要使用同步交互;

  2. AJAX虽然提高了用户体验,但无形中向服务器发送的请求次数增多了,导致服务器压力增大;

  3. 因为AJAX是在浏览器中使用Javascript技术完成的,所以还需要处理浏览器兼容性问题;


【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。