YUI Connection Managerの使い方 POSTリクエスト
スポンサーリンク
Yahoo!のYUIライブラリのYUI Connection Managerを使ってみました。
JavaScriptでAJAXなアプリケーションを作りたいときに、便利です。
今回は、POSTでデータを送信してみます。
GETでやった YAHOO.util.Connection.asyncRequestの
第1引数を POST メソッドを指定することと、
第4引数に postのデータを与える、だけで、POSTリクエストが送れます。
ですが、POSTをするときには、 フォーム(form)を送りたいことも多々あり、
POSTのデータを組み立てるのは、面倒です。
YAHOO.util.Connect.setFromを使って、フォームを指定してやることで、
フォームをPOSTしてやることが簡単にできます。
connection_manager_post.php
サーバ側に置くファイルです。
POSTで送られてきた comment をエコーするだけです。
JavaScriptでAJAXなアプリケーションを作りたいときに、便利です。
今回は、POSTでデータを送信してみます。
GETでやった YAHOO.util.Connection.asyncRequestの
第1引数を POST メソッドを指定することと、
第4引数に postのデータを与える、だけで、POSTリクエストが送れます。
<script type="text/javascript">
var apiUrl = "connection_manager.php";
var postData = "username=hoge&data=123";
function makeRequest(){
YAHOO.log("request");
var request = YAHOO.util.Connect.asyncRequest('POST', apiUrl, callback, postData);
}
</script>
ですが、POSTをするときには、 フォーム(form)を送りたいことも多々あり、
POSTのデータを組み立てるのは、面倒です。
YAHOO.util.Connect.setFromを使って、フォームを指定してやることで、
フォームをPOSTしてやることが簡単にできます。
<script type="text/javascript">
function makeRequest(){
var formObject = document.getElementById('commentForm');
YAHOO.util.Connect.setForm(formObject); // ここ！
var request = YAHOO.util.Connect.asyncRequest('POST', apiUrl, callback);
}
</script>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Connection Manager POST Transaction</title>
<style type="text/css">
</style>
<!--CSS file (default YUI Sam Skin) -->
<link type="text/css" rel="stylesheet" href="http://yui.yahooapis.com/2.5.0/build/logger/assets/skins/sam/logger.css">
<!-- Dependencies -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<!-- Source file -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.0/build/logger/logger-min.js"></script>
<!-- Core + Skin CSS -->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.0/build/button/assets/skins/sam/button.css">
<!-- OPTIONAL: Menu Stylesheet (required for creating buttons of type "menu" and "split") -->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.0/build/menu/assets/skins/sam/menu.css">
<!-- Dependencies -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.0/build/element/element-beta-min.js"></script>
<!-- Source file -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.0/build/button/button-min.js"></script>
</head>
<body class="yui-skin-sam">
<div id="main">
<form id="commentForm">
<input type="text" id="comment" name="comment" value="">
<input type="button" id="submitbutton1" value="submit" onClick="makeRequest();">
</form>
<div id="messages"></div>
</div>
<!-- Dependency -->
<script src="http://yui.yahooapis.com/2.5.0/build/yahoo/yahoo-min.js"></script>
<!-- Used for Custom Events and event listener bindings -->
<script src="http://yui.yahooapis.com/2.5.0/build/event/event-min.js"></script>
<!-- Source file -->
<script src="http://yui.yahooapis.com/2.5.0/build/connection/connection-min.js"></script>
<script type="text/javascript"><!--
var d = document;
var div = d.getElementById('messages');
var handleSuccess = function(o){
if (o.status !== 200) {
YAHOO.log("HTTP response : " + o.status);
return;
}
if(o.responseText !== undefined){
div.innerHTML += o.responseText + "<br>";
}
};
var handleFailure = function(o){
if(o.responseText !== undefined){
div.innerHTML += "fail: " + o.responseText + "<br>";
}
};
var callback = {
success: handleSuccess,
failure: handleFailure,
};
var apiUrl = "connection_manager_post.php";
function makeRequest(){
var d = document;
YAHOO.log("submit from");
var formObject = d.getElementById('commentForm');
YAHOO.log(formObject);
YAHOO.util.Connect.setForm(formObject);
YAHOO.log("request");
var request = YAHOO.util.Connect.asyncRequest('POST', apiUrl, callback);
}
// --></script>
<script type="text/javascript"><!--
var oSubmitButton1 = new YAHOO.widget.Button("submitbutton1");
oSubmitButton1.addListener("click", function(){ makeRequest();});
// --></script>
<script type="text/javascript">
var myLogReader = new YAHOO.widget.LogReader();
</script>
</body>
</html>
connection_manager_post.php
サーバ側に置くファイルです。
POSTで送られてきた comment をエコーするだけです。
<?php $c = $_POST['comment']; echo "I'm server: $c"; ?>
スポンサーリンク
スポンサーリンク
いつもシェア、ありがとうございます！
もっと情報を探しませんか？
関連記事
最近の記事
- パナソニック ジェットウォッシャードルツ EW-DJ61-Wのホースの修理
- LinuxセキュリティモジュールIntegrity Policy Enforcement
- アマゾンのEcho Show 5を買ったのでレビューします
- アマゾンのサイバーマンデーはAlexa Echo Show 5が安い
- Android スマートフォン OnePlus 7T と OnePlus 7の違い
- Android スマートフォン OnePlus 7 をAndroid10にアップデートしてみた
- クレジットカードのバーチャルカードの比較のまとめ
- 活動量計 Xiaomi Mi Band 4を買ってみたのでレビュー
- Android スマートフォン OnePlus 7 のレビュー
- AliExpressでスマートフォンを買い物してみた
- パソコンのホコリ対策 レンジフードフィルターと養生テープ
- 80PLUS GOLDのPC電源ユニットAntec NeoEco 750 Goldのレビュー
- イギリスの付加価値税 VAT は払い戻しを受けられる
- イギリスのロンドンでスーツケースなど荷物を預けられる場所は
- イギリスのロンドンで地下鉄やバスに乗るならオイスターカードを使おう
- イギリスのヒースロー空港からロンドン市内への行き方
- 航空便でほかの航空会社に乗り継ぎがある場合のオンラインチェックイン
- SFC会員がANA便ではなくベトナム航空のコードシェアを試して解ったこと
- ベトナムの入国審査でeチケットの掲示が必要だった話
- シアトルの交通ICカードはオルカカード（Orca)です
人気のページ
- Windows7 IME 辞書ツールで単語の登録に失敗しました
- C言語 popen()でコマンドを実行して出力を読み込む
- Windows7で休止状態にする方法
- CentOS MySQLの起動、停止、再起動
- loggerコマンドでsyslogにエラーを出力する方法
- パソコンパーツの買取をしてくれる店のまとめ
- Java Mapの使い方 get(),put(),remove(),size(),clear()
- 楽天のRポイントカードを作ってみた
- iPhone 5 から iPhone 6 に乗り換えたのでレビュー
- netstatコマンドのステータスの意味
スポンサーリンク
過去ログ
2020 : 01 02 03 04 05 06 07 08 09 10 11 122019 : 01 02 03 04 05 06 07 08 09 10 11 12
2018 : 01 02 03 04 05 06 07 08 09 10 11 12
2017 : 01 02 03 04 05 06 07 08 09 10 11 12
2016 : 01 02 03 04 05 06 07 08 09 10 11 12
2015 : 01 02 03 04 05 06 07 08 09 10 11 12
2014 : 01 02 03 04 05 06 07 08 09 10 11 12
2013 : 01 02 03 04 05 06 07 08 09 10 11 12
2012 : 01 02 03 04 05 06 07 08 09 10 11 12
2011 : 01 02 03 04 05 06 07 08 09 10 11 12
2010 : 01 02 03 04 05 06 07 08 09 10 11 12
2009 : 01 02 03 04 05 06 07 08 09 10 11 12
2008 : 01 02 03 04 05 06 07 08 09 10 11 12
2007 : 01 02 03 04 05 06 07 08 09 10 11 12
2006 : 01 02 03 04 05 06 07 08 09 10 11 12
2005 : 01 02 03 04 05 06 07 08 09 10 11 12
2004 : 01 02 03 04 05 06 07 08 09 10 11 12
2003 : 01 02 03 04 05 06 07 08 09 10 11 12