投稿2017/07/29 15:15
編集2017/08/05 15:58javascriptを用いてクライアントからサーバー文字列を送りたいと考えております。
http://www.hiramine.com/physicalcomputing/arduino/httppostmethod.html
以上のサイトに大体の記載があるのですが、こちらはjavascriptではなくフォームです。
javascriptでのコードの記載方をご教授いただけると幸いです。（下のコードで試しましたが失敗しています。）
ちなみに。
このコードだとうまく動いてくれません。
javascriptのコードが対応していないとみていますが・・・。
解決策が分かりましたらご教授いただけると幸いです。
エラー内容（webブラウザ）
index.htm:28 XMLHttpRequest cannot load file:///E:/%E9%80%A3%E5%8B%95%E8%A3%85%E7%BD%AE%E5%88%B6%E4%BD%9C%EF%BC%81%…83%A0%E7%AB%AF%E6%9C%AB(%E7%B0%A1%E7%95%A5%EF%BC%89/Default.aspx?key=M10R*. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https. sendmoji @ index.htm:28
↓javascript(抜粋）↓
function dosa_10M(pix){ if(pix.clientX>=400){ if(pix.clientX<=450){ if(pix.clientY>=400){ if(pix.clientY<=450){ if(sinro_setting[0]==1){ confirm( "進路鎖錠中"); return 0; } if(sinro_setting[1]==1){ confirm( "進路鎖錠中"); return 0; } if(M10=='N')var M_name='定位→反位'; if(M10=='R')var M_name='反位→定位'; var result = confirm( "10号を転換します。" + M_name); if(result){ confirm( "転換完了。" ); if(M10=='N'){ var M10flug='R'; sendmoji("M10R*");//この引数を送信 } if(M10=='R'){ var M10flug='N'; sendmoji("M10N*");//この引数を送信 } M10=M10flug; canvas_clear();//canvasを消去 rendo_gamen(sinro_setting);//再描画 }else{ confirm( "転換はキャンセルされました。" ); } } } } } } function sendmoji(pos){//pos内の文字列をサーバーへ送信 //javascriptオブジェクトを取得 try { var http = new ActiveXObject("Microsoft.XMLHTTP"); } catch(e) { var http = new XMLHttpRequest(); } //受信時のコールバック関数を登録 // http.onreadystatechange = function() { // if (http.readyState == 4 && http.status == 200) { // var data = http.responseText; // document.getElementById("TextBox1").value=data; // } // } //文字コード変換 pos=encodeURIComponent(pos); //呼び出すアドレスにパラメータ key=値 を追加し送信 複数のパラメータは&でつなげる http.open("GET","Default.aspx?key="+pos); console.log(pos); http.send(null); }
↓html5↓
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta name="GENERATOR" content="HomuPage Writer Ver1.20"> <title>西城駅 連動画面</title> </head> <body> <h2></h2> <canvas id="terminal"width="1900" height="900"></canvas> <br/> <script> var M10='N'; var M11='N'; var sinro_setting=[0,0,0,0]; var TR=[0,0,0,0,0,0,0,0]; rendo_gamen(sinro_setting); document.addEventListener('click', dosa); function dosa(pix){ dosa_10M(pix); dosa_11M(pix); dosa_1RA(pix); } TR=[0,0,0,0,0,0,0,0]; rendo_gamen(sinro_setting); </script></body></html>
一応arduinoコードも載せておきます。
#include <SPI.h> #include <Ethernet2.h> #include <SD.h> char *FILENAME="index.htm"; byte mac[] = { 0x90, 0xA2, 0xDA, 0x10, 0xBF, 0x98 }; IPAddress ip(192, 168, 100, 222); EthernetServer server(80); void setup() { Serial.begin(9600); while (!Serial) { ; } Ethernet.begin(mac, ip); server.begin(); Serial.print("server is at "); Serial.println(Ethernet.localIP()); if (!SD.begin(4)) { Serial.println("ErrorSD!!"); return; } if (!SD.exists(FILENAME)) { Serial.println("ErrorFILE!!"); return; } Serial.println("Ready"); pinMode(31,OUTPUT);//10Mの出力1 pinMode(33,OUTPUT);//10Mの出力2 pinMode(24,OUTPUT); pinMode(22,INPUT);//起動回路の入力 } void Mhani(int Mname){ if(Mname==10)Mname+=21; if(Mname==11)Mname+=24; digitalWrite(Mname,HIGH); digitalWrite(Mname+2,LOW); delay(100); digitalWrite(Mname,LOW); digitalWrite(Mname+2,LOW); } void Mteii(int Mname){ if(Mname==10)Mname+=21; if(Mname==11)Mname+=24; digitalWrite(Mname,LOW); digitalWrite(Mname+2,HIGH); delay(100); digitalWrite(Mname,LOW); digitalWrite(Mname+2,LOW); } int T10=0; int flug=0; int flugdelay=0; char buff[]="0000"; int counter=0; int Mnam=0; void loop() { // listen for incoming clients if(digitalRead(22)==HIGH){ digitalWrite(24,HIGH); flug=1; T10=1; }else{ digitalWrite(24,LOW); T10=0; flug=0; } EthernetClient client = server.available(); if (client) { Serial.println("new client"); boolean currentLineIsBlank = true; while (client.connected()) { if (client.available()) { char c = client.read(); Serial.write(c); if (c == '\n' && currentLineIsBlank) { client.println("HTTP/1.1 200 OK"); client.println("Content-Type: text/html"); client.println("Connection: close"); client.println(); File file; file = SD.open(FILENAME,FILE_READ); if(file){ while(file.available()){ Serial.print(file.position()); char buff=file.read(); Serial.print(buff); client.write(buff); } if(T10==0)client.println("<script>TR=[0,0,0,0,0,0,0,0];"); if(T10==1)client.println("<script>TR=[0,0,1,0,0,0,0,0];"); client.println("rendo_gamen(sinro_setting);"); client.println("</script></body></html>"); flugdelay=1; }else{ Serial.println("ErrorFILEREAD!!"); } file.close(); } if (c == '\n') { currentLineIsBlank = true; } else if (c != '\r') { currentLineIsBlank = false; } int chackflug=0; while(1){//クライアントへhtmデータ送信後、無限ループにて制御要求待ち。 chackflug++; if(chackflug<=10)Serial.println("delaynow..."); if(flugdelay==0)break; int flug1=flug; if(digitalRead(22)==HIGH){//列車検知したら処理 digitalWrite(24,HIGH); flug=1; T10=1; }else{//列車検知しなかったら処理 digitalWrite(24,LOW); flug=0; T10=0; } if(flug1!=flug){//軌道回路在線表示更新（列車検知をブラウザに反映） if(T10==0)client.println("<script>TR=[0,0,0,0,0,0,0,0];"); if(T10==1)client.println("<script>TR=[0,0,1,0,0,0,0,0];"); client.println("rendo_gamen(sinro_setting);"); client.println("</script></body></html>"); } Serial.println("4"); if(client.available()>=1){//クライアントから制御要求を確認 Serial.println("5"); char data=client.read();//1バイトずつ受信 buff[counter]=data; Serial.print(buff[counter]); if(data=='*'){//データ末尾「*」を受けたらリセットして受信状態から抜ける counter=0; Mnam=buff[0]-'0'; Mnam*=10; Mnam+=buff[1]-'0'; if(buff[2]=='R')Mhani(Mnam);//転てつ機反位転換 if(buff[2]=='N')Mteii(Mnam);//転てつ機定位転換 Serial.println(""); }else{ counter++; } } delay(1); } } } delay(1); client.stop(); Serial.println("client disconnected"); } }
arduino上のシリアルモニタでは、出力が4で無限ループするため、クライアントからデータが送信されていないものと思います。
以上よろしくお願いいたします。
〇原因追求
サーバーからデータを受け取った状態でクライアントからhtmファイルを起動しました。
結果下記エラーがクライアントに発生しました。
Failed to load resource: net::ERR_CONNECTION_REFUSED Default.aspx?key=M10N*
自分なりに改良してみましたがうまくいきません。
こちらに書き換えたプログラムの状況を記載しております。
https://teratail.com/questions/87158
回答2件
0
要件が判然としませんが、実現したいのは下記ですか。
要件が違うようでしたら、もう少し詳しく書いて下さい。
javascriptを用いてクライアントからサーバーへデータを送りたいと考えております。
「クライアント」が「クライアントサイドスクリプト(JavaScript)」を指しているのか、「ローカルファイル」を指しているのか。
JavaScriptを読み込んでいるHTML文書はローカルファイルですか、サーバ上のファイルですか。
JavaScriptからローカルファイル(クライアントPC内のファイル)を扱うなら、File API を使う方法があります。
https://www.html5rocks.com/ja/tutorials/file/dndfiles/
なお、ローカルファイルはユーザの同意なしに送信する事は出来ませんので、指定したパスに存在するローカルファイルを自動的にアップロードする事は出来ません。
Re: beansan さん
投稿2017/07/30 03:34
総合スコア18164
0
Default.aspxはサーバとして動いていますか？
そしてそのHTMLはサーバ上で動いていますか？
URLがfile:///E:/からはじまっていませんか？
投稿2017/07/29 15:29
総合スコア69407
あなたの回答
tips
プレビュー
Q&A
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/07/30 05:07
2017/07/30 05:22
2017/08/01 08:14