Facebook Twitter Google Maps RSS
Home 未分類 Ajaxってなーに??
formats

Ajaxってなーに??

Ajaxってなーに??

皆さんこんにちは!!
第四回目のシステムブログをかかせて頂きます!!

今回もまた最近使っているAjaxについて書こうと思います。

Ajax(Asynchronous JavaScript+XML)とはWebブラウザ内で非同期通信と
インターフェイスの構築などを行う技術の総称(ウィキペディア参照 http://ja.wikipedia.org/wiki/Ajax)

非同期通信と言われてもどの部分が非同期なのかわかりづらいと思います。

そこで、簡単な例を探してきました!
グーグルマップなどの地図サービスサイトです。

昔の地図サービスサイトは目的地に移動する度に
画面のリロードが発生し表示がとても遅かったみたいです。
(私は使ったことありませんが。。。

しかし、現在の地図サービスサイトは目的地までカーソルで移動しても
画面のリロードもなく、直感的に操作することができますよね!
この動きを実現するのが非同期通信なのです!

今回もサンプルプログラムを作成致しました。

名前を入力すると、入力した名前に文字列を追加して画面に出力するプログラムです!
以下コードになります。

*************sample_view.php*************

<html>
<meta http-equiv=”Content-Type” content=”Text/html; charset=utf-8″>
<head>
<script src=”//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”></script>
<script src=”./ajax_js_sample.js”></script>
</head>
<body>
<div>
<form method=”POST” action=”./sample.php” id=”hogehoge”>
<input type=”text” name=”hoge” id=”hoge” placeholder=”名前を入力してね!!” >
<input type=”submit” name=”” id=”hoge” value=”送信” >
</form>
</div>
<div></div>
</body>

*************sample.php*************

<?php
class sample
{
public function index()
{
if(isset($_POST[‘hoge’])){
echo $_POST[‘hoge’].’さん、ようこそAjaxの世界へ!!’;
exit;
}
//サンプルページ読み込み
include(‘/sample_view.php’);
}
}

$Obj = new sample;
$Obj->index();

*************ajax_is_sample.php*************

$(function($){
$(‘#hogehoge’).submit(function(event){
var $btn = $(this).find(‘input’)
/**
Ajax通信メソッド
*/
$.ajax({
url: $(this).attr(‘action’),
type: $(this).attr(‘method’),
data: $(this).serialize(),

beforeSend: function(){
$btn.attr(‘disabled’, true);
},
success: function(data){
$(‘.result_ajax’).text(data);
},
});
return false;
});
});

ご参考にして頂ければ幸いです。

実行すると下記のような入力画面が表示され、

花子と入力して実行すると下記のような画面が表示されます。

画像だと非同期かどうかわかりづらいですね(笑

なので皆様是非実行して、

非同期のすばらしさを感じてみてください!

今回はこの辺で失礼させて頂きます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


*