@@ -460,26 +460,26 @@ JSONP的请求URL通常是像这样:
460
460
<td id="cell-1"> </td>
461
461
<td id="cell-2"> </td>
462
462
<td id="cell-3"> </td>
463
- ...
463
+ ……
464
464
465
- 整个游戏是在一个全局对象ttt中实现 :
465
+ 整个游戏是在一个全局对象 ` ttt ` 中实现 :
466
466
467
467
var ttt = {
468
- // cells played so far
468
+ // 已经下过的棋盘
469
469
played: [],
470
470
471
- // shorthand
471
+ // 快捷函数
472
472
get: function (id) {
473
473
return document.getElementById(id);
474
474
},
475
475
476
- // handle clicks
476
+ // 处理点击
477
477
setup: function () {
478
478
this.get('new').onclick = this.newGame;
479
479
this.get('server').onclick = this.remoteRequest;
480
480
},
481
481
482
- // clean the board
482
+ // 清除棋盘
483
483
newGame: function () {
484
484
var tds = document.getElementsByTagName("td"),
485
485
max = tds.length,
@@ -490,14 +490,14 @@ JSONP的请求URL通常是像这样:
490
490
ttt.played = [];
491
491
},
492
492
493
- // make a request
493
+ // 发送请求
494
494
remoteRequest: function () {
495
495
var script = document.createElement("script");
496
496
script.src = "server.php?callback=ttt.serverPlay&played=" + ttt.played.join(',');
497
497
document.body.appendChild(script);
498
498
},
499
499
500
- // callback, server's turn to play
500
+ // 回调,服务器下棋
501
501
serverPlay: function (data) {
502
502
if (data.error) {
503
503
alert(data.error);
@@ -511,10 +511,10 @@ JSONP的请求URL通常是像这样:
511
511
512
512
setTimeout(function () {
513
513
ttt.clientPlay();
514
- }, 300); // as if thinking hard
514
+ }, 300); // 假装想破脑袋
515
515
},
516
516
517
- // client's turn to play
517
+ // 客户端下棋
518
518
clientPlay: function () {
519
519
var data = 5;
520
520
@@ -523,8 +523,7 @@ JSONP的请求URL通常是像这样:
523
523
return;
524
524
}
525
525
526
- // keep coming up with random numbers 1-9
527
- // until one not taken cell is found
526
+ // 随机产生数字1 - 9,直到找到空格格
528
527
while (this.get('cell-' + data).innerHTML !== " ") {
529
528
data = Math.ceil(Math.random() * 9);
530
529
}
@@ -533,25 +532,25 @@ JSONP的请求URL通常是像这样:
533
532
}
534
533
};
535
534
536
- ttt对象维护着一个已经填过的单元格的列表ttt .played,并且将它发送给服务器,这样服务器就可以返回一个没有玩过的数字。如果有错误发生,服务器会像这样响应:
535
+ ` ttt ` 对象维护着一个已经填过的单元格的列表 ` ttt .played` ,并且将它发送给服务器,这样服务器就可以返回一个没有玩过的数字。如果有错误发生,服务器会像这样响应:
537
536
538
537
ttt.serverPlay({"error": "Error description here"});
539
538
540
539
如你所见,JSONP中的回调函数必须是公开的并且全局可访问的函数,它并不一定要是全局函数,也可以是一个全局对象的方法。如果没有错误发生,服务器将会返回一个函数调用,像这样:
541
540
542
541
ttt.serverPlay(3);
543
542
544
- 这里的3是指3号单元格是服务器要下棋的位置 。在这种情况下,数据非常简单,甚至都不需要使用JSON格式,只需要一个简单的值就可以了。
543
+ 这里的 ` 3 ` 是指3号单元格是服务器要下棋的位置 。在这种情况下,数据非常简单,甚至都不需要使用JSON格式,只需要一个简单的值就可以了。
545
544
546
545
### 框架(frame)和图片信标(image beacon)
547
546
548
- 另外一种做远程脚本编程的方式是使用框架。你可以使用JavaScript来创建框架并改变它的src URL。新的URL可以包含数据和函数调用来更新调用者 ,也就是框架之外的父页面。
547
+ 另外一种做远程脚本编程的方式是使用框架。你可以使用JavaScript来创建框架并改变它的 ` src ` 属性( URL),新URL的页面中可以包含数据和函数调用来更新调用者 ,也就是框架之外的父页面。
549
548
550
- 远程脚本编程中最最简单的情况是你只需要传递一点数据给服务器,而并不需要服务器的响应内容。在这种情况下,你可以创建一个新的图片,然后将它的src指向服务器的脚本 :
549
+ 远程脚本编程中最最简单的情况是你只需要传递一点数据给服务器,而并不需要服务器的响应内容。在这种情况下,你可以创建一个新的图片,然后将它的 ` src ` 指向服务器的脚本 :
551
550
552
551
new Image().src = "http://example.org/some/page.php";
553
552
554
- 这种模式叫作图片信标,当你想发送一些数据给服务器记录时很有用,比如做访问统计。因为信标的响应对你来说完全是没有用的,所以通常的做法(不推荐)是让服务器返回一个1x1的GIF图片。更好的做法是让服务器返回一个“ 204 No Content” HTTP响应。这意味着返回给客户端的响应只有响应头(header)而没有响应体(body)。
553
+ 这种模式叫作图片信标,当你想发送一些数据给服务器记录时很有用,比如做访问统计。因为信标的响应对你来说完全是没有用的,所以通常的做法(不推荐)是让服务器返回一个1x1的GIF图片。更好的做法是让服务器返回一个` " 204 No Content" ` HTTP响应。这意味着返回给客户端的响应只有响应头(header)而没有响应体(body)。
555
554
556
555
## 部署JavaScript
557
556
0 commit comments