详解 Ajax

内容简介：详解 Ajax

AJAX _[wiki] 即“ Asynchronous JavaScript and XML ”（异步的JavaScript与XML技术），指的是一套综合了多项技术、创建更好更快以及交互性更强的网页应用的浏览器端网页开发技术。

Ajax 不是指一种单一的技术，而是有机地利用了一系列相关的技术。虽然其名称包含 XML ，但实际上数据格式可以由 JSON 代替，进一步减少数据量，形成所谓的 AJAJ 。

基本工作原理

Ajax的工作原理相当于在用户和服务器之间加了一个中间层( AJAX引擎 ),使用户的操作与服务器响应异步化。并不是所有的用户请求都提交给服务器,像—些数据验证和数据处理等都交给Ajax引擎自己来做, 只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。

传统的网页（不使用 AJAX）如果需要更新网页内容，必须重新载入整个网页页面，并且期间用户无法与 Web 应用程序进行交互。

使用了ajax 后，就可以在不重新加载整个网页的情况下，对网页的某部分内容进行更新，并且不会中断用户与 Web 应用程序的交互。

XMLHttpRequest 对象

Ajax 的核心是 XMLHttpRequest 对象 。

XMLHttpRequest 是一个 JavaScript 对象 ，它最初由微软设计，随后被 Mozilla、Apple 和 Google 采纳。 如今，该对象已经被 W3C 组织标准化。通过它，你可以很容易的 取回一个URL上的资源数据 （它可以取回所有类型的数据资源，并不局限于 XML）。

创建一个 XMLHttpRequest 实例：

var request = new XMLHttpRequest();

• XMLHttpRequest 方法概述

  • void abort() ：如果请求已经被发送，则立刻中止请求
  • DOMString getAllResponseHeaders() ：返回所有响应头信息(响应头名和值)，若未响应，则返回 null
  • DOMString getResponseHeader(DOMString header) ：返回指定的响应头的值，若未响应，则返回 null
  • void open(method,url,async,user,password) ：初始化一个请求
    • DOMString method ：请求所使用的 HTTP 方法，如 GET POST PUT 等
    • DOMString url ：该请求所要访问的 URL
    • optional boolean async ：是否执行异步操作，默认为 true
    • optional DOMString user ：用户名，默认参数为空string
    • optional DOMString password ：密码，默认参数为空string
  • void setRequestHeader(DOMString header, DOMString value) ：给指定的HTTP请求头赋值
  • void sent(...) ：发送请求（详细用法见 XMLHttpRequest _[MDN] ）

• XMLHttpRequest 属性

  • onreadystatechange ：它是一个 Javascript 函数对象当 readyState 属性改变时会调用它
  • readyState ：请求的状态，共5种状态，有5个可取值
    • 0 ： UNSENT (未打开)，表示 open() 方法还未被调用
    • 1 ： OPENED (未发送)，表示 send() 方法还未被调用
    • 2 ： HEADERS_RECEIVED (已获取响应头)，表示 send() 方法已经被调用，响应头和响应状态已经返回
    • 3 ： LOADING (正在下载响应体)，表示响应体正在下载中， responseText中已经获取了部分数据
    • 4 ： DONE (请求完成)，表示整个请求过程已经完毕
  • responseText ：返回此次响应请求的文本数据，数据类型为 DOMString
  • responseXML ：返回此次响应的 XML 文档对象，数据类型为 Document
  • status ：返回该请求的响应状态码，(例如, 状态码200 表示一个成功的请求)
  • statusText ：返回请求的响应状态信息（类型为 DOMString），包含一个状态码和原因短语 (例如 “200 OK”)

• 什么是 DOMString
• HTTP状态码

XMLHttpRequest 2 级（2012年正式标准化）

• 新添加的属性

  • timeout： 表示请求在等待响应多少毫秒之后就终止。如果在规定时间内接收到响应，那么就会触发 timeout 事件
  • responseType ： 返回响应内容的类型。可以手动更改它的值，从而方便接收相应类型的内容。常见类型有：arraybuffer，blob，document，json，text（默认值）
  • response： 返回响应内容的主体

• FormData 类型

利用 FormData 对象，我们可以 通过 JavaScript 用一些键值对来模拟一系列表单控件，我们还可以使用 XMLHttpRequest 的 send() 方法来异步的提交这个模拟的表单 。比起普通的 ajax，使用 FormData 的最大优点就是我们可以异步上传一个二进制文件。

• 注意：使用 FormData 来模拟表单提交数据时，不需要设置请求头字段的 Content-Type ，若设置上会出错，因为 FormData objects encode data as multipart/form-data。 POST FormData to php using javascript and XMLHTTPRequest

// 不要设置
setRequestHeader("Content-type","application/x-www-form-urlencoded");

var myForm = new FormData([form]);
// form 可选值，一个HTML表单元素,可以包含任何形式的表单控件
// 若有上面的 form 值，myForm 则自动获得页面表单的值

//给当前FormData对象添加一个键/值对
myForm.append('name','percy');

// 最后通过 XMLHttpRequest 的实例来发送它
xhr.send(myForm);

Using FormData To Send Forms With XHR As Key/Value Pairs

• 接收二进制数据

var xhr = new XMLHttpRequest();
xhr.open('GET', '/path/to/image.png');
xhr.responseType = 'blob';  // 设置成相应的类型

