AJAX原理与步骤
时间:2022-05-04
本文章向大家介绍AJAX原理与步骤,主要内容包括为何有了AJAX、AJAX的基本步骤、AJAX请求数据 实例、基本概念、基础应用、原理机制和需要注意的事项等,并结合实例形式分析了其使用技巧,希望通过本文能帮助到大家理解应用这部分内容。
HTML5学堂:而今,AJAX技术已经成为JavaScript的重要组成部分,提到AJAX,最核心的两个词语是“局部刷新”和“异步加载”。在本文当中,主要介绍AJAX是什么以及其操作的基本步骤。
AJAX是四个单词的简写,其中Asynchronous【发音:[eiˈsiŋkrənəs]】即异步的意思,异步的链接可以同时发起多个,并且不会阻止JS代码执行。与之对应的概念是同步,同步的链接在同一时刻只会有一个,并且会阻止后续JS代码的执行,JS必须等待同步链接加载完毕后才能继续执行。AJAX发展到现在,不但可以发起异步链接,也可以发起同步链接。只是异步相对同步用到的更多。
为何有了AJAX
在AJAX出现之前,注册是非常痛苦的一件事,当时互联网刚刚在中国兴起,网络下载速度普遍在十K出头,而且互联网产品都还不是很成熟,当时注册需要填非常多的没有用的项。许多人刚接触电脑,打字很慢。在经历过漫长的填写以后,点完注册会跳到另一个页面,然后就是漫长的等待加载页面。如果此时有一个地方写错了,这个新的页面就会提示你写错了,你可以选择后退重填,但是所有的项都会被清空。如此反复。
出于这样“糟糕”的用户体验影响,AJAX就横空出世了~~~
AJAX的基本步骤
1 创建请求 var xhr = new XMLHttpRequest(); 构造函数实例化
2 确定发送方式和地址 xhr.open("get", url, true)
3 发送请求 xhr.send(null);
4 确定后台加载 xhr.onload = function(){}
5 请求返回的数据 xhr.responseText;
AJAX请求数据 实例
var xhr = new XMLHttpRequest();
var url = 'h5course.json';
xhr.open('get', url, true);
xhr.send(null);
xhr.onload = function(){
var result = JSON.parse(xhr.responseText);
}
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 2-2.进程通信-多线程
- 微服务[学成在线] day17:基于Zuul网关实现路由转发、过滤器
- Delta Lake 学习笔记(一)
- Delta Lake 学习笔记(二)
- Delta Lake 学习笔记(三)
- 4.IP地址与子网划分
- 08-软考的法律条文
- Intellij IDEA必备插件,提高效率的“七种武器”!
- Mongodb分页查询优化下
- MySQL 案例:大表改列的新技巧(Generated Column)
- Spark 2.2 on K8S Dynamic Resource Allocation
- Java中异常处理的9个最佳实践
- Mongodb执行计划
- Spark 2.2/2.3/2.4 的 Dynamic Resource Allocation
- 04-操作文件与目录