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 条评论
登录 后参与评论

相关文章

来自专栏腾讯AlloyTeam的专栏

HTTP/2 Server Push 详解(上)

网络优化一直是译者长期研究的方向,HTTP/2 的理论学习也已做了不少,随着这项标准的推进,越来越多特性被大家开始使用。作为 HTTP/2 最激动人心的特性,S...

6480
来自专栏Keegan小钢

App架构设计经验谈:数据层的设计

一个App,从根本上来说,就是对数据的处理,包括数据从哪里来、数据如何组织、数据怎么展示,从职责上划分就是:数据管理、数据加工、数据展示。相对应的也就有了三层架...

702
来自专栏Java架构师历程

3、进程间通信

本书主要介绍如何使用微服务架构构建应用程序,这是本书的第三章。第一章介绍了微服务架构模式,将其与单体架构模式进行对比,并讨论了使用微服务的优点与缺点。第二章描述...

482
来自专栏CSDN技术头条

Visual Studio实用小技巧

有一个有关微软Office的笑话,说的是它的特性太多: 当你觉得自己发现了一个Office的新特性时,它已经存在很多年了。 本文将介绍一些在Visual Stu...

17910
来自专栏前端迷

ajax和fetch、axios的优缺点以及比较

前端是个发展迅速的领域,前端请求自然也发展迅速,从原生的XHR到jquery ajax,再到现在的axios和fetch。

1392
来自专栏张善友的专栏

使用Sysinternals工具定时休眠Windows Server 2008 R2

晚上在下载MIX 10 Session,在我睡觉之前都肯定下不完了,就想设定个时间自动休眠,省点电。首先想到的当然是 shutdown 指令, 但是它有一个致命...

18710
来自专栏java一日一条

常用的 Python 爬虫技巧总结

用python也差不多一年多了,python应用最多的场景还是web快速开发、爬虫、自动化运维:写过简单网站、写过自动发帖脚本、写过收发邮件脚本、写过简单验证码...

865
来自专栏SAP最佳业务实践

SAP最佳业务实践:ETO–项目装配(240)-8给作业分配技术文档

image.png CJ20N给作业分配技术文档 为帮助雇员操作,可以将保存在文档管理系统中的文档分配给WBS元素和作业。在这个操作中,会将一份技术图纸分配给一...

36710
来自专栏企鹅号快讯

Bootstrap UI 编辑器

以下是 15 款最好的 Bootstrap 编辑器或者是在线编辑工具。 1. Bootstrap Magic 这是一个 Bootstrap 主题生成器,使用最新...

3535
来自专栏向治洪

React Native网络请求

很多移动应用都需要从远程地址中获取数据或资源。你可能需要给某个REST API发起POST请求以提交用户数据,又或者可能仅仅需要从某个服务器上获取一些静态内容—...

22811

扫码关注云+社区