前端基础——AJAX
一 简介
AJAX(Asynchronous Javascript And XML),即AJAX = 异步JavaScript + XML。AJAX是一种用于创建快速动态网页的技术。
AJAX两大特点:
- 与服务器异步交互
- 浏览器页面局部刷新:在不重新加载整个网页的情况下,对网页的某部分进行刷新。
同步交互和异步交互:
同步交互:客户端发送一个请求后,需要等待服务端响应结束后才能发送第二个请求;
异步交互:客户端发送一个请求后,无需等待服务端响应结束就可以发送第二个请求。
二 AJAX优缺点
优点:
- AJAX使用JavaScript技术向服务器发送异步请求
- AJAX无须刷新整个浏览器页面,便可实现局部刷新
- 相比刷新整个页面,AJAX局部刷新性能更高
缺点:
- AJAX并不适用于所有场景,有些时候还是需要用到同步交互
- AJAX虽然提高了用户体验,但无形中向服务器发送的请求增加来,导致服务器压力增大
- AJAX通过JavaScript技术实现,需要解决不同浏览器之间的兼容性问题
三 AJAX工作原理
四步操作:
- 创建核心对象;
- 使用核心对象打开与服务器的连接;
- 发送请求
- 注册监听,监听服务器响应。
XMLHttpRequest:
- open(请求方式, URL, 是否异步)
- send(请求体)
- onreadystatechange,指定监听函数,它会在xmlHttp对象的状态发生变化时被调用
- readyState,当前xmlHttp对象的状态,其中4状态表示服务器响应结束
- status:服务器响应的状态码,只有服务器响应结束时才有这个东东,200表示响应成功;
- responseText:获取服务器的响应体

前端基础——AJAX的更多相关文章
- 前端之ajax
前端之ajax 本节内容 ajax介绍 原生js实现ajax jquery实现ajax json 跨域请求 1. ajax介绍 AJAX(Asynchronous Javascript And XML ...
- web前端基础知识及快速入门指南
web前端基础知识及快速入门指南 做前端开发有几个月了,虽然说是几个月,但是中间断断续续的上课.考试以及其它杂七杂八的事情,到现在居然一直感觉自己虽然很多前端的知识很眼熟,却也感觉自己貌似也知识在门口 ...
- 第七篇:web之前端之ajax
前端之ajax 前端之ajax 本节内容 ajax介绍 原生js实现ajax jquery实现ajax json 跨域请求 1. ajax介绍 AJAX(Asynchronous Javascri ...
- 前端基础面试题(JS部分)
1.几种基本数据类型?复杂数据类型?值类型和引用数据类型?堆栈数据结构? 基本数据类型:Undefined.Null.Boolean.Number.String 值类型:数值.布尔值.null.und ...
- web前端基础学习路线
1.HTML和CSS的基础知识,完成网页的初步设计 2.JavaScript基础知识和DOM.BOM的学习 3.前端基础框架:CSS框架Bootstrap.JavaScript框架jquery的熟悉使 ...
- 前端基础之:JQuery(可编辑版)
前端基础之jquery 一 jQuery是什么? [1] jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入其team. [2] ...
- 进击的Python【第十六章】:Web前端基础之jQuery
进击的Python[第十六章]:Web前端基础之jQuery 一.什么是 jQuery ? jQuery是一个JavaScript函数库. jQuery是一个轻量级的"写的少,做的多&quo ...
- BAT 前端开发面经 —— 吐血总结 前端相关片段整理——持续更新 前端基础精简总结 Web Storage You don't know js
BAT 前端开发面经 —— 吐血总结 目录 1. Tencent 2. 阿里 3. 百度 更好阅读,请移步这里 聊之前 最近暑期实习招聘已经开始,个人目前参加了阿里的内推及腾讯和百度的实习生招聘, ...
- 前端第四篇---前端基础之jQuery
前端第四篇---前端基础之jQuery 一.jQuery介绍 二.jQuery对象 三.jQuery基础语法 四.事件 五.动画效果 六.补充each 一.jQuery简介 1.jQuery介绍 jQ ...
随机推荐
- 【转】使用sklearn做特征工程
1 特征工程是什么? 有这么一句话在业界广泛流传:数据和特征决定了机器学习的上限,而模型和算法只是逼近这个上限而已.那特征工程到底是什么呢?顾名思义,其本质是一项工程活动,目的是最大限度地从原始数据中 ...
- JavaScript之搜索框
啧啧啧,又到月末了,时间过的真的好快啊︿( ̄︶ ̄)︿现在没课上,天天宅在寝室就这么三件事:吃饭睡觉打豆豆.真感无所事事,无聊至极!突然好怀念那些上课的日子啊!至少不像现在,生活状态全部都搅乱了:以前可 ...
- CSS之旋转立方体
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- SpringMVC注解@RequestMapping @RequestParam @ResponseBody 和 @RequestBody 解析
SpringMVC Controller层获取参数及返回数据的方式: @RequestMapping @RequestMapping(“url”),这里的 url写的是请求路径的一部分,一般作用在 C ...
- mysql 常见数据类型
---恢复内容开始--- MySQL常见的数据类型 一.数据类型是什么? 数据类型是指列.存储过程参数.表达式和局部变量的数据特征,它决定了数据的存储格式,代表了不同的信息类型. 有一些数据是要存储为 ...
- 使用POI设置导出的EXCEL锁定指定的单元格
注:要锁定单元格需先为此表单设置保护密码,设置之后此表单默认为所有单元格锁定,可使用setLocked(false)为指定单元格设置不锁定. sheet.protectSheet("&quo ...
- Django rest framework源码分析(一) 认证
一.基础 最近正好有机会去写一些可视化的东西,就想着前后端分离,想使用django rest framework写一些,顺便复习一下django rest framework的知识,只是顺便哦,好吧. ...
- CentOS7 Could not retrieve mirrorlist http://mirrorlist.centos.org/?...
在执行命令 sudo yum clean expire-cache 清理完过期的缓存后,再执行yum install 或 update命令都失败了.原因是清理过期缓存结果不该被清理的也删掉了,可能是y ...
- 201621123006 《Java程序设计》第7周学习总结
1. 本周学习总结 1.1 思维导图:Java图形界面总结 1.2 可选:使用常规方法总结其他上课内容. 窗体事件:一般做最外层容器 鼠标事件:按下.松开.单击 键盘事件:按下.释放 动作事件:不代表 ...
- SpringMvc中的Interceptor拦截器的学习
拦截器是SpringMvc框架中常用的一个东东,它跟Filter相似,但是也有区别,以前也没用过,今天看到就顺便学习了一下. SpirngMvc中的Interceptor主要是通过HandlerInt ...