第51章 RL-TCPnet中Ajax使用方法

参与人数 1

转帖

本章节为大家讲解RL-TCPnet中Ajax的实现方法，特别是具体的执行过程说明。关于这点非常有必要讲解下，否则后面学习了Ajax也是云里雾里。

51.1 初学者重要提示

51.2 为什么使用Ajax及其优势

51.3 Ajax执行流程举例

51.4 官方手册中做的举例

51.5 总结

lee_st · 2018-1-18 10:34:19

51.1 初学者重要提示
学习本章节前，请务必保证已经学习了第48，49和50章，这三章的基础知识非常重要，否则学习本章节将比较吃力。

lee_st · 2018-1-18 10:34:33

51.2 为什么使用Ajax及其优势
使用RL-TCPnet脚本语言将动态数据传递给JavaScript对象，可以让用户轻松构建复杂的HTML页面。但是，如果用户尝试显示频繁更改的数据就非常不方便了。一个简单的解决方案是让用户按浏览器的刷新按钮或在HTML代码的部分添加刷新标签。

lee_st · 2018-1-18 10:34:44

虽然这样做可以解决，但是这种方法有两个问题：
1、首先，由于这种方法需要重新加载整个页面，会导致屏幕闪烁，用户体验差。
2、其次，浏览器必须再次下载整个页面，速度很慢并且消耗带宽。
解决这个问题的方法是使用第50章为大家讲解的Ajax（异步JavaScript+XML）。Ajax使用XML管理需要动态更新的数据，然后将该数据以HTML代码中设置的更新率定时发给浏览器。

lee_st · 2018-1-18 10:34:48

虽然这样做可以解决，但是这种方法有两个问题：
1、首先，由于这种方法需要重新加载整个页面，会导致屏幕闪烁，用户体验差。
2、其次，浏览器必须再次下载整个页面，速度很慢并且消耗带宽。
解决这个问题的方法是使用第50章为大家讲解的Ajax（异步JavaScript+XML）。Ajax使用XML管理需要动态更新的数据，然后将该数据以HTML代码中设置的更新率定时发给浏览器。

lee_st · 2018-1-18 10:34:56

使用Ajax有如下优势：
1、动态应用数据以单个TCP数据包发送，提供非常快的更新速率且消耗带宽小。
2、浏览器可以使用XML更新网页，而无需重新加载整个页面，如此就实现了网页中动态对象无闪烁的、实时的更新。
3、由于Ajax技术是将页面处理从Web服务器移动到本地计算机，JavaScript脚本在本地计算机上处理网页并生成网页更新，Web服务器的负担小，可以同时处理更多的客户端。

lee_st · 2018-1-19 10:26:30

51.3 Ajax执行流程举例

为了帮助大家更好的了解Ajax在RL-TCPnet中的工作原理，我们这里举一个例子，创建一个如下所示的控制界面。8个复选框用来反馈板子上8个实体按键的状态。“Refresh”按钮用于手动刷新8个复选框的状态，而“Periodic”复选框用于开启周期性更新8个复选框的状态。

lee_st · 2018-1-19 10:26:43

使用Ajax需要用户添加官方做好的JavaScript文件xml_http.js（以MDK4.74为例，在MDK安装目录的C:Keil_v474ARMRLTCPnetJava文件里面）。XML管理的动态更新数据也要单独创建一个文件。XML文件的后缀名是.cgx，跟CGI脚本文本的后缀cgi要区分开。

lee_st · 2018-1-19 10:27:13

首先来看buttons.cgi文件的代码，重点看标签之间的JavaScript函数和标签之间的输入表单。
#------------------------------------------------

# HTML script in buttons.cgi

#------------------------------------------------

t Button inputs

t

t

i pg_header.inc

t

Buttons on the board

t

This page allows you to monitor on board buttons state.

t  Periodic screen update is based on xml technology. This results in smooth

t  flicker-free screen update.

t  Press a button on an evaluation board and observe the change on the screen.

t

i pg_footer.inc

. End of script must be closed with period.

lee_st · 2018-1-19 10:27:28

从上面的输入表单中可以看出：
（1）创建了8个复选框checkbox。
（2）一个刷新按钮button。
（3）还有一个控制周期刷新的复选框checkbox。

lee_st · 2018-1-19 10:27:55

