質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Google API

Googleは多種多様なAPIを提供していて、その多くはウェブ開発者向けのAPIです。それらのAPIは消費者に人気なGoogleのサービス(Google Maps, Google Earth, AdSense, Adwords, Google Apps,YouTube等)に基づいています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

2回答

3486閲覧

javascript(JQueryを使わない)純粋なAjax(React.jsを使っています)

yuki_nagahama

総合スコア17

Google API

Googleは多種多様なAPIを提供していて、その多くはウェブ開発者向けのAPIです。それらのAPIは消費者に人気なGoogleのサービス(Google Maps, Google Earth, AdSense, Adwords, Google Apps,YouTube等)に基づいています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2017/01/11 07:46

現在Reactの中でgoogle directions APIを使って2点間のルートを算出したいと思っております。

google directions APIの形はこのようなURLで、
originとdestinationの2つを入れれば値を返してくれます。

https://maps.googleapis.com/maps/api/directions/json?origin=福岡&destination=広島&key=YOUR_API_KEY

これまではjQueryを使って通信をしていたのですが、
最近はreact.jsを使っているので、jQueryを使わずに純粋なデータ送信をしたいと思っております。
しかしjQueryの記事が多すぎて、純粋なjsでのデータ送信を書いている記事を見つけることができないでおります。

Reactでのデータ送受信の方法があるのであればこちらも教えてください。
普段使っているものはReact, Node.js, JavaScriptです。

どなたかよろしくお願い致します。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ここらへんが参考になると思います。
検索方法としては「javascript XMLHttpRequest」等で検索すると出てきます。
それでもjQueryが出てくる場合は「javascript XMLHttpRequest -jQuery」で検索するとよいかと思います。

XMLHttpRequest についてのメモ
今からはじめるReact.js〜サーバーとの通信〜

投稿2017/01/11 07:52

mukkun

総合スコア882

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ベストアンサー

ざっくり書くとこんな感じで

javascript

1<script> 2function getAjax(param){ 3 var url=param["url"]; 4 var type=param["type"]||"get"; 5 var dataType=param["dataType"]||"text"; 6 var dataOrg=param["data"]||null; 7 if(dataType=="json"){ 8 data=myurlencode(dataOrg); 9 }else{ 10 data=dataOrg; 11 } 12 var ajax = new window.XMLHttpRequest(); 13 if(type=="post"){ 14 ajax.open(type,url); 15 ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 16 ajax.send(data); 17 }else if(type=="get"){ 18 ajax.open(type, url+"?"+data); 19 ajax.send(null); 20 } 21 ajax.onreadystatechange=function(){ 22 if(( ajax.readyState == 4 ) && ( ajax.status == 200 )){ 23 return ajax.responseText; 24 } 25 } 26} 27function myurlencode(data){ 28 var str=""; 29 for(var i in data){ 30 if(str!=="") str+="&"; 31 str+=encodeURIComponent(i)+"="+encodeURIComponent(data[i]); 32 } 33 return str; 34} 35console.log(getAjax({url:"hoge.php",type:"get",dataType:"json",data:{a:"てすと",b:2}})); 36console.log(getAjax({url:"fuga.php",type:"post",data:"a=test&b=3"})); 37</script>

投稿2017/01/11 09:17

yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問