• 慕课网首页
  • 免费课
  • 实战课
  • 体系课
  • 慕课教程
  • 专栏
  • 手记
  • 企业服务
  • 猿问

我的购物车

已加入门课程

购物车里空空如也

快去这里选购你中意的课程

实战课

体系课

我的订单中心
去购物车
  • 登录 / 注册
抱歉,未找到你想要查询的结果
全部开发者教程

Ajax 入门教程

Ajax 教程
Ajax 介绍篇 XMLHttpRequest 介绍 Ajax 发送请求 Ajax 处理服务端响应 Ajax 封装 jQuery Ajax Ajax 跨域 jQuery Ajax、fetch和 axios Ajax 前后端交互例子
  • 前端开发

    JavaScript

    JavaScript 入门教程

    本教程带你从初级到高级全面掌握 Javascript 的使用方法

    TypeScript 入门教程

    这是一个很好的简单课程,只需2小时你就可以学习TypeScript基础知识。

    Vue 入门教程

    本教程带您从零开始学习 Vue 框架的使用,让您轻松应对 Vue 项目的开发。

    Ajax 入门教程

    本教程涵盖Ajax的实现原理,及Ajax封装,最后是框架实现方法。

    ES6-10 入门教程

    对比 ES5 进行学习 ES6+,理解 ES6+ 语法背后的思想

    Yarn 入门教程

    Yarn得相关基础知识和高级进阶

    ECharts 入门教程

    从零开始学习 ECharts ,掌握 ECharts 核心内容

    HTML & CSS

    CSS3 入门教程

    本课程从盒模型、文字、颜色、过渡、动画、布局、伪类等方面介绍 CSS3 的使用。

    雪碧图入门教程

    本文详细介绍了雪碧图的由来历史以及各种使用方式

    移动端布局教程

    由于移动互联网的兴起,移动端项目占据了很大一部分比重,本章将详细讲解几种常见布局

    Html5 入门教程

    最新一代的HTML标准,增加了许多实用的特性

    Sass 入门教程

    前端项目中 Sass 的快速入门教程

    HTML 入门教程

    从零讲解 HTML,掌握基础 HTML 知识内容

    canvas 入门教程

    本教程带你从初级到高级全面掌握canvas的使用方法

    uni-app 入门教程

    从零开始学习 uni-app 框架,轻松上手应用开发

  • 服务端相关

    服务器

    Nginx 入门教程

    本教程使您掌握 Nginx 安装、配置、核心模块的详解、实际使用的能力。

    HTTP 入门教程

    从协议原理开始到 Web 服务器以及 Web 安全一网打尽

    Docker 入门教程

    从 Docker 的基础概念开始,从实际问题入手带你学习 Docker

    Shell 入门教程

    本教程由浅入深,系统性的讲解Linux Shell脚本编程。

    Linux 入门教程

    本教程从安装 Linux 开始,囊括 Linux 基础命令操作以及进阶系统管理

    开发工具

    Gradle 入门教程

    本教程使您掌握实际使用gradle进行项目构建、测试、打包、发布的能力。

    Vim 编辑器教程

    课程主要讲解Vim的安装配置,四种模式、基本操作,以及包管理工具和寄存器等内容。

    RESTful 规范教程

    本教程从什么是 REST 开始带你领略 Web 开发中无处不在的规范

    Dreamweaver 教程

    DW 是一款同时具有网页制作和网页管理功能的网站开发工具,可以快速进行网站建设

    Markdown 入门教程

    本课程涵盖 Markdown 的基本及扩展语法。

    Maven 入门教程

    从最基础的安装 Maven 开始到 Maven 在开发中的实际应用

    Eclipse 编辑器教程

    本教程从Eclipse安装开始带你轻松掌握Eclipse常用开发技巧

    GitHub 入门教程

    本教程带你轻松掌握最实用的 GitHub 知识

    Android Studio 编辑器教程

    Android Studio 编程技巧一网打尽

    PyCharm 编辑器教程

    工作经常用到的 PyCharm 编辑器使用技巧一网打尽

    Sublime Text 使用教程

    花里胡哨展示sublime编辑器的各种功能

    Postman 教程

    Postman 由Google 开发用来做接口请求测试,前后端开发人员都可以使用

    Git入门教程

    从入门到精通。

    热门服务端语言

    C 语言入门教程

    本教程从语法基础、进阶知识等各方面详解 C 语言。

    Go 入门教程

    本教程从 Go 语言的基本语法掌握到进阶编程实践

    Kotlin 教程

    从 Kotlin 的基础语法到高级特性一网打尽

    Ruby 入门教程

    本教程从 Ruby 的各种对象开始学习到 Ruby 的实际使用

    ThinkPHP 入门教程

    本教程主要讲解 ThinkPHP 框架如何上手开发应用

  • Java

    基础应用

    Java 入门教程

    深入浅出讲解 Java 语言基础知识,带你入门 Java 语言

    Android 入门教程

    为你解析最实用的 Android 技术,让你平滑上手,顺利进阶,为开发保驾护航

    算法入门教程

    分析讲解常见算法的思想及使用

    数据结构入门教程

    通俗易懂的带你了解 Java 数据结构

    Lambda 表达式教程

    本教程展现了Lambda表达式的基础语法以及在程序中的应用

    Java 并发原理入门教程

    本教程为Java并发原理入门教程,在Java程序开发中占据着举足轻重的地位

    设计模式入门教程

    带你分析最常见的九个设计模式

    Java并发工具

    本课程简洁明了展示最基本的并发工具类相关概念及应用方法。

    JVM 入门教程

    JVM 入门教程,对JVM结构进行分模块讲解,简单易懂。

    RabbitMQ 入门教程

    超系统的RabbitMQ基础知识课程,你还在等什么?

    网络编程入门教程

    Java 网络编程核心要点详解

    后端通用面试教程

    带你系统梳理后端高频面试题,轻松丰富你的校招&社招阶段

    框架应用

    Spring Boot 入门教程

    循序渐进讲解 Spring Boot 企业级应用开发

    Spring 入门教程

    通俗易懂 渐进式讲解 Spring 企业级开发应用

    Hibernate 入门教程

    由浅入深讲解 Hibernate 企业级 JDBC 应用框架

    MyBatis 入门教程

    本教程整理出“百分之二十”的知识,帮你办到“百分之八十”事情

    Spring MVC 入门教程

    通俗易懂讲解 Spring MVC 框架应用

    Swagger 入门教程

    本课程以图文并茂的方式带你学习 Swagger 核心知识和应用剖析

    Zookeeper 入门教程

    由浅入深的 学习 ZooKeeper 的基本使用以及高级使用

    Netty 教程

    由浅入深的讲解 Netty 的核心知识体系,快速上手使用和理解 Netty

    Spring Security

    本课程涵盖了 Spring Security 框架的基本原理和集成方法

    微服务

    Spring Cloud Hystrix

    系统介绍 Hystrix 支持特性与实际应用场景实战

  • Python

    基础应用

    Python 入门语法教程

    本教程带你从 Python 的基础语法开始学习 Python。

    Python 原生爬虫教程

    本教程从爬虫基础知识到进阶技巧到实际应用。

    Python 进阶应用教程

    本教程涵盖 Python 的面向对象、标准库解析、异常处理直至最后的领域应用

    Python 算法入门教程

    用 Python 代码实现常用算法并汲取算法核心思想。

    进阶方向应用

    Django 入门教程

    从 Web 基础到 Django 框架的实际开发应用

    Flask 框架教程

    Flask 框架快速入门实现一个 TodoList 功能

    NumPy 入门教程

    本教程从基础的数据类型开始到 NumPy 的高级应用一网打尽

    Scrapy 入门教程

    从爬虫基础开始到使用 Scrapy 框架抓取各大网站数据

    TensorFlow 入门教程

    通过本教程对 TensorFlow 框架快速入门

    Python 办公自动化教程

    本教程带你使用Python快速操作Excel、Word、PPT,处理各种文件

    Pandas 入门教程

    本教程从基础的数据类型开始到 Pandas 的高级应用一-网打尽

  • 数据库

    MySQL

    MySQL 入门教程

    本教程主要讲解 MySQL 增删改查等基础操作

    SQL 入门教程

    本教程讲解使用 SQL 访问和处理数据系统中的数据的方法。

    MySQL 进阶教程

    那些你还不理解的 MySQL 高阶特性一网打尽

