穹灵科技

Ajax，在它*基本的层面，是一种与服务器通讯而不重载当前页面的方法，数据可从服务器获得或发送给服务器。有多种不同的方法构造这种通讯通道，每种方法都有自己的优势和限制。
有五种常用技术用于向服务器请求数据：
（1）XMLHttpRequest (XHR)
（2）动态脚本标签插入
（3）框架
（4）Comet
（5）多部分的XHR
在现代高性能JavaScript中使用的三种技术是XHR，动态脚本标签插入和多部分的XHR。使用Comet和iframe（作为数据传输技术）往往是*限情况，不在这里讨论。

 一、XMLHttpRequest
目前*常用的方法中，XMLHttpRequest（XHR）用来异步收发数据。所有现代浏览器都能够很好地支持它，而且能够精细地控制发送请求和数据接收。你可以向请求报文中添加任意的头信息和参数（包括GET和POST），并读取从服务器返回的头信息，以及响应文本自身。以下是使用示例：
var url = ‘/data.php’;
var params = [
‘id=934875’,
‘limit=20’
];
var req = new XMLHttpRequest();
req.onreadystatechange = function() {
if (req.readyState=== 4) {
var responseHeaders = req.getAllResponseHeaders();
var data = req.responseText;
}
}
req.open(‘GET’, url + ‘?’ + params.join(‘&’), true);
req.setRequestHeader(‘X-Requested-With’, ‘XMLHttpRequest’);
req.send(null);
此例显示了如何从URL请求数据，使用参数，以及如何读取响应报文和头信息。readyState等于4表示整个响应报文已经收并完可用于操作。
readyState等于3则表示此时正在与服务器交互，响应报文还在传输之中。这就是所谓的“流”，它是提高数据请求性能的强大工具：
req.onreadystatechange = function() {
if (req.readyState=== 3) {
var dataSoFar = req.responseText;
…
}
else if (req.readyState=== 4) {
var data = req.responseText;
…
}
}
由于XHR提供了高级别的控制，浏览器在上面增加了一些限制。你不能使用XHR从当前运行的代码域之外请求数据，而且老版本的IE 也不提供readyState3，它不支持流。从请求返回的数据像一个字符串或者一个XML对象那样对待，这意味着处理大量数据将相当缓慢。
尽管有这些缺点，XHR仍旧是*常用的请求数据技术，也是*强大的，它应当成为你的首选。
当使用XHR请求数据时，你可以选择POST 或GET。如果请求不改变服务器状态只是取回数据（又称作幂等动作）则使用GET。GET请求被缓冲起来，如果你多次提取相同的数据可提高性能。
只有当URL和参数的长度超过了2’048个字符时才使用POST提取数据。因为Internet Explorer限制URL的长度，过长将导致请求（参数）被截断。
 二、动态脚本标签插入
