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

相关文章

来自专栏BeJavaGod

图片上传的第二种形式

之前有说了一种以base64的图片上传形式,这次来说说另外一种,其实很简单,很早以前都是在form提交的时候再controller中处理,现在基本不会这么做,都...

3666
来自专栏刘望舒

Android网络编程(三)Volley用法全解析

相关文章 Android网络编程(一)HTTP协议原理 Android网络编程(二)HttpClient与HttpURLConnection 前言 Voll...

1847
来自专栏Java帮帮-微信公众号-技术文章全总结

Java/Python/PHP/C++图文详解它们之间的尿性

PHP:没有优点 Java:就是库多 Python:语法清晰 语法清晰 C:能操纵底层,最细粒度优化没有之一 C++:啥都有,啥都有,啥都有 等等等之类不在例举...

2887
来自专栏九彩拼盘的叨叨叨

学习纲要:与服务器端交互

441
来自专栏iOS122-移动混合开发研究院

【Graphql实践】使用 Apollo(iOS) 访问 Github 的 Graphql API

最近在协助调研 Apollo 生成的代码是否有可能跨 Query 共享模型的问题,虽然初步结论是不能,并不是预期的结果,但是在调研过程中积累的一些经验,有必要记...

810
来自专栏雨过天晴

原 荐 收集微信跳一跳的辅助

1652
来自专栏BeJavaGod

分布式系统的那些事儿(二) - 线程与进程

线程和进程在之前的文章有讲过,这里简单再说一下吧。 进程,一个程序可以称为一个进程 线程,一个程序中包含多个线程,线程的集合体可以称之为进程。 同一进程中的不...

2733
来自专栏开源项目

2017 JavaScript 开发者的学习图谱 | 码云周刊第 25 期

码云项目推荐 1前端框架类 1. 基于 Vue.js 的 UI 组件库 iView ? 项目简介:iView 是一套基于 Vue.js 的 UI 组件库,主要服...

3207
来自专栏WindCoder

当nz-checkbox-group多选框组遇上必选校验

今天表单中用到ng-zorro-antd组件的多选框nz-checkbox-group,最开始用的是响应式表单的验证+响应式表单的验证,结果总是无法达到预期效果...

1522
来自专栏FreeBuf

为什么说你的API并不安全?

0×00 背景介绍 前段时间我向Spree Commerce公司报告了其所有API路径存在 JSONP+CSRF漏洞的问题。同样,Instagram的API存在...

19310

扫码关注云+社区