网络：W5500用浏览器配置设备
1.背景
嵌入式端使用网络通信后，可以在PC端进行设备配置。方法有二：1）上位机配置；2）浏览器配置。
上位机配置可以把设置和测量作为一体，功能可以很强大，体验较好。
浏览器配置就是在电路板上搭载一个嵌入式的web服务器，所以功能一般的很有限。
特定情况下，搭载一个浏览器设置接口，可以大大方便设备的使用，毕竟是个电脑就肯定有浏览器的。
2.W5500浏览器配置例程分析
1）界面如下
2）参数显示
上面显示了HTTP访问期间的三次握手和四次挥手。
刷新一次网页，为什么会出现2次HTTP get请求呢？
从第二次请求内容可以看出，请求一个w5500.js.
查看服务器端源码，可以看出:
如果请求是 http://192.168.1.90/ , 则回复INDEX_HTML，这是一个宏定义，是html格式的字符串。
如果请求是 http://192.168.1.90/w5500.js , 则回复json_callback，这个callback以字符串格式发送到客户端。
case METHOD_GET: name = http_request->URI; if(strcmp(name,"/index.htm")==0 || strcmp(name,"/")==0 || (strcmp(name,"/index.html")==0)) { file_len = strlen(INDEX_HTML); make_http_response_head((uint8*)http_response, PTYPE_HTML,file_len); send(s,http_response,strlen((char const*)http_response)); send_len=0; while(file_len) { if(file_len>1024) { if(getSn_SR(s)!=SOCK_ESTABLISHED) { return; } send(s, (uint8 *)INDEX_HTML+send_len, 1024); send_len+=1024; file_len-=1024; } else { send(s, (uint8 *)INDEX_HTML+send_len, file_len); send_len+=file_len; file_len-=file_len; } } } else if(strcmp(name,"/w5500.js")==0) { memset(tx_buf,0,MAX_URI_SIZE); make_basic_config_setting_json_callback(tx_buf,ConfigMsg); sprintf((char *)http_response,"HTTP/1.1 200 OK\r\nContent-Type: text/html\r\nContent-Length:%d\r\n\r\n%s",strlen(tx_buf),tx_buf); send(s, (u_char *)http_response, strlen((char const*)http_response)); } break;
HTML源码的c定义格式为：
#define INDEX_HTML "<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\'>"\ "<html>"\ "<head>"\ "<title>W5500EVB - HTTP SERVER</title>"\ "<style type='text/css'>"\ "body {text-align:left; background-color:/*#ffc1e0*/#c0deed;font-family:Verdana;}"\ "#main {margin-right:auto;margin-left:auto;margin-top:30px;}"\ "label{display:inline-block;width:150px;}"\ "#main h3{color:#66b3ff; text-decoration:underline;}"\ "</style>"\ "<script>"\ "function $(id) { return document.getElementById(id); };"\ "function settingsCallback(o) {"\ "if ($('txtVer')) $('txtVer').value = o.ver;"\ "if ($('txtMac')) $('txtMac').value = o.mac;"\ "if ($('txtIp')) $('txtIp').value = o.ip;"\ "if ($('txtSub')) $('txtSub').value = o.sub;"\ "if ($('txtGw')) $('txtGw').value = o.gw;"\ "};"\ "</script>"\ "</head>"\ "<body>"\ "<div id='main'>"\ "<div style='background:snow; display:block;padding:10px 20px;'>"\ "<h3>Device Settings</h3>"\ "<form id='frmSetting' method='POST' action='config.cgi'>"\ "<p><label for='txtIp'>Firmware version:</label><input type='text' id='txtVer' name='ver' size='16' disabled='disabled' /></p>"\ "<p><label for='txtIp'>MAC address:</label><input type='text' id='txtMac' name='mac' size='16' disabled='disabled' /></p>"\ "<p><label for='txtIp'>IP address:</label><input type='text' id='txtIp' name='ip' size='16' /></p>"\ "<p><label for='txtSub'>Subnet mask:</label><input type='text' id='txtSub' name='sub' size='16' /></p>"\ "<p><label for='txtGw'>Default gateway:</label><input type='text' id='txtGw' name='gw' size='16' /></p>"\ "<p><input type='submit' value='Save Settings and Reboot' /></p>"\ "</form>"\ "</div>"\ "</div>"\ "<div style='margin:5px 5px;'>"\ "©Copyright 1998-2013 by WIZnet Team"\ "</div>"\ "<script type='text/javascript' src='w5500.js'></script>"\ "</body>"\ "</html>"
这看起来有点费力，从网页端查看格式为如下。
可以看到，这个页面里面内嵌了js脚本。所以在加载完这段html之后，浏览器会解析脚本发送第二次请求：<script src="w5500.js" type="text/javascript"></script>
这个请求被W5500服务器端接收到后，指向上面的else if(strcmp(name,"/w5500.js")==0)语句，然后执行make_basic_config_setting_json_callback(tx_buf,ConfigMsg);
此时，就通过CGI接口，向客户端推送数据。所以浏览器上第一次刷新出来的显示框就会出现数值。这就是用网页显示系统配置参数的过程。
3）参数设置
从html页面可以看到，按钮会触发config.cgi请求。把设置的参数POST给服务器。
服务器端接收到后，进行解析，其实就是字符串分析，提取出ip,mac,gw等字符串，然后获得配置的参数。
case METHOD_POST: mid(http_request->URI, "/", " ", req_name); if(strcmp(req_name,"config.cgi")==0) { cgi_ipconfig(http_request); make_cgi_response(5,(int8*)ConfigMsg.lip,tx_buf); /*Éú³ÉÏìÓ¦µÄÎı¾²¿·Ö*/ sprintf((char *)http_response,"HTTP/1.1 200 OK\r\nContent-Type: text/html\r\nContent-Length:%d\r\n\r\n%s",strlen(tx_buf),tx_buf); send(s, (u_char *)http_response, strlen((char *)http_response)); disconnect(s); reboot_flag=1; return; } break;
服务器获取到参数后，写入到EEPROM完成参数配置。