该技术克服了XHR的*大限制：它可以从不同域的服务器上获取数据。这是一种黑客技术，而不是实例化一个专用对象，你用JavaScript创建了一个新脚本标签，并将它的源属性设置为一个指向不同域的URL。
var scriptElement = document.createElement(‘script’);
scriptElement.src = ‘http://any-domain.com/javascript/lib.js’;
document.getElementsByTagName_r(‘head’)[0].appendChild(scriptElement);
但是动态脚本标签插入与XHR相比只提供更少的控制。你不能通过请求发送信息头。参数只能通过GET方法传递，不能用POST。你不能设置请求的超时或重试，实际上，你不需要知道它是否失败了。你必须等待所有数据返回之后才可以访问它们。你不能访问响应信息头或者像访问字符串那样访问整个响应报文。
*后一点非常重要。因为响应报文被用作脚本标签的源码，它必须是可执行的JavaScript。你不能使用裸XML，或者裸JSON，任何数据，无论什么格式，必须在一个回调函数之中被组装起来。
var scriptElement = document.createElement(‘script’);
scriptElement.src = ‘http://any-domain.com/javascript/lib.js’;
document.getElementsByTagName_r(‘head’)[0].appendChild(scriptElement);
function jsonCallback(jsonString) {
var data = (‘(‘ + jsonString + ‘)’);
}
在这个例子中，lib.js 文件将调用jsonCallback 函数组装数据：
jsonCallback({ “status”: 1, “colors”: [ “#fff”, “#000”, “#ff0000” ] });
尽管有这些限制，此技术仍然非常迅速。其响应结果是运行JavaScript，而不是作为字符串必须被进一步处理。正因为如此，它可能是客户端上获取并解析数据*快的方法。我们比较了动态脚本标签插入和XHR的性能，在本章后面JSON 一节中。
请小心使用这种技术从你不能直接控制的服务器上请求数据。JavaScript没有权限或访问控制的概念，所以你的页面上任何使用动态脚本标签插入的代码都可以完全控制整个页面。包括修改任何内容、将用户重定向到另一个站点，或跟踪他们在页面上的操作并将数据发送给第三方。使用外部来源的代码时务必非常小心。
 三、多部分XHR
多部分XHR（MXHR）允许你只用一个HTTP 请求就可以从服务器端获取多个资源。它通过将资源（可以是CSS 文件，HTML 片段，JavaScript代码，或base64 编码的图片）打包成一个由特定分隔符界定的大字符串，从服务器端发送到客户端。JavaScript代码处理此长字符串，根据它的媒体类型和其他“信息头”解析出每个资源。
让我们从头到尾跟随这个过程。首先，发送一个请求向服务器索取几个图像资源：
var req = new XMLHttpRequest();
req.open(‘GET’, ‘rollup_images.php’, true);
req.onreadystatechange = function() {
if (req.readyState== 4) {
splitImages(req.responseText);
}
};
req.send(null);
这是一个非常简单的请求。你向rollup_images.php 要求数据，一旦你收到返回结果，就将它交给函数splitImages处理。
下一步，服务器读取图片并将它们转换为字符串：
$images = array(‘kitten.jpg’, ‘sunset.jpg’, ‘baby.jpg’);
foreach ($images as $image) {
$image_fh = fopen($image, ‘r’);
$image_data = fread($image_fh, filesize($image));
fclose($image_fh);
$payloads[] = base64_encode($image_data);
}
$newline = chr(1);
echo implode($newline, $payloads);
这段PHP代码读取三个图片，并将它们转换成base64字符串。它们之间用一个简单的字符，UNICODE的1，连接起来，然后返回给客户端。
然后回到客户端，此数据由splitImage 函数处理：
function splitImages(imageString) {
var imageData = imageString.split(“\u0001”);
var imageElement;
for (var i = 0, len = imageData.length; i < len; i++) {
imageElement = document.createElement(‘img’);
imageElement.src = ‘data:image/jpeg;base64,’ + imageData[i];
document.getElementById(‘container’).appendChild(imageElement);
}
}
此函数将拼接而成的字符串分解为三段。每段用于创建一个图像元素，然后将图像元素插入页面中。图像不是从base64 转换成二进制，而是使用data:URL 并指定image/jpeg 媒体类型。
*终结果是：在一次HTTP 请求中向浏览器传入了三张图片。也可以传入20 张或100 张，响应报文会更大，但也只是一次HTTP 请求。它也可以扩展至其他类型的资源。JavaScript文件，CSS 文件，HTML片段，许多类型的图片都可以合并成一次响应。任何数据类型都可作为一个JavaScript处理的字符串被发送。下面的函数用于将JavaScript代码、CSS 样式表和图片转换为浏览器可用的资源：
function handleImageData(data, mimeType) {
var img = document.createElement(‘img’);
img.src = ‘data:’ + mimeType + ‘;base64,’ + data;
return img;
}
function handleCss(data) {
var style = document.createElement(‘style’);
style.type = ‘text/css’;
var node = document.createTextNode(data);
style.appendChild(node);
document.getElementsByTagName_r(‘head’)[0].appendChild(style);
}
function handleJavaScript(data) {
(data);
}
由于MXHR响应报文越来越大，有必要在每个资源收到时立刻处理，而不是等待整个响应报文接收完成。这可以通过监听readyState3 实现：
var req = new XMLHttpRequest();
var getLatestPacketInterval, lastLength = 0;
req.open(‘GET’, ‘rollup_images.php’, true);
req.onreadystatechange = readyStateHandler;
req.send(null);
function readyStateHandler{
if (req.readyState=== 3 && getLatestPacketInterval === null) {
getLatestPacketInterval = window.setInterval(function() {
getLatestPacket();
}, 15);
}
if (req.readyState=== 4) {
clearInterval(getLatestPacketInterval);
getLatestPacket();
}
}
function getLatestPacket() {
var length = req.responseText.length;
var packet = req.responseText.substring(lastLength, length);
processPacket(packet);
lastLength = length;
}
当readyState3*次发出时，启动了一个定时器。每隔15毫秒检查一次响应报文中的新数据。数据片段被收集起来直到发现一个分隔符，然后一切都作为一个完整的资源处理。以健壮的方式使用MXHR的代码很复杂但值得进一步研究。
使用此技术有一些缺点，其中*大的缺点是以此方法获得的资源不能被浏览器缓存。如果你使用MXHR获取一个特定的CSS 文件然后在下一个页面中正常加载它，它不在缓存中。因为整批资源是作为一个长字符串传输的，然后由JavaScript代码分割。由于没有办法用程序将文件放入浏览器缓存中，所以用这种方法获取的资源也无法存放在那里。
另一个缺点是：老版本的Internet Explorer不支持readyState3或data: URL。Internet Explorer 8两个都支持，但在Internet Explorer 6和7中必须设法变通。
尽管有这些缺点，但某些情况下MXHR仍然显著提高了整体页面的性能：网页包含许多其他地方不会用到的资源（所以不需要缓存），尤其是图片。
网站为每个页面使用了独一无二的打包的JavaScript或CSS文件以减少HTTP请求，因为它们对每个页面来说是独一的，所以不需要从缓存中读取，除非重新载入特定页面。
由于HTTP请求是Ajax中**端的瓶颈之一，减少其需求数量对整个页面性能有很大影响。尤其是当你将100个图片请求转化为一个MXHR请求时。Ad hoc 在现代浏览器上测试了大量图片，其结果显示出此技术比逐个请求快了4到10倍。
有时你不关心接收数据，而只要将数据发送给服务器。你可以发送用户的非私有信息以备日后分析，或者捕获所有脚本错误然后将有关细节发送给服务器进行记录和提示。当数据只需发送给服务器时，有两种广泛应用的技术：XHR和灯标。
 (1) XMLHttpRequest
虽然XHR主要用于从服务器获取数据，它也可以用来将数据发回。数据可以用GET或POST 方式发回，以及任意数量的HTTP 信息头。这给你很大灵活性。当你向服务器发回的数据量超过浏览器的*大URL长度时XHR特别有用。这种情况下，你可以用POST 方式发回数据：
var url = ‘/data.php’;
var params = [
‘id=934875’,
‘limit=20’
];
var req = new XMLHttpRequest();
req.onerror = function() {
// Error.
};
req.onreadystatechange = function() {
if (req.readyState== 4) {
// Success.
}
};
req.open(‘POST’, url, true);
req.setRequestHeader(‘Content-Type’, ‘application/x-www-form-urlencoded’);
req.setRequestHeader(‘Content-Length’, params.length);
req.send(params.join(‘&’));
正如你在这个例子中看到的，如果失败了我们什么也不做。当我们用XHR捕获登陆用户统计信息时这么做通常没什么问题，但是，如果发送到服务器的是至关重要的数据，你可以添加代码在失败时重试：
function xhrPost(url, params, callback) {
var req = new XMLHttpRequest();
req.onerror = function() {
setTimeout(function() {
xhrPost(url, params, callback);
}, 1000);
};
req.onreadystatechange = function() {
if (req.readyState== 4) {
if (callback && typeof callback === ‘function’) {
callback();
}
}
};
req.open(‘POST’, url, true);
req.setRequestHeader(‘Content-Type’, ‘application/x-www-form-urlencoded’);
req.setRequestHeader(‘Content-Length’, params.length);
req.send(params.join(‘&’));
}
当使用XHR将数据发回服务器时，它比使用GET要快。这是因为对少量数据而言，向服务器发送一个GET请求要占用一个单独的数据包。另一方面，一个POST至少发送两个数据包，一个用于信息头。另一个用于POST体。POST更适合于向服务器发送大量数据，即因为它不关心额外数据包的数量，又因为Internet Explorer 的URL长度限制，它不可能使用过长的GET请求。
 (2) 灯标
此技术与动态脚本标签插入非常类似。JavaScript用于创建一个新的Image 对象，将src 设置为服务器上一个脚本文件的URL。此URL 包含我们打算通过GET格式传回的键值对数据。注意并没有创建img 元素或者将它们插入到DOM 中。
var url = ‘/status_tracker.php’;
var params = [
‘step=2’,
‘time=1248027314’
];
(new Image()).src = url + ‘?’ + params.join(‘&’);
服务器取得此数据并保存下来，而不必向客户端返回什么，因此没有实际的图像显示。这是将信息发回服务器的*有效方法。其开销很小，而且任何服务器端错误都不会影响客户端。
简单的图像灯标意味着你所能做的受到限制。你不能发送POST 数据，所以你被URL 长度限制在一个相当小的字符数量上。你可以用非常有限的方法接收返回数据。可以监听Image 对象的load 事件，它可以告诉你服务器端是否成功接收了数据。你还可以检查服务器返回图片的宽度和高度（如果返回了一张图片）并用这些数字通知你服务器的状态。例如，宽度为1 表示“成功”，2 表示“重试”。
如果你不需要为此响应返回数据，那么你应当发送一个204 No Content 响应代码，无消息正文。它将阻止客户端继续等待永远不会到来的消息体：
var url = ‘/status_tracker.php’;
var params = [
‘step=2’,
‘time=1248027314’
];
var beacon = new Image();
beacon.src = url + ‘?’ + params.join(‘&’);
beacon.onload = function() {
if (this.width == 1) {
// Success.
}
else if (this.width == 2) {
// Failure; create another beacon and try again.
}
};
beacon.onerror = function() {
// Error; wait a bit, then create another beacon and try again.
};
灯标是向服务器回送数据*快和*有效的方法。服务器根本不需要发回任何响应正文，所以你不必担心客户端下载数据。唯一的缺点是接收到的响应类型是受限的。如果你需要向客户端返回大量数据，那么使用XHR。如果你只关心将数据发送到服务器端（可能需要*少的回复），那么使用图像灯标。

首先当用户在浏览器的地址栏中敲入了网站的网址 ( 比如: alibaba.com ) ,这时浏览器会首先通过访问的域名来定位到IP (DNS) 从而找到去哪里获取资源, 这时, 浏览器会依次进行如下查找:

1. 浏览器缓存 :

浏览器首先会在自己的缓存中查找有没有对应的域名 – IP匹配, 如果好运的话, 这里就可以直接尝试去访问资源了, 如果运气平平则往下走吧.

2. 系统缓存 :

浏览器缓存中没有命中, 浏览器会告诉操作系统:”嘿, 我在我自己口袋里没找到, 可能丢了, 我得去你那看看”, 然后, 一个系统进程(?)调取系统中的DNS缓存进行查询, 重复上一条的运气判断…

3. 路由器缓存 :

走到这, 运气还真不太好啊, 操作系统也没辙了, 那怎么办呢, 向路由去要要看吧… 重复运气判断…

4. ISP DNS缓存 :

好吧, 真不知道说运气好还是运气不好了, 不废话, 去ISP (网络提供商) 的DNS缓存服务器中寻找了, 一般情况下, 在ISP端的缓存中都能找到相应的缓存记录了, 不该这么背了, 或者… 您的ISP有够菜…

5. 递归搜索…

*无奈的情况发生了, 在前面都没有办法命中的DNS缓存的情况下, ISP的DNS服务器开始从root域名服务器开始进行递归, 顺序是从.com顶级域名服务器到alibaba的域名服务器, 再没找到…好吧, 您认为您要去的网站真的公开存在么…?

两个KEY POINT:

首先我们想想，我们要和接线员通话是不是要约定一个大家都能听得懂的语言，否则我说中文他说英语，这样就谁也听不懂谁的话，也不会完成通话，那么这个约定的语言是什么呢？那就是HTTP协议。

超文本传输协议(HTTP，HyperText Transfer Protocol) 是互联网上应用*为广泛的一种网络协议。所有的WWW文件都必须遵守这个标准。设计HTTP*初的目的是为了提供一种发布和接收HTML页面的方法。

我们可以把它理解成一种浏览器和服务器都遵循的一种语法规范，所有的信息都是通过这种语法规范传输的，这样浏览器和服务器都可以正确的理解。

浏览器和服务器一般并不是直接连接上的，而是需要通过中间的网络设备，就像我们的声音并不是直接传到接线员的耳朵里，而是要通过电话线通过电波传送一样，浏览器和服务器所发送的遵循HTTP协议的信息也要通过网络设备的传递才能被对方所接收。而这就需要一种在网络设备（网线）上传输数据的一种通用的语法规范（协议）。这样的协议使用*多的有2种：TCP协议和UDP协议

下面让我们来看看我们浏览网页的时候发生了什么吧。

１．首先我们在地址栏上输入我们想要打开的网址，然后我们通常会按下回车。这样一个请求就由浏览器以一种满足http协议的请求报文的形式发往服务器，请求报文中包含了要请求的页面地址，请求的文件类型等一系列信息。

２．在请求报文传递至客户端得网络设备的时候，网络设备把请求报文包装在一个满足TCＰ协议的数据中，通过网线传向服务器的网络设备。

３．服务器的网络设备接收到数据后，使用特殊的算法将数据解译，重新恢复成浏览器发出满足http协议的请求报文的形式，然后传向服务器软件。

４．服务软件得到请求报文后，根据请求报文所请求的页面地址在服务器的数据库中找到相应的页面，然后生成满足http协议的响应报文发向浏览器。响应报文中包括了响应报文头和被请求页面的代码（响应报文体）。

５．同样的，响应报文通过服务器的网络设备，被包装在一个满足TCＰ协议的数据，通过网线传向客户端的网络设备。

６．客户端的网络设备将响应报文解析，然后传给浏览器软件，浏览器在将响应报文解析，这样我们就在浏览器上看到了想要看到的网页。

B/S（Browser/Server）结构

就是浏览器/服务器结构，它是随着Internet技术的兴起，对C/S结构的一种变化或者改进的结构。在这种结构下，用户工作界面是通过WWW浏览器来实现，*少部分事务逻辑在前端（Browser）实现，但是主要事务逻辑在服务器端（Server）实现，形成所谓三层3-tier结构。本文将主要讲解浏览器和服务器通信的过程。

浏览器和服务器之间的通讯并不是看上去那么简单，里面还是有着许多的门道的。想要简单理解浏览器和服务器之间的通讯，我们可以打一个简单的比方：

设想我们自己就是浏览器，服务器就是10086语音服务台，我们现在想要和10086服务台取得联系（比如说想骚扰接线员MM），我们该怎么办呢？

当然，大多数人都应该想到，那就是要有部电话。是这样的，这就引出了我们的*个概念：套接字(Socket)。

套接字在百度百科上的解释是：

多个TCP连接或多个应用程序进程可能需要通过同一个 TCP协议端口传输数据。为了区别不同的应用程序进程和连接，许多计算机操作系统为应用程序与TCP／IP协议交互提供了称为套接字(Socket)的接口。

这个解释太学术了，我们可以简单把套接字理解成一个电话，我们可以从中发送信息和获取信息。

好了，电话有了，我们该给10086服务台打电话了。等等，我们是不是忘了一点，给10086打电话是不是要保证10086服务台也要有一部电话来等待我们的来电呢？对的，那么就是说服务器端也要有一个套接字，专门接受浏览器的请求。一般当一个服务器启动服务后就会开启一个监听连接的套接字，专门等待浏览器连接，接受浏览器请求。

接下来我们要开始打电话了。大多数人都应该有给10086服务台打电话的经验吧，接通后并不是马上由接线员MM来接听你的电话的，而是根据语音提示选择你想要的服务。当你选择了语音服务以后，系统才会自动给你安排一个接线员MM来接听你的电话。那么这个过程是不是又生成了一个套接字呢？是的，没错，我们可以把呼叫系统（也就是给你语音提示，让你选择服务的系统）当成专门接受浏览器的请求的那个套接字，当浏览器发送了一个请求后系统自动生成一个专门和你的浏览器通信的套接字，这样我们就可以和接线员MM通话了，浏览器也就可以和服务器通信了。

当然这远远不是B/S结构的全部，我们还需要进一步深化：

首先我们想想，我们要和接线员通话是不是要约定一个大家都能听得懂的语言，否则我说中文他说英语，这样就谁也听不懂谁的话，也不会完成通话，那么这个约定的语言是什么呢？那就是HTTP协议。

还是先来看百度百科上的解释：

超文本传输协议(HTTP，HyperText Transfer Protocol)是互联网上应用*为广泛的一种网络协议。所有的WWW文件都必须遵守这个标准。设计HTTP*初的目的是为了提供一种发布和接收HTML页面的方法。

我们就可以把它理解成一种浏览器和服务器都遵循的一种语法规范，所有的信息都是通过这种语法规范传输的，这样浏览器和服务器都可以正确的理解。

浏览器和服务器一般并不是直接连接上的，而是需要通过中间的网络设备，就像我们的声音并不是直接传到接线员的耳朵里，而是要通过电话线通过电波传送一样，浏览器和服务器所发送的遵循HTTP协议的信息也要通过网络设备的传递才能被对方所接收。而这就需要一种在网络设备（网线）上传输数据的一种通用的语法规范（协议）。这样的协议使用*多的有2种：TCP协议和UDP协议

TCP—传输控制协议,提供的是面向连接、可靠的字节流服务。当客户和服务器彼此交换数据前，必须先在双方之间建立一个TCP连接，之后才能传输数据。TCP提供超时重发，丢弃重复数据，检验数据，流量控制等功能，保证数据能从一端传到另一端。

UDP—用户数据报协议，是一个简单的面向数据报的运输层协议。UDP不提供可靠性，它只是把应用程序传给IP层的数据报发送出去，但是并不能保证它们能到达目的地。由于UDP在传输数据报前不用在客户和服务器之间建立一个连接，且没有超时重发等机制，故而传输速度很快。

不管使用哪种方法，总之这样网络设备间也有了一套传输的协议，这样一来，浏览器和服务器才能真正的实现通信。

下面让我们来看看我们浏览网页的时候发生了什么吧。

１．首先我们在地址栏上输入我们想要打开的网址，然后我们通常会按下回车。这样一个请求就由浏览器以一种满足http协议的请求报文的形式发往服务器，请求报文中包含了要请求的页面地址，请求的文件类型等一系列信息。

２．在请求报文传递至客户端得网络设备的时候，网络设备把请求报文包装在一个满足TCＰ协议的数据中，通过网线传向服务器的网络设备。

３．服务器的网络设备接收到数据后，使用特殊的算法将数据解译，重新恢复成浏览器发出满足http协议的请求报文的形式，然后传向服务器软件。

４．服务软件得到请求报文后，根据请求报文所请求的页面地址在服务器的数据库中找到相应的页面，然后生成满足http协议的响应报文发向浏览器。响应报文中包括了响应报文头和被请求页面的代码（响应报文体）。

５．同样的，响应报文通过服务器的网络设备，被包装在一个满足TCＰ协议的数据，通过网线传向客户端的网络设备。

６．客户端的网络设备将响应报文解析，然后传给浏览器软件，浏览器在将响应报文解析，这样我们就在浏览器上看到了想要看到的网页。

以上只是浏览器与服务器之间通信的*简单的形式，实际使用中，一个网页往往包含着html代码，js代码，css样式表，图片等等多种数据，而这些数据并不是一次性由服务器传给浏览器的，而是存在着一定的顺序。首先服务器收到浏览器的请求后会将html代码发给浏览器，浏览器收到响应后会解析响应报文，发现html代码中包含着js代码和css样式表，而浏览器端并没有这些数据，所以浏览器会再次发送请求，向服务器请求js代码或css样式表数据（注意一次只能请求一种类型的数据），服务器收到请求后，会根据浏览器的请求再次找到数据库中的js文件或css样式表，将其发送到浏览器端。当网页中包含图片的时候也是同理。就这样循环往复，经过多次浏览器的请求和服务器的响应，当浏览器发现自己已经有了所有需要的数据后，会停止发送请求，这样一个完整的网页就呈现在我们眼前了。

以上只是浏览器与服务器之间通信的大致过程，要想详细了解其中门道还请各位参考更详细的文章。