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请求数据 实例

1. var xhr = new XMLHttpRequest();
2. var url = 'h5course.json';
3. xhr.open('get', url, true);
4. xhr.send(null);
5. xhr.onload = function(){
6.     var result = JSON.parse(xhr.responseText);                
7. }

欢迎沟通交流~HTML5学堂