前端基础——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 ...
随机推荐
- 这些HTML、CSS知识点,面试和平时开发都需要 No5-No7(知识点:文字设置、设置背景、数据列表)
系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5-No7(知识 ...
- ACM比赛学习指导(20180223)
0.比赛介绍 (1)浙江省大学生程序设计比赛,3人一组,题目为英文 (2)ACM程序设计比赛 百度百科介绍 1.理论学习 (1)<挑战程序设计竞赛>,秋叶拓哉,巫泽俊 (2)<算法竞 ...
- IOS-高仿bilibili项目
高仿bilibili项目成长之路 (logo) 高仿bilibili项目 Github链接:(https://github.com/MichaelHuyp/Bilibili_Wuxianda) 目前完 ...
- Spring MVC中使用Swagger生成API文档和完整项目示例Demo,swagger-server-api(二十)
一:Swagger介绍 Swagger是当前最好用的Restful API文档生成的开源项目,通过swagger-spring项目 实现了与SpingMVC框架的无缝集成功能,方便生成spring r ...
- EPANET头文件解读系列4——EPANET2.H
该头文件的功能与系列3中的TOOLKIT.H类似,而且内容也几乎一致,所以也就不再详细介绍.
- 两个Fragment之间传递数据
1.第一个Fragment BlankFragment blankFragment = new BlankFragment();Bundle bundle = new Bundle();bundle. ...
- Android 遍历全国的地区二(获取天气)
根据上次的内容 1. 界面布局 weather_layout.xml <LinearLayout xmlns:android="http://schemas.android.com/a ...
- RabbitMq window下配置安装
1. 搭建环境 1.1 安装Erlang语言运行环境 由于RabbitMQ使用Erlang语言编写,所以先安装Erlang语言运行环境. 1.2 Erlang(['ə:læŋ])是一种通用的面向并发的 ...
- 《Agile Web Development With Rails》读后感--rails基于web设计的best Practices
最近看完<Agile Web Development with Rails>一书,受益匪浅.书中先是用一个简单的web应用带你进入Rails的世界,然后在你大致熟悉之后,再带你了解Rail ...
- 流程设计器jQuery + svg/vml(Demo4 - 画连线)
流程结点可以添加了之后,接下来到画结点与结点之间的连线,效果图如下 很眼馋visio的连线可以折来折去,这里实现的连线比较简单. 首先是把连线的类型分为Z(折线).N(折线)及I(直线)3种类型,然后 ...