一  简介

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的更多相关文章

  1. 前端之ajax

    前端之ajax 本节内容 ajax介绍 原生js实现ajax jquery实现ajax json 跨域请求 1. ajax介绍 AJAX(Asynchronous Javascript And XML ...

  2. web前端基础知识及快速入门指南

    web前端基础知识及快速入门指南 做前端开发有几个月了,虽然说是几个月,但是中间断断续续的上课.考试以及其它杂七杂八的事情,到现在居然一直感觉自己虽然很多前端的知识很眼熟,却也感觉自己貌似也知识在门口 ...

  3. 第七篇:web之前端之ajax

    前端之ajax   前端之ajax 本节内容 ajax介绍 原生js实现ajax jquery实现ajax json 跨域请求 1. ajax介绍 AJAX(Asynchronous Javascri ...

  4. 前端基础面试题(JS部分)

    1.几种基本数据类型?复杂数据类型?值类型和引用数据类型?堆栈数据结构? 基本数据类型:Undefined.Null.Boolean.Number.String 值类型:数值.布尔值.null.und ...

  5. web前端基础学习路线

    1.HTML和CSS的基础知识,完成网页的初步设计 2.JavaScript基础知识和DOM.BOM的学习 3.前端基础框架:CSS框架Bootstrap.JavaScript框架jquery的熟悉使 ...

  6. 前端基础之:JQuery(可编辑版)

     前端基础之jquery   一 jQuery是什么? [1]   jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入其team. [2]   ...

  7. 进击的Python【第十六章】:Web前端基础之jQuery

    进击的Python[第十六章]:Web前端基础之jQuery 一.什么是 jQuery ? jQuery是一个JavaScript函数库. jQuery是一个轻量级的"写的少,做的多&quo ...

  8. BAT 前端开发面经 —— 吐血总结 前端相关片段整理——持续更新 前端基础精简总结 Web Storage You don't know js

    BAT 前端开发面经 —— 吐血总结   目录 1. Tencent 2. 阿里 3. 百度 更好阅读,请移步这里 聊之前 最近暑期实习招聘已经开始,个人目前参加了阿里的内推及腾讯和百度的实习生招聘, ...

  9. 前端第四篇---前端基础之jQuery

    前端第四篇---前端基础之jQuery 一.jQuery介绍 二.jQuery对象 三.jQuery基础语法 四.事件 五.动画效果 六.补充each 一.jQuery简介 1.jQuery介绍 jQ ...

随机推荐

  1. 【转】使用sklearn做特征工程

    1 特征工程是什么? 有这么一句话在业界广泛流传:数据和特征决定了机器学习的上限,而模型和算法只是逼近这个上限而已.那特征工程到底是什么呢?顾名思义,其本质是一项工程活动,目的是最大限度地从原始数据中 ...

  2. JavaScript之搜索框

    啧啧啧,又到月末了,时间过的真的好快啊︿( ̄︶ ̄)︿现在没课上,天天宅在寝室就这么三件事:吃饭睡觉打豆豆.真感无所事事,无聊至极!突然好怀念那些上课的日子啊!至少不像现在,生活状态全部都搅乱了:以前可 ...

  3. CSS之旋转立方体

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. SpringMVC注解@RequestMapping @RequestParam @ResponseBody 和 @RequestBody 解析

    SpringMVC Controller层获取参数及返回数据的方式: @RequestMapping @RequestMapping(“url”),这里的 url写的是请求路径的一部分,一般作用在 C ...

  5. mysql 常见数据类型

    ---恢复内容开始--- MySQL常见的数据类型 一.数据类型是什么? 数据类型是指列.存储过程参数.表达式和局部变量的数据特征,它决定了数据的存储格式,代表了不同的信息类型. 有一些数据是要存储为 ...

  6. 使用POI设置导出的EXCEL锁定指定的单元格

    注:要锁定单元格需先为此表单设置保护密码,设置之后此表单默认为所有单元格锁定,可使用setLocked(false)为指定单元格设置不锁定. sheet.protectSheet("&quo ...

  7. Django rest framework源码分析(一) 认证

    一.基础 最近正好有机会去写一些可视化的东西,就想着前后端分离,想使用django rest framework写一些,顺便复习一下django rest framework的知识,只是顺便哦,好吧. ...

  8. CentOS7 Could not retrieve mirrorlist http://mirrorlist.centos.org/?...

    在执行命令 sudo yum clean expire-cache 清理完过期的缓存后,再执行yum install 或 update命令都失败了.原因是清理过期缓存结果不该被清理的也删掉了,可能是y ...

  9. 201621123006 《Java程序设计》第7周学习总结

    1. 本周学习总结 1.1 思维导图:Java图形界面总结 1.2 可选:使用常规方法总结其他上课内容. 窗体事件:一般做最外层容器 鼠标事件:按下.松开.单击 键盘事件:按下.释放 动作事件:不代表 ...

  10. SpringMvc中的Interceptor拦截器的学习

    拦截器是SpringMvc框架中常用的一个东东,它跟Filter相似,但是也有区别,以前也没用过,今天看到就顺便学习了一下. SpirngMvc中的Interceptor主要是通过HandlerInt ...