首页 慕课教程 Ajax 入门教程 Ajax 入门教程 Ajax 介绍篇
陈广鹏 · 更新于 2020-04-12

XMLHttpRequest 介绍

下一节

Ajax 介绍篇

1. 开局一张图

图片描述

没错,这正是我们接下来要讲的 Ajax 的直接效果图。正如图片场景所示,前端在点击按钮的时候,可以触发网络请求(具体可以看 Gif 图右边)。当后端返回随机数据时,前端获取数据并显示在网页的局部位置。

相信工作于前后端的同学对 Ajax 应该不会陌生,有些经验的程序员,对于上图所示的前后端交互也早已习以为常。在我们日常工作中,Ajax 绝对是我们用来进行网络交互的重要利器。并且在前后端分离的实践中扮演着极其重要的角色。

先引用 Ajax 的英文原义:

Asynchronous JavaScript and XML

直观可见,Ajax就是这个英文的首字母缩写而成。意思就是异步的 JavaScript 和 XML,换言之,我们也可以用 JavaScript 执行异步网络请求。

2. web 交互的前期

在 Ajax 出现之前,我们也有网页,我们的前后端信息也需要交互,那么我们是怎么做的呢?

当时的做法是:刷新(重载)或跳转页面。举两个例子:

  • 当我们填写完 form 表单的时候,submit 提交表单,这个时候浏览器会进行页面刷新或跳转,反馈给用户表单提交是否成功。
  • 当我们在页面上点击跳转慕课网链接(一般是 a 标签,或者导航栏输入),那么页面会刷新或者跳转到慕课网上去。

