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);                
}

原文发布于微信公众号 - HTML5学堂(h5course-com)

原文发表时间:2016-01-09

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏web前端教室

先行者计划--1107微课 《什么是Vuex?》| 文字简版

vuex是什么东西? 官网对Vuex的定义,"Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。" 恩,从这句话可以看出,它应该是一种编写js的...

1989
来自专栏大数据钻研

献给前端求职路上的你们(下)

真正面试中,面试官往往采用的是由难到易的套路,那js和jQuery就是重中之重了,以及针对项目和所用技术方面的一些问题也就是你的必备储粮啦! JavaScrip...

2856
来自专栏web前端教室

闲聊javascript设计模式 - 单例模式

闲聊javascript设计模式 - 单例模式 最近在写电商网站的过程中,遇到了许多问题,也有很多遗憾的地方, 这几天一直在回忆开发的过程,现在想来有许多地方应...

1787
来自专栏田云专栏

数据流方案的思考

近两年前端开发从jquery演化到了谈必及react vue ,大部分人已经习惯了

1713
来自专栏DannyHoo的专栏

iOS开发中终止线程中正在执行的任务

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u010105969/article/details/...

581
来自专栏WeTest质量开放平台团队的专栏

QQ空间掉帧率优化实战

作者:邓荣欣, 腾讯移动客户端开发工程师

2900
来自专栏java工会

JavaScript 与 Java 有什么不同?

1916
来自专栏于晓飞的专栏

Android 中的时间

最近项目中遇到一个上报时间错误的问题。查了一段时间,中间一度怀疑是否是用户修改时间造成的计算错误。然后就了解了一下Android系统中所使用的时间。其实谷歌已经...

634
来自专栏何俊林

SuperIndicator开源库源码分析

背景:为什么有这个库,在经常开发中,会碰到,显示广告位图片,精彩推荐,及比较好的,希望能直观显示到用户看的。那么SuperIndicator正是这样一个类库。 ...

1725
来自专栏aCloudDeveloper

string 之 strlen函数

Author: bakari  Date: 2012/8/9 近两年好多的IT公司喜欢拿一些库函数来考,string函数库当然是首选,除此之外,像qsort,S...

1717

扫描关注云+社区