计算机小硕未毕业, dota爱好者.
希望成为一名有趣的工程师.


Author 刘畅

cliuscu92@gmail.com

2. Ajax原理

传统Web交互

传统web交互是浏览器发送request，服务器收到request后把相应的信息（HTML界面信息等）返回给浏览器，呈现出来。比如：输入www.baidu.com后，发送get请求到百度服务器，百度服务器返回相应的界面给用户。这种交互叫同步交互, 并且期间处于阻塞状态。

通俗讲，既“你一来，干等着我一回”。像是一小伙正在追一个姑娘，在嘈杂的宿舍发完微信，啥都不敢干了，手机不离手，盯着屏幕等着姑娘回信息。如同用户请求完，等着服务器返回信息，等待期间什么也没法干。再碰到网速慢，界面卡个白屏就慢慢等吧。

Ajax的应用

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。


那么什么是：1. 异步，2. XML， 3.现有标准的新方法

1. 异步

异步交互颠覆传统web交互，就不是 “你一来，干等着女神回信息” 了。而是，发完微信后，让闲着没事的舍友帮忙看着手机屏幕，本人继续专心团战，吃零食，倒垃圾等。等女神回信息了，让舍友嗷一嗓，我再回过头来回微信。既主线程是不阻塞的，代码继续执行，等请求有消息了，我再回过头处理，所以叫回调函数（callback function）。

2. XML

先和熟悉的JSON对比：

1)概念

·JSON

JSON（Javascript Object Notation，Javascript对象表示法）是一种轻量级的数据格式，而不是一种编程语言。它利用Javascript中某些模式来表示结构化数据，通过eval()方法，Javascript能够把这种数据格式转化为对应的js类型来使用。

·XML

XML（Extensible Markup Language，可扩展性标记语言）是一种用来交换数据的标记语言，而同样是标记语言的HTML（HyperText Markup Language，超文本标记语言）则是用来显示数据的标记语言。它允许用户自定义标签来标记数据和定义数据类型。

2)联系

JSON和XML均是可跨平台使用的，且它们都是用于交换数据所用。后者相对而言更具有历史性，所以通用性也自然地比较抢，而且它衍生出很多其他的语言，譬如SVG、RSS等等。

但由于JSON格式简单直白，且一般是压缩形式出现，所以请求文件的大小自然缩小。因此，前端工程师们应该都不会不爱它吧。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
  name: "cliu",
  email: {
  personal: ["cliu@xxx.com", "cliu@xxx.cn"],
  school: "cliu@school.com"
  },
  learnt: [
  {
    name: "CSS",
    status: 0.8
  },{
	name: "jQuery",
	status: 0.5
  }
  ]   
}

上面第二个JSON的例子，如果写成差不多意思的XML，格式大致如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?xml version="1.0" encoding="utf-8" ?>
<me>
    <name>linji</name>
    <email>
        <personal>cliu@xxx.com</personal>
        <personal>cliu@xxx.cn</personal>
        <company>cliu@school.com</company>
    </email>
    <learnt>
        <name>CSS</name>
        <status>0.8</status>
    </learnt>
    <learnt>
        <name>jQuery</name>
        <status>0.5</status>
    </learnt>
</me>

PS:　而XML衍生出子集-SVG（Scalable Vector Graphics，可缩放矢量图形）则是一种能够生成矢量图的语言。在如今Retina显示屏的发展趋势，能够在任何时候呈现出足够清晰的图像绝对是必要的。

所以说，XML是一种数据格式，像xxxx.mxl。 很好理解，因为Ajax使用js可以很容易操纵DOM标签和内容，而XML恰恰就是由标签和内容组成。（下面会说到Ajax和js的关系，Ajax）

除了 XML File， Ajax还涉及了 XML Http，下面会说到 XMLHttpRequest :

1
2
var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : 
new ActiveXObject('Microsoft.XMLHTTP');//三元操作 微软浏览器比较特殊- -

3)Ajax是现有标准的新方法

为什么来这么一句呢。。因为Ajax确实不是什么新技术，因为Ajax核心是创建 XMLHttpRequest对象，而这个对象很早就被微软设计了，但流行起来是由Google带动的。google map 和 google suggest。google map 远近拉动地图，但map并不会不停刷新，而是很流畅的感觉，虽然各个餐厅或者道路会慢慢加载，但没有中断用户体验。 google suggest就是搜索引擎的下拉窗口的提示字，动态变化。

所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

1
2
3
4
5
6
7
8
Ajax是基于现有的Internet标准，并且联合使用：
1. XMLHttpRequest 对象 (异步的与服务器交换数据) 
2. 2JavaScript/DOM (信息显示/交互) 
3. CSS (给数据定义样式) 
4. XML (作为转换数据的格式) 图片描述
所以说Ajax是利用现有标准的组合，形成的新标准和新方法。

回过头来对应说下 “追女神和舍友帮忙” 的问题。

我叫来舍友，相当于 1. 创建XMLHttpRequest对象.这个对象和服务器先交互着，我先忙我的。等手机有消息了，根据消息 我来做出反应，既 2. 用返回的消息来用JS操作本地的DOM 以及 3. 变化相应CSS 或 4. 把 MXL格式的文件信息展示到页面上。 这一系列反应相当于根据服务器传过来的数据进行操作的，传递的是数据。传统交互是，服务器把整个HTML页面信息重传给你，传递的是内容。

参考

  1. wc3标准 https://www.w3.org/TR/XMLHttpRequest/
  2. w3chool https://www.w3schools.com/xml/ajax_xmlfile.asp
  3. 大陈小事博客http://littlewhitechen.github.io/2015/10/07/0005/
  4. 书： Ajax实战


前端新人，如有错误，多多指正。

前端