也许这个时候你会觉得奇怪,交互一次就需要刷新一次?这未免也太过笨拙!是的,如你所见,在 Ajax 之前,HTTP 请求对应着页面,一次 HTTP 请求也就意味着需要请求一个页面。

当然,人往高处走,总会有更加先进的办法来解决当前的问题。因此,逐渐的,我们有了 Ajax。

3. Ajax 的由来

Ajax 最早要追溯到 2005 年,由 Jesse James Garrett 首先提出。当时 Jesse James Garrett 在他的 “Ajax : new Approach to Web Applications” 一文中提出了综合了 Html , JavaScript , XHTML , Cascading Style Sheets , The Document Object Model , XMLHttpRequest , XML 和 XSTL 等现有技术的新方法,取名为 Ajax 。并且使用这种技术以后,前后端就可以不需要重载页面就能够直接进行交互,能够迅速的把信息反映在用户界面上。

虽然 Ajax 中,X 是 XML 的意思,但是前后端交互中,JSON 尤其重要,同时也拥有更多的好处(比如:更轻量)。因此,在 Ajax 中,JSON 和 XML 一样,共同用于信息传输的打包载体中。

4. 什么是 Ajax?

说这么多,那么什么是 Ajax 呢?

简单来讲,Ajax 就是 JavaScript 基于 XMLHttpRequest 对象与服务端进行交互,向服务端发送一个请求,并且获取和处理服务器返回的内容。在这个过程中,我们可以使用 XML ,HTML 和 JSON 等格式的数据进行交互。并且,Ajax 拥有异步特质,我们可以在不刷新页面的情况下,通过交互数据,在页面上做局部的刷新等数据处理。

5. Ajax 的工作原理

Ajax 相当于用户端和服务端的一个中间层,用来处理异步化的数据交互。这里涉及到两个重要的点:XMLHttpRequest 和 异步。

