Ajax的艺术

前端之家收集整理的这篇文章主要介绍了Ajax的艺术前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

引言

  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是一种解决方案,更是一种编程的艺术。

原文链接:https://www.f2er.com/ajax/161422.html

猜你在找的Ajax相关文章