スポンサーリンク

Yahoo!のYUIライブラリのYUI Connection Managerを使ってみました。
JavaScriptでAJAXなアプリケーションを作りたいときに、便利です。

これだけでリクエストが送れます。

var request = YAHOO.util.Connect.asyncRequest('GET', apiUrl, callback);


GETリクエストを送ってみる。

htmlのソース

デバッグ用に YUI logger を入れてあります。
SubmitボタンをYUI Button でお洒落にしてみました。

<!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>YUI Connection Manager GET 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,
	};
	function makeRequest(){
		var d = document;
		var v = d.getElementById("comment").value;
		var param = 'user=abc&comment=' + encodeURI(v);
		YAHOO.log("request: " + param);
		var apiUrl = "connection_manager.php?" + param;
		var request = YAHOO.util.Connect.asyncRequest('GET', 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.php

サーバ側に置くファイルです。

GETで送られてきた comment をエコーするだけです。

<?php
$c = $_GET['comment'];
echo "I'm server: $c";
?>

スポンサーリンク
スポンサーリンク
 
いつもシェア、ありがとうございます!


もっと情報を探しませんか?

関連記事

最近の記事

人気のページ

スポンサーリンク
 

過去ログ

2020 : 01 02 03 04 05 06 07 08 09 10 11 12
2019 : 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

サイト

Vim入門

C言語入門

C++入門

JavaScript/Node.js入門

Python入門

FreeBSD入門

Ubuntu入門

セキュリティ入門

パソコン自作入門

ブログ

トップ


プライバシーポリシー