先讲异步,异步指的是用户无需等待,异步操作不会阻碍当前用户的活动。在早期,对于我们的 Web 交互,每次用户发送请求,都会阻塞当前活动,进行页面重载。而在服务器响应请求之前,浏览器只能是一片空白。体验极其差!然而,使用异步就能够解决这个问题,浏览器端发送请求,但是不会阻塞用户当前的活动,也不会丢弃当前页面,数据一样可以进行交互和刷新。体验效果极佳!

另一个 XMLHttpRequest 可以说是 Ajax 的核心技术。使用 XMLHttpRequest ,我们可以通过 JavaScript 向服务端发送请求,并且获取和处理服务端返回的数据,却不会阻塞用户活动,而仅仅只是局部动态更新,更加不会导致 web 页面频繁重载。

Ajax 工作过程大致如下:

  1. JavaScript 通过 XMLHttpRequest 向后端发起异步请求,可以是 get 或者 post 等;
  2. 服务端接收请求,处理并返回数据;
  3. JavaScript 通过 XMLHttpRequest 获取并解析服务端返回的数据内容;
  4. JavaScript 通过动态更新 DOM 或者执行其他操作。

6. Ajax 的优点

Ajax 技术的优势有如下几点:

  • 无刷新更新页面。抛弃了早期重载页面的方式,加快了请求的速度,提升了用户体验。
  • 减少客户端的内存消耗。采用更加轻量的数据提取做法,避免了客户端大量的冗余请求,减少了不必要的内存消耗。
  • 将部分传统技术中原本在服务端的工作转移到客户端来进行。 使用Ajax,一些数据的处理能够在客户端进行,减轻了服务端的压力。
  • 兼容性极好,几乎所有的浏览器都支持。不需要额外插件或者虚拟机即可使用。

当然,Ajax 带来的最大的优势还是通过异步请求和处理数据的方式,取代了通过原始 Form 表单提交来更新数据及页面的方式,从而使得我们的 Web 应用成为了可能。

7. Ajax 的缺点

Ajax 的缺点主要有如下几点:

  • 破坏浏览器的后退与加入收藏书签功能。这也是为大家所诟病的一点,因为通过 Ajax 进行页面动态更新,用户无法回到上一页的状态。
  • 网络延迟造成用户体验差。在请求到响应的这段时间,可长可短,在网络延迟的情况下,留给用户的就是一个页面无反应,造成的结果可能是用户的体验极差。解决这个问题一般是提供一个 Loading 组件告诉用户正在等待。
  • Ajax 造成的竞态关系。当然这也不是 Ajax 的锅,异步本身就会有这个问题。假设多个 Ajax 同时更新到同一个数据,那么这个数据是按照什么规则更新呢?这就需要我们对竞态进行一定的考量和规范了。

8. 小结

  • Ajax 是一种集合了 Html , JavaScript , XHTML , Cascading Style Sheets , The Document Object Model , XMLHttpRequest , XML 和 XSTL 等现有技术的新方法,JavaScript 是粘合剂。
  • Ajax 能够提供一种异步请求数据,局部刷新页面的办法。
  • XMLHttpRequest 是 Ajax 的核心技术,我们通过它来向服务器发起异步请求,从服务器获得数据。
  • 划线
  • 写笔记
  • 复制

0/1000

 

下一节

XMLHttpRequest 介绍

我要提出意见反馈
· 最近更新于 请填写更新时间
使用手机查看
最近更新
向你推荐
更多
索引目录
Ajax 介绍篇
1. 开局一张图
2. web 交互的前期
3. Ajax 的由来
4. 什么是 Ajax?
5. Ajax 的工作原理
6. Ajax 的优点
7. Ajax 的缺点
8. 小结
意见反馈 收藏教程 标记书签
使用 Ctrl+D 可将网站添加到书签
  • 企业服务
  • 网站地图
  • 网站首页
  • 关于我们
  • 联系我们
  • 讲师招募
  • 帮助中心
  • 意见反馈
  • 代码托管

Copyright© 2023 imooc.com All Rights Reserved | 京ICP备 12003892号-11 京公网安备11010802030151号

意见反馈 常见问题 APP下载
官方微信
返回顶部