关于 Ajax

发表于 | 分类于 | 阅读次数

本文罗列了一些与 Ajax 相关的知识点。
参考文章：【Ajax中XML和JSON格式的优劣比较】

Ajax 是什么？

首先来说一说什么是Ajax？
Ajax 全称为 “Asynchronous JavaScript and XML” （异步 JavaScript 和 XML ），JavaScript 通过异步的形式去操作 XML 文档;

一个 Ajax 程序

1
2
3
4
5
6
7
8
9
var xhr = new XMLHttpRequest();           // 创建XHR对象——打开浏览器
    xhr.open('get','1.txt',true);         // 启动一个请求以备用——在地址栏中输入地址
    xhr.send();                           // 发送请求——提交，敲回车
    // 检测XHR对象的readyState属性——等待服务器返回内容
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4){
            alert(xhr.responseText);
        }
   };

Ajax通信的步骤

  1. 新建一个 XMLHttpRequest（XHR） 对象。
  2. open 方法表示初始化请求，此时并没有发送。
  3. 定义数据返回后的回调函数，里面的代码在 readystatechange 值改变的时候执行。
  4. 发送请求。

Ajax的交互模型

Ajax交互模型
（图片来源于网络）

Ajax传输数据的格式

  1. 文本

  2. XML(可扩展标记语言)
    步骤：读取 XML 文档 —> 使用 XML DOM 来循环遍历文档 —> 读取值并存储在变量中
    优势：

    • 格式统一， 符合标准；
    • 容易与其他系统进行远程交互， 数据共享比较方便；

    缺点：

    • XML 文件格式文件庞大，格式复杂， 传输占用带宽；
    • 服务器端和客户端都需要花费大量代码来解析 XML ， 不论服务器端和客户端代码变的异常复杂和不容易维护；
    • 客户端不同浏览器之间解析 XML 的方式不一致， 需要重复编写很多代码；
    • 服务器端和客户端解析 XML 花费资源和时间；

  3. JSON(JavaScript Object Notation，一种轻量级的数据交换格式)
    步骤：读取 JSON 字符串 —> 用 eval() 处理 JSON 字符串
    优势：

    • 数据格式比较简单， 易于读写，格式都是压缩的， 占用带宽小；
    • 易于解析这种语言， 客户端 JavaScript 可以简单的通过 eval() 进行 JSON 数据的读取；
    • 支持多种语言， 包括 ActionScript, C, C#, ColdFusion, Java, JavaScript, Perl, PHP, Python, Ruby 等语言服务器端语言， 便于服务器端的解析；
    • 在 PHP 世界, 已经有 PHP-JSON 和 JSON-PHP 出现了， 便于 PHP 序列化后的程序直接调用 . PHP 服务器端的对象、数组等能够直接生 JSON 格式, 便于客户端的访问提取；

    • 因为 JSON 格式能够直接为服务器端代码使用， 大大简化了服务器端和客户端的代码开发量， 但是完成的任务不变， 且易于维护；

      缺点：

    • 没有 XML 格式这么推广的深入人心和使用广泛, 没有 XML 那么通用性;
    • JSON 格式目前在 Web Service 中推广还属于初级阶段；

同步和异步的区别

  • 同步： 必须等待，这个请求如果没有执行结束，那么就会形成阻塞；
  • 异步： 发出请求后，仍然可以做其他的事，结果返回时接收响应；

如何解决跨域问题？

  1. 通过修改 document.domain 和隐藏的 IFrame 来实现跨域请求。
    这种方案可能是最简单的一种跨域请求的方案，但是它同样是一种限制最大的方案。首先，它只能实现在同一个顶级域名下的跨域请求；另外，当在一个页面中还包含有其它的 IFrame 时，可能还会产生安全性异常，拒绝访问。

  2. CROS 技术：使用自定义的 HTTP 头部让浏览器与服务器进行沟通，从而决定请求或响应是应该成功还是应该失败。

    IE 对 CROS 的实现：XDR 类型（异步执行）；
    其他浏览器对 CROS 的实现：XHR 对象——要请求位于另一个域中的资源，使用标准的 XHR 对象并在 open() 方法中传入绝对 URL 即可；
    既支持同步执行，也支持异步执行；（最好本地资源使用相对 URL ，远程资源使用绝对 URL)；

  3. 图像 Ping —— 使用 <img> 标签（只能用于浏览器用于服务器之间的单向通信）
    请求的数据通过查询字符串形式发送；
    缺点：

  • 只能发送 GET 请求；
  • 无法访问服务器的响应文本；
  1. JSONP（填充/参数式 JSON ）
    通过动态 <script> 元素使用，使用时可以为 src 属性指定一个跨域 URL；
    优点：能够直接访问响应文本，支持在浏览器与服务器之间的双向通信；
    缺点：
  • 从其他域中加载代码执行，可能存在安全隐患；
  • 要确定 JSONP 请求是否失败并不容易；

【补充】

【Q1】XmlHttpRequest 对象的局限性？
默认情况下，XmlHttpRequest 对象只能访问与包含它的页面位于同一个域中的资源，无法实现跨域访问。

您的支持将鼓励我继续创作！