51.3.1 点击按钮实现的单次更新过程
   当用户在浏览器上按下按钮button时，会触发buttons.cgi文件中设置的按钮触发事件onclick=“updateMultiple（formUpdate）”，从而浏览器会从服务器下载JavaScript函数updateMultiple（）并执行，函数updateMultiple是在xml_http.js文件中实现：
/*----------------------------------------

* xml_http.js

*---------------------------------------*/

function updateMultiple(formUpd, callBack, userName, userPassword) {

xmlHttp = GetXmlHttpObject();

if(xmlHttp == null) {

  alert("XmlHttp not initialized!");

  return 0;

}

xmlHttp.onreadystatechange = responseHandler;

xmlHttp.open("GET", formUpd.url, true, userName, userPassword);

xmlHttp.send(null);

function responseHandler(){

  if(xmlHttp.readyState == 4) { //response ready

if(xmlHttp.status == 200) { //handle received data

var xmlDoc = xmlHttp.responseXML;

if(xmlDoc == null)

   return 0;

try {  //catching IE bug

   processResponse(xmlDoc);

}

catch(e) {

   return 0;

}

/* Callback function for custom update. */

if (callBack != undefined)

   callBack();

}

else if(xmlHttp.status == 401)

alert("Error code 401: Unauthorized");

else if(xmlHttp.status == 403)

alert("Error code 403: Forbidden");

else if(xmlHttp.status == 404)

alert("Error code 404: URL not found!");

  }

}

}

lee_st · 2018-1-19 10:28:11

函数updateMultiple的形参是formUpdate，这个是在buttons.cgi文件中创建的JavaScript对象：
#--------------------------------------

# buttons.cgi

#--------------------------------------

t var formUpdate = new periodicObj ("buttons.cgx", 300);

lee_st · 2018-1-19 10:28:27

而函数periodicObj也是在xml_http.js中实现，定义了周期性更新的文件，时间单位ms。这里是浏览器300ms后下载一次buttons.cgx文件进行更新。

/* Objects templates */

function periodicObj(url, period) {

this.url = url;

this.period = (typeof period == "undefined") ? 0 : period;

}

lee_st · 2018-1-19 10:28:41

buttons.cgx文件的实现如下。
#--------------------------------------

# Buttons.cgx

#--------------------------------------

t

lee_st · 2018-1-19 10:28:57

对于XML文件来说，仅写入要更新的元素即可，并以标签结束。这个XML文件里面也有CGI脚本命令，会触发HTTP_CGI.c文件中的脚本解析函数cgi_func的执行：
/*---------------------------------------

* cgi_func() in HTTP_CGI.c

*--------------------------------------*/

case 'y':

len = sprintf (

(char*) buf,

" %s",

env [1],

(get_button () & (1<<(env [1]-'0'))) ? "true" : "false"

);

break;

lee_st · 2018-1-19 10:29:15

几条脚本命令全部解析后，就会返回8个checkbox的状态给浏览器，即buttons.cgx文件中的代码会全部传给浏览器进行更新。

lee_st · 2018-1-19 10:29:25

特别注意：
1、XML文件buttons.cgx中的每行语句不可超过120个字符。
2、函数cgi_func返回的XML代码中不能有空格和回车换行符。
3、XML文件的后缀务必要是cgx，防止WebServer的脚本解析器无法正确识别。

lee_st · 2018-1-19 10:29:49

51.3.2 选中复选框后的周期性更新过程
如果用户选中了定期更新复选框，浏览器将调用函数periodicUpdate（）并执行。
#--------------------------------------

# buttons.cgi

#--------------------------------------

t function periodicUpdate() {

t if (document.getElementById ("refreshChkBox").checked == true) {

t updateMultiple (formUpdate);

t periodicFormTime = setTimeout ("periodicUpdate ()",formUpdate.period);

t } else {

t clearTimeout (periodicFormTime);

t }

t }

lee_st · 2018-1-19 10:30:04

1、这个JavaScript函数在buttons.cgi文件中的标签里面，主要功能是通过判断复选框是否选中了，如果选中了，将调用函数updateMultiple，更新8个复选框的状态并返回给浏览器。并通过函数setTimeout启动了一个单次定时器，设置时间为formUpdate.period，单位毫秒。时间到后会再次调用函数periodicUpdate，从而实现了周期更新的效果。
2、如果复选框取消选中或者未选中，调用函数clearTimeout停止开启的单次定时器。
3、关于JavaScript的定时器函数说明。

至此，通过Ajax就实现了网页的局部刷新，实际效果极佳。