XMLHttpRequest对象

 

让JavaScript代码自己发送请求以便随时获取数据，请求是异步的

使用情况：

①获取保存在服务器上的数据

②只有在服务器才能完成计算的数据

③其他人Web服务器上的数据

向Web服务器提问

 

 

服务器端代码略

页面上：

<script>

  var req = new XMLHttpRequest();  //创建XMLHttpRequest对象

function askServer() {

 

  var number1 = document.getElementById("number1").value;

  var number2 = document.getElementById("number2").value;

  var dataToSend = "?number1=" + number1 + "&number2=" + number2;

  req.open("GET", "WebCalculator.php" + dataToSend, true);         //准备发送请求的第一步，使用open()函数。接受的参数为HTTP操作类型（GET或POST）、目标URL、浏览器是否异步工作的布尔值

  req.onreadystatechange = handleServerResponse;              //制定服务器返回信息后触发的事件

  req.send();                       //发送请求

 

          document.getElementById("result").innerHTML = "The request has been sent.";

}

function handleServerResponse() {

//readyState的值：1—初始化完毕 | 2—请求已经发送 | 3—已经收到部分相应 | 4—请求相应完成。因此这个值为4的时候才有意义。

//status属性保存HTTP状态码.    200—一切顺利 ； 401——不允许访问；404——没有找到；302——已经移动；503——服务器忙

  if ((req.readyState == 4) && (req.status == 200))          

 {

    var result = req.responseText;               //从response属性中取得结果

    document.getElementById("result").innerHTML = "The answer is: " + result;

  }

}

  </script>

 

取得新内容

 

播放幻灯的实例，没有什么特别的，就是发送请求，获得回复之后再替换目标DIV

http://www.prosetech.com/html5/Chapter%2011/Slides/ChinaSites.html

function goToNewSlide() {

  if (req != null) {

    req.open("GET", "ChinaSites" + slideNumber + "_slide" + ".html", true);

    req.onreadystatechange = newSlideReceived;

    req.send();

  }

  else {

    // 有错误的处理

  }

}

XMLHttpRequest是一对一的，服务器响应后通信就结束了

使网页与服务器保持长期的联系可以使用轮询（例如Javascript的setInterval和setTimeout函数），不过这种方案会给服务器造成较大的负担；另一种方案就是服务器发送事件，网页与服务器保持连接，服务器任何时候都可以发送消息。（所有主流浏览器均支持服务器发送事件，除了 ie。）

例子：Facebook/Twitter 更新、估价更新、新的博文、赛事结果等。

消息格式

 

服务器发送事件的数据必须遵循一个简单但明确的格式，每条消息以“data:”开头，然后是实际的消息内容，再加上换行符

如果一条消息分为多行，每行开头都需要有“data:”，结束必须要换行符

除了消息本身，服务器还发送唯一的ID（“id:”）和一个连接超时选项（"retry:"）

例子：

id:495\n

retry:15000\n

data:Web服务器对你发送此消息\n

通过服务器脚本发送消息

 

此书中是用php写的。不过看起来就是跟ajax返回数据类型的写法

找了个小例子：http://www.cnblogs.com/super-d2/archive/2012/10/11/2720678.html

 

response.setHeader("Cache-Control", "no-cache");out.print("data: >> server Time" + new java.util.Date() );out.flush();

 

在网页中处理消息

 

 

 

var messageLog;

var timeDisplay;

var source;

 

window.onload = function() {

  messageLog = document.getElementById("messageLog");

  timeDisplay = document.getElementById("timeDisplay");

}

function startListening() {

  source = new EventSource("TimeEvents.php");   //创建EventSource对象，，传入服务器端发送消息的脚本URL

  source.onmessage = receiveMessage;                   //将处理的函数指定给onmessage事件，这个时间会在页面接收到消息时触发

  messageLog.innerHTML += "<br>" + "Started listening for messages."

}

function stopListening() {              //停止接收消息

  source.close();

  messageLog.innerHTML += "<br>" + "No longer listening for messages."

}

function receiveMessage(event) {

  messageLog.innerHTML += "<br>" + "New web server time received: " + event.data;

  timeDisplay.innerHTML = event.data;                    //从事件对象的data属性中取得消息

}

 

轮询服务器端事件

 

有意思的是当服务器有意关闭连接，浏览器还是会自动重新打开连接再次请求脚本，然后重新开始。于是可以利用这一的机制，下面这样的脚本能做到用1分钟时间更新，然后暂停服务2分钟；这种方案有助于减少Web服务器的流量，但要考虑数据更新的频率即保持数据最新的必要程度

 

<?php

  header("Content-Type: text/event-stream");

  header('Cache-Control: no-cache');

  //告诉浏览器连接关闭两分钟后再重新连接

  echo "retry: 120000" . PHP_EOL;

  //保存开始时间.

  \$startTime = time();

  do {

    //发送消息

    \$currentTime = date("h:i:s", time());

    echo "data: " . \$currentTime . PHP_EOL;

    echo PHP_EOL;

    flush();

    //过了1分钟结束脚本.

    if ((time() - \$startTime) > 60) {

      die();

    }

    // 等5秒钟发送新消息.

    sleep(5);

  } while(true);

?>

目的是保持浏览器与服务器的正式对话，因为服务器发送事件的通信完全是单向的。不过Web Socket还没有达到较好的跨浏览器兼容水平

访问Web Socket

 

为了使用Web Socket，需要在Web服务器端运行Web Socket服务器，负责协调各方通信并且启动后不间断地运行下去

最好的是安装别人写好的Web Socket服务器，然后再设计网页来与之通信

简单的Web Socket客户端

 

var socket= new WebSocket("ws://localhost/socketServer.php");   //ws:开头表示Web Socket连接的新协议，还支持以wss://开头的URL

创建好这个对象后，页面会尝试连接服务器，此时便可以使用这个对象的4个事件

socket.onopen = connectionOpen;           //建立连接后出发此事件

socket.onmessage = messageReceived;        //收到消息触发

socket.onerror = erroeOcurred;

socket.onClose = connectionClosed;

function connectionOpen(){

    socket.send("用户名：shuiboli@126.com");     //send()方法发送消息，接受纯文本内容作为参数

}

function connectionClosed(){

    socket.disconnect();

}

使用现成的Web Socket服务器

 

Java版的Web Socket服务器：http://jwebsocket.org/     上面还有很多例子哟

应用的例子：

①最简单的，echo程序：http://www.websocket.org/echo.html

②简单的聊天程序  http://html5demos.com/web-socket

③多人绘图板  http://mrdoob.com/projects/multiuserpad      （不过我没打开成功这个网页）

PS：无意间发现了另一个HTML5绘图的网站  http://muro.deviantart.com/