.js files and arduino webserver

Hallo there, I do not think this is the first question about this subject but I still can not find any good solution.

The situation:

I like to include some .js files into the webserver HTML page.

I made an index.htm file with all the .js files needed.

I put those on a SD card. no long file names no exstensions except HTM and js

All files are read from the SD card, checked with the monitor but in the browser it ended with plenty of text on the screen but no temperature meter.

This is the sketch:
/*--------------------------------------------------------------
Program: eth_websrv_SD

Description: Arduino web server that serves up a basic web
page. The web page is stored on the SD card.

Hardware: Arduino Uno and official Arduino Ethernet
shield. Should work with other Arduinos and
compatible Ethernet shields.
2Gb micro SD card formatted FAT16

Software: Developed using Arduino 1.0.3 software
Should be compatible with Arduino 1.0 +
SD card contains web page called index.htm

References: - WebServer example by David A. Mellis and
modified by Tom Igoe

Date: 10 January 2013

Author: W.A. Smith, http://startingelectronics.com
--------------------------------------------------------------*/

#include <SPI.h>
#include <Ethernet.h>
#include <SD.h>

// MAC address from Ethernet shield sticker under board
byte mac = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };
IPAddress ip(192, 168, 178, 19); // IP address, may need to change depending on network
EthernetServer server(80); // create a server at port 80

File webFile;

void setup()
{
Ethernet.begin(mac, ip); // initialize Ethernet device
server.begin(); // start to listen for clients
Serial.begin(9600); // for debugging

// initialize SD card
Serial.println(“Initializing SD card…”);
if (!SD.begin(4)) {
Serial.println(“ERROR - SD card initialization failed!”);
return; // init failed
}
Serial.println(“SUCCESS - SD card initialized.”);
// check for index.htm file
if (!SD.exists(“index.htm”)) {
Serial.println(“ERROR - Can’t find index.htm file!”);
return; // can’t find index file
}
Serial.println(“SUCCESS - Found index.htm file.”);
}

void loop()
{
EthernetClient client = server.available(); // try to get client

if (client) { // got client?
boolean currentLineIsBlank = true;
while (client.connected()) {
if (client.available()) { // client data available to read
char c = client.read(); // read 1 byte (character) from client
// last line of client request is blank and ends with \n
// respond to client only after last line received
if (c == ‘\n’ && currentLineIsBlank) {
// send a standard http response header
client.println(“HTTP/1.1 200 OK”);
client.println(“Content-Type: text/html”);
client.println(“Connection: close”);
client.println();
// send web page
webFile = SD.open(“index.htm”); // open web page file
if (webFile) {
Serial.println(“index ok!”);
while(webFile.available()) {
client.write(webFile.read()); // send web page to client
}
webFile.close();
}
webFile = SD.open(“Drinks.js”); // open web page file
if (webFile) {
Serial.println(“Drinks ok!”);
while(webFile.available()) {
client.write(webFile.read()); // send web page to client
}
webFile.close();
}
webFile = SD.open(“Display.js”); // open web page file
if (webFile) {
Serial.println(“Display ok!”);
while(webFile.available()) {
client.write(webFile.read()); // send web page to client
}
webFile.close();
}
webFile = SD.open(“Knob.js”); // open web page file
if (webFile) {
Serial.println(“Knob ok!”);
while(webFile.available()) {
client.write(webFile.read()); // send web page to client
}
webFile.close();
}
webFile = SD.open(“Led.js”); // open web page file
if (webFile) {
Serial.println(“Led ok!”);
while(webFile.available()) {
client.write(webFile.read()); // send web page to client
}
webFile.close();
}
webFile = SD.open(“Slider.js”); // open web page file
if (webFile) {
Serial.println(“Slider ok!”);
while(webFile.available()) {
client.write(webFile.read()); // send web page to client
}
webFile.close();
}
webFile = SD.open(“Switch.js”); // open web page file
if (webFile) {
Serial.println(“Switch ok!”);
while(webFile.available()) {
client.write(webFile.read()); // send web page to client
}
webFile.close();
}
break;
}
// every line of text received from the client ends with \r\n
if (c == ‘\n’) {
// last character on line of received text
// starting new line with next character read
currentLineIsBlank = true;
}
else if (c != ‘\r’) {
// a text character was received from client
currentLineIsBlank = false;
}
} // end if (client.available())
} // end while (client.connected())
delay(1); // give the web browser time to receive the data
client.stop(); // close the connection
} // end if (client)
}

And this is the small index.htm file
<!doctype html>

Untitled Document

Without the webserver, just direct into the browser everything works ok…

Any suggestios?

Your browser will first send a HTTP-Request requesting only your index.htm file. When the browser starts interpreting the htm file, it will send another HTTP-Request for each additional ressource it stumbles over. This can be JS files, but also CSS or Images.

This means you need to parse the incoming HTTP-Request and only send the file that is requested.

A while ago, I've written a Blog-Post how to implement this using the Webduino-Framework: http://blog.noser.com/an-arduino-based-webserver/

My new web server code in the playground also handles .js files well. http://playground.arduino.cc/Code/WebServerST

edit: It also has all the latest error checking and fault tolerance features.

Below is a link to a post with some test code and attached files to use with the code. The files are uploaded from the SD card to the browser.

http://forum.arduino.cc/index.php?topic=279849.msg1970392#msg1970392