需要 JS 和 后端结合在一起

发送向服务器发送数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
function sendAjax()
{
	var info = document.getElementById("info").value;
	
	var XHR = null;
	var FD = new FormData();
	if (window.XMLHttpRequest)
		XHR = new XMLHttpRequest();
	else if (window.ActiveXObject)
		XHR = new ActiveXObject("Microsoft.XMLHTTP");
	else return ;
	
	FD.append("info", info); // 添加信息
	
	XHR.onreadystatechange = function ()
	{
		if (XHR.readyState == 4 && XHR.status == 200)
		{
			var text = XHR.responseText; // 返回的文本

			sendAjax(); // 继续AJAX
		}
	}
	
	XHR.open('POST', 'ajax.php', true);
	XHR.send(FD);
}

以云笺的实时通讯为例

切换实时通讯的开关

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
var sync = false;
var sync_auto = true;
var sync_last_text = "";
var save_time = 0;
var save_text = "";

function switch_sync() // 开关实时同步
{
	if (sync == false)
	{
		sync = true;

		mdui.snackbar({
						message: '已开启当前页同步',
						buttonText: '帮助',
						onButtonClick: function() {
							;
						},
					});

		sendAjax();
	}
	else
	{
		sync = false;

		mdui.snackbar({
						message: '已关闭当前页同步',
						buttonText: '帮助',
						onButtonClick: function() {
							;
						},
					});
	}
}

发送向服务器发送数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
function sendAjax()
{
	if (sync == false)
		return ;

	var name = document.getElementById("name").value;
	var info = document.getElementById("info").value;

	if (name == "") return ;
	
	var XHR = null;
	var FD = new FormData();
	
	// 去掉首尾空格
	var noblank_name = name.replace(/(^\s*)|(\s*$)/g,"");
	if (noblank_name != name){
		name = noblank_name;
		document.getElementById("name").value = name;
	}
	
	if (window.XMLHttpRequest)
	{
		XHR = new XMLHttpRequest();
	}
	else if (window.ActiveXObject)
	{
		XHR = new ActiveXObject("Microsoft.XMLHTTP");
	}
	
	FD.append("name", name);
	FD.append("info", info);
	FD.append("info2", sync_last_text);
	
	XHR.onreadystatechange = function ()
	{
		if (XHR.readyState == 4 && XHR.status == 200)
		{
			if (sync == false) return ; // 连接中关闭
			var new_info = XHR.responseText; // 新的信息
			// new_info = new_info.replace(/\r/, ""); // 返回的信息莫名多了 \r，还不能直接去掉
			new_info = decodeURI((encodeURI(new_info)).replace(/%0D/g, ""));

			if (new_info == ""); // 时间到、空文本，继续AJAX
			else if (document.getElementById("name").value != name); // 已修改名字，发送新的AJAX
			else if (info == new_info); // 内容一样，自己保存
			else if (document.getElementById("info").value == new_info); // 后来添加的信息一样
			else if (sync_last_text == new_info); // 收到上次一样的数据
			else if ((new Date()).getTime() <= save_time + 3000); // 3秒钟内保存的，可能是自己的
			else if (save_text == new_info); // 收到自己的内容
			else
			{
				var myDate = new Date();

				if (sync_auto == true  // 自动修改
					&& document.getElementById("info").value == save_text // 文本和上次保存的内容相同，即没有自动修改
					)
				{
					document.getElementById("info").value = new_info;
					save_text = new_info;

					mdui.snackbar({
									message: '已更新 '+myDate.getHours()+":"+myDate.getMinutes()+":"+myDate.getSeconds(),
									buttonText: '撤销并关闭自动修改',
									onButtonClick: function() {
										document.getElementById("info").value = info;
										save_text = info;
										sync_auto = false;
									},
								});
				}
				else
				{
					mdui.snackbar({
									message: '收到更新'+myDate.getHours()+":"+myDate.getMinutes()+":"+myDate.getSeconds(),
									buttonText: '修改',
									onButtonClick: function() {
										document.getElementById("info").value = new_info;
										save_text = new_info;
									},
								});
					
				}
			}

			sync_last_text = new_info;

			sendAjax(); // 继续AJAX
		}
	}
	
	XHR.open('POST', 'sync_ajax.php', true);
	
	XHR.send(FD);
	
	return false;
}