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完成參數配置。