// 接收数据
var blob = new Blob([xhr.response], {type: 'image/png'});

更多内容参见 Sending and Receiving Binary Data 。

• 进度事件（Progress Events）

Progress Events 定义了客户端服务器通信相关的事件。

• load 事件

load 事件旨在替换 readystatechange 事件，load 事件的事件对象的 target 属性指向 XMLHttpRequest 对象实例。

即使使用 load 事件替换 readystatechange 事件，也要检测响应状态，即检测 status 属性。

var xhr = new XMLHttpRequest();
xhr.onload = function(){
  if(xhr.status == 200){
    alert(xhr.responseText);
  }
};

• progress 事件的事件对象
  • target： 指向 XMLHttpRequest 对象
  • lengthComputable： 一个布尔值，表明总共需要完成的工作量和已经完成的工作是否可以被底层所计算到
  • loaded： 表示底层进程已经执行的工作量
  • total： 表示底层进程正在执行的工作总量

为了保证正常执行，必须在调用 open() 方法之前添加 onprogress 事件处理程序。

本文内容仅供参考，一切以官方文档为标准： XMLHttpRequest Living Standard

优点与不足

• 优点
  • 最大优点：在不更新整个页面的前提下更新部分网页的数据。
  • 增强用户体验，使 web应用 更接近于 native应用
  • Ajax 是 按需操作数据 ，可以最大程度的减少冗余请求，从而减轻服务器和带宽的负担，并且把一些服务器负担的工作转嫁到客户端。

Ajax下面的优点都是基于它的最大优点衍生出来的，有木有 ^_^

• 不足
  • Ajax 破坏了浏览器的后退按钮功能。在 Ajax 动态更新页面的情况下，用户无法回到前一个页面状态，这是因为浏览器仅能记下历史记录中的静态页面。
    解决方案 ：在用户单击后退按钮访问历史记录时，通过建立或使用一个隐藏的 IFRAME 来重现页面上的变更。【Gmail 上浏览器的后退键就可以正常使用，它就是用的这种方法】
  • 进行 Ajax 开发时，因为 网络延迟 ，服务器响应过慢，若不给予用户明确的回应，这样会使用户感到厌烦。
    解决方案 ： 使用一个可视化的组件 来告诉用户系统正在进行后台操作并且正在读取数据和内容。【细心的guy一定注意到过这种情况】
  • 搜索引擎对 Ajax 很不友好。因为搜索引擎在抓取页面的时候会屏蔽掉所有javascript代码。
    解决方法 ：
    • 如何让搜索引擎抓取AJAX内容？
    • Pushing and Popping with the History API

网络延迟 — 即用户发出请求到服务器发出响应之间的间隔 ，

一个利用 Ajax 的简单例子

这个例子是用 Ajax 技术从服务器的一个文件（ profile.json ）中取回数据，并显示在用户界面。

/*    profile.json    */

{
  "name": "percy",
  "age": 21,
  "phone_number": "12345678",
  "skills": ["HTML", "CSS", "JavaScript", "Ajax"]
}

<!DOCTYPE html>
<htmllang="en">

<head>
  <metacharset="UTF-8">
  <title>Ajax example</title>
  <script>
  function createDiv(){
    var div = document.createElement('div');
    div.id='profile';
    document.body.appendChild(div);
  }

  function showProfile(url){
    createDiv();
    var profileDom = document.getElementById('profile');
    var request;

    // 创建 ajax 核心对象的实例
    request = new XMLHttpRequest();
   
    request.onreadystatechange = function(){ // 请求状态发生变化时，函数被回调
      if (request.readyState == 4) { // 判断请求成功完成
        if (request.status == 200) { // 判断响应结果

          // 处理响应的数据
          var profile = JSON.parse(request.responseText);
          var temp = "";
          for (var value in profile) {
            temp += value + " ：" + profile[value] + "<br/>";
          }
          profileDom.innerHTML = temp;

          // add some styles
          profileDom.style.fontSize = "25px";
          profileDom.style.color = "blue";
          profileDom.style.lineHeight = "1.5";
        } else {
          // 响应失败，根据响应码判断失败原因
          profileDom.innerHTML = "Error: " + request.status;
        }
      } else {
        // HTTP请求还在继续...
      }
    };

    request.open("GET", url, true); // 初始化一个请求
    request.send(); // 发送请求

    alert("请求已发送，请等待响应...");
  }
  </script>
</head>

<body>
  <buttononclick="showProfile('profile.json')">个人简介</button>
</body>

</html>

注意事项

默认情况下，服务器对 POST 请求和提交 Web 表单的请求不会一视同仁。因此，服务器必须有程序来读取发送过来的原始数据，并从中解析出有用的部分。

不过，我们可以使用 XMLHttpRequest 来模仿表单提交时的内容类型： 首先将 Content-Type 头部信息设置为 application/x-www-form-urlencoded，也就是表单提交时的内容类型，其次是以适当的格式创建一个字符串。

request.open("POST", url, true); // 初始化一个请求
request.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
request.send(str); // 发送请求

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

• Flutter 完整开发实战详解（十六、详解自定义布局实战）
• 数据结构 1 线性表详解 链表、 栈 、 队列 结合JAVA 详解
• 详解Openstack环境准备
• Java泛型详解
• iOS RunLoop 详解
• Raft协议详解

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。