AJAX原理与步骤

Posted 码匠与HTML5学堂

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了AJAX原理与步骤相关的知识,希望对你有一定的参考价值。

:而今,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(); 构造函数实例化

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. }

欢迎沟通交流~


投稿或建议联系小编 QQ:3042966101

长按二维码

以上是关于AJAX原理与步骤的主要内容,如果未能解决你的问题,请参考以下文章

Ajax技术与原理

Ajax原理与图解

JSON与AJAX原理与实战

浅析ajax原理与用法

AJAX 原理与 CORS 跨域

AJAX工作原理与Axios的封装