加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

Ajax的艺术

发布时间:2020-12-16 03:31:43 所属栏目:百科 来源:网络整理
导读:引言 ??Asynchronous JavaScript and XML(异步JavaScript与XML),Ajax不是一种新的技术,她是一种解决方案或者说是一个概念。是由Jesse James Garrett率先提出的。 ??使用Ajax的最大优点,就是能在不更新整个页面的前提下维护数据。也促成了 Web 2.0 的诞

引言

??Asynchronous JavaScript and XML(异步JavaScript与XML),Ajax不是一种新的技术,她是一种解决方案或者说是一个概念。是由Jesse James Garrett率先提出的。

??使用Ajax的最大优点,就是能在不更新整个页面的前提下维护数据。也促成了 Web 2.0 的诞生。


发展

??传统的Web应用使用http form表单进行提交,一旦提交,浏览器就会刷新整个页面。也就是Web运作原理:一次HTTP请求对应一个页面。

??如果要让用户留在当前页面中,同时发出新的HTTP请求,就必须用JavaScript发送这个新请求,接收到数据后,再用JavaScript更新页面,这样一来,用户就感觉自己仍然停留在当前页面,但是数据却可以不断地更新。

XMLHttpRequest

??为了能够使用JavaScript向服务器发出 HTTP 请求,我们需要一个提供这个功能的类的实例。这就是XMLHttpRequest的由来。

??XMLHttpRequest开始只是IE 5提供的一个接口,使得Javascript可以进行HTTP(S)通信。后来各大浏览器纷纷效仿也提供了这个接口,再后来W3C对它进行了标准化,提出了XMLHttpRequest标准。XMLHttpRequest标准又分为Level 1和Level 2。

??我们通常会将Ajax等同于XMLHttpRequest,但是其实他们应该是两个不同的概念,ruoyiqing总结为:

我们使用XMLHttpRequest对象来发送一个Ajax请求。

Level1

??老版本下如何发送一个Ajax请求

  • 实例化一个XMLHttpRequest对象
var xhr = new XMLHttpRequest();
  • 向请求页面发送HTTP请求
xhr.open('GET','http://img.blog.csdn.net/20170213150458509?');
xhr.send();
  • 监控对象状态,指定回调函数
xhr.onreadystatechange = function(){
    if ( xhr.readyState == 4 && xhr.status == 200 ) {
      console.log( xhr.responseText );
    } else {
      console.log( xhr.statusText );
    }
  };

Level2

??Level1主要有以下几个缺点:

  • 受同源策略的限制,不能发送跨域请求;

  • 不能发送二进制文件(如图片、视频、音频等),只能发送纯文本数据;

  • 在发送和获取数据的过程中,无法实时获取进度信息,只能判断是否完成;

??Level2新增了:

  • 可以发送跨域请求,在服务端允许的情况下;

  • 支持发送和接收二进制数据;

  • 新增formData对象,支持发送表单数据;

  • 发送和获取数据时,可以获取进度信息;

  • 可以设置请求的超时时间;

小结

??总的来说,现在主流的js库都封装了Ajax,我们写一个Ajax请求变得越来越简单,如jQuery。仅仅是简单的使用这没问题,如果想深入了解Ajax,了解XMLHttpRequest,还是要去看W3C的标准。

??Ajax让Web应用程序变得更加完善,更加美好,使Web App成为了可能。

??Ajax是一种解决方案,更是一种编程的艺术。

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读