jQueryでAjax通信を行う方法とは？Ajax通信を正しく使いこなそう！

Javascript
jQuery
プログラミング言語

公開日時: 2021-02-26 　更新日時: 2022-06-06

この記事でわかること

システム エンジニア: Ajax通信を行う方法を教えてください。

プロジェクト マネージャー: jQueryでAjax通信を行う方法を一緒に見ていきましょう。

jQueryでAjax通信を行う方法とは？

今回は、jQueryでAjax通信を行う方法について説明します。
Ajax通信を利用することで、ページ遷移せずにページを読み込む非同期通信を実現できます。
ここでは、サーバにXAMPPを使用します。事前にXAMPPをインストールしておいてください。

jQueryでAjax通信を行う方法に興味のある方はぜひご覧ください。

Ajaxとは

Ajax(Asynchronous JavaScript + XML)は、ページ遷移せずにページを読み込める仕組みです。これを非同期通信と言います。
通常のWebページは、ページを更新するには再読み込みします。これを同期通信と言います。

Ajaxを使うと、全体を読み込みなおさなくてもよくなります。

HTMLファイル読み込み

jQueryでAjax通信を利用し、HTMLファイルを読み込む方法を紹介します。
まず、「C:\xampp\htdocs」配下に「ajax」フォルダを作成します。

ajaxフォルダ配下にajax_test1.htmlを作成します。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Ajax Sample1</title>
</head>
<body>
  <button id="button">送信</button>
  <div><br></div>
  <div id="result">送信ボタンをクリックしてください。Ajax通信します。</div>
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script>
  // jQuery
  $(function(){
    $("#button").click(function(event){
      $.ajax({
        type: "GET",
        url: "ajax_test.html",
        dataType : "html"
      })
      // Ajaxリクエストが成功した場合
      .done(function(data){
        $("#result").html(data);
      })
      // Ajaxリクエストが失敗した場合
      .fail(function(XMLHttpRequest, textStatus, errorThrown){
        alert(errorThrown);
      });
    });
  });
  </script>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Ajax Sample1</title>

</head>

<body>

<div id="result">送信ボタンをクリックしてください。Ajax通信します。</div>

// jQuery

$(function(){

$("#button").click(function(event){

$.ajax({

type: "GET",

url: "ajax_test.html",

dataType : "html"

})

// Ajaxリクエストが成功した場合

.done(function(data){

$("#result").html(data);

})

// Ajaxリクエストが失敗した場合

.fail(function(XMLHttpRequest, textStatus, errorThrown){

alert(errorThrown);

});

</script>

</body>

</html>

読み込み対象のHTML（ajax_test.html）は以下のように記述します。

<p>Ajax通信に成功しました！</p>

1	<p>Ajax通信に成功しました！</p>

次に、XAMPPコントローラからApacheを起動します。
Webブラウザから、以下のURLにアクセスします。
http://localhost/ajax/ajax_test1.html

「送信」ボタンをクリックすると、「Ajax通信に成功しました！」が表示されます。
urlで指定したHTMLを読込み、id=resultの個所に表示しています。
このように、jQueryでAjax通信を利用し、HTMLファイルを読み込むことができます。

PHPへデータを渡す

jQueryでAjax通信を利用し、PHPへデータを渡す方法を紹介します。
ajaxフォルダ配下にajax_test2.htmlを作成します。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Ajax Sample2</title>
</head>
<body>
  <input type="text" name="name" id="name" size="30" maxlength="20">
  <button id="button">送信</button>
  <div><br></div>
  <div id="result">テキストボックスに値を入力して「送信」ボタンをクリックしてください</div>
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script>
  // jQuery
  $(function(){
    $("#button").click(function(event){
      $.ajax({
        type: "GET",
        url: "ajax_test2.php",
        data: { val: $('#name').val() },
        dataType : "text"
      })
      // Ajaxリクエストが成功した場合
      .done(function(data){
        $("#result").text(data);
      })
      // Ajaxリクエストが失敗した場合
      .fail(function(XMLHttpRequest, textStatus, errorThrown){
        alert(errorThrown);
      });
    });
  });
  </script>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Ajax Sample2</title>

</head>

<body>

<div id="result">テキストボックスに値を入力して「送信」ボタンをクリックしてください</div>

// jQuery

$(function(){

$("#button").click(function(event){

$.ajax({

type: "GET",

url: "ajax_test2.php",

data: { val: $('#name').val() },

dataType : "text"

})

// Ajaxリクエストが成功した場合

.done(function(data){

$("#result").text(data);

})

// Ajaxリクエストが失敗した場合

.fail(function(XMLHttpRequest, textStatus, errorThrown){

alert(errorThrown);

});

</script>

</body>

</html>

ajax_test2.phpは以下のように記述します。Ajax通信でPHPにデータを渡し、表示しています。

<?php
  // valueを取得
  $id = filter_input(INPUT_GET, 'val');
  // valueを表示
  echo $id;
?>

<?php

// valueを取得

$id = filter_input(INPUT_GET, 'val');

// valueを表示

echo $id;

JavaScriptファイル読込み

jQueryでAjax通信を利用し、JavaScriptファイル読込む方法を紹介します。
ajaxフォルダ配下にajax_test3.htmlを作成します。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Ajax Sample3</title>
</head>
<body>
  <div id="jquery-sample">
    <button id="button">送信</button>
    <div id="result"></div>
  </div>
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script>
  $(function(){
    // jQuery
    $("#button").click(function(event){
      $.ajax({
        type: "GET",
        url: "ajax_test3.js",
        dataType : "script"
      })
      // Ajaxリクエストが成功した場合
      .done(function(data){
        $("#result").text(data);
      })
      // Ajaxリクエストが失敗した場合
      .fail(function(XMLHttpRequest, textStatus, errorThrown){
        alert(errorThrown);
      });
    });
  });
  </script>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Ajax Sample3</title>

</head>

<body>

</div>

$(function(){

// jQuery

$("#button").click(function(event){

$.ajax({

type: "GET",

url: "ajax_test3.js",

dataType : "script"

})

// Ajaxリクエストが成功した場合

.done(function(data){

$("#result").text(data);

})

// Ajaxリクエストが失敗した場合

.fail(function(XMLHttpRequest, textStatus, errorThrown){

alert(errorThrown);

});

</script>

</body>

</html>

jQuery('#result').css('backgroundColor', 'pink');

1	jQuery('#result').css('backgroundColor', 'pink');

Webブラウザから、以下のURLにアクセスします。
http://localhost/ajax/ajax_test3.html
「送信」ボタンをクリックすると、JavaScriptファイルを読込み、実行します。
このように、jQueryでAjax通信を利用し、JavaScriptファイル読込むことができます。

システム エンジニア: XAMPPをインストールすることでAjax通信できるのですね。

プロジェクト マネージャー: Ajaxはページを読みこむ必要がなくなる便利な機能です。ぜひ機能をマスターしましょう。

まとめ

いかがでしたでしょうか。jQueryでAjax通信を行う方法について説明しました。
Ajax通信を利用することで、ページ遷移せずにページを読み込む非同期通信を実現できます。
Ajax通信を利用すれば、HTMLファイルやJavaScriptファイルを読み込んで実行したり、PHPへデータを渡すことができます。

ぜひご自身でソースコードを書いて、理解を深めてください。

FEnet.NETナビ・.NETコラムは株式会社オープンアップシステムが運営しています。

株式会社オープンアップシステムはこんな会社です

秋葉原オフィスには株式会社オープンアップシステムをはじめグループのIT企業が集結！
数多くのエンジニアが集まります。

スマホアプリから業務系システムまで

スマホアプリから業務系システムまで開発案件多数。システムエンジニア・プログラマーとしての多彩なキャリアパスがあります。
充実した研修制度

毎年、IT技術のトレンドや社員の要望に合わせて、カリキュラムを刷新し展開しています。社内講師の丁寧なサポートを受けながら、自分のペースで学ぶことができます。
資格取得を応援

スキルアップしたい社員を応援するために資格取得一時金制度を設けています。受験料(実費)と合わせて資格レベルに合わせた最大10万円の一時金も支給しています。
東証プライム上場企業グループ

オープンアップシステムは東証プライム上場「株式会社オープンアップグループ」のグループ企業です。

安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。

株式会社オープンアップシステムに興味を持った方へ

株式会社オープンアップシステムでは、開発系エンジニア・プログラマを募集しています。

年収をアップしたい！スキルアップしたい！大手の上流案件にチャレンジしたい！
まずは話だけでも聞いてみたい場合もOK。お気軽にご登録ください。

株式会社オープンアップシステムへ応募する
会員登録不要! カンタン45秒!

jQueryでAjax通信を行う方法とは？Ajax通信を正しく使いこなそう！

jQueryでAjax通信を行う方法とは？

Ajaxとは

HTMLファイル読み込み

PHPへデータを渡す

JavaScriptファイル読込み

まとめ

株式会社オープンアップシステムはこんな会社です

スマホアプリから業務系システムまで

充実した研修制度

資格取得を応援

東証プライム上場企業グループ

株式会社オープンアップシステムに興味を持った方へ

新着案件New Job

開発エンジニア/東京都品川区/【WEB面談可】/在宅ワーク

遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク

病院内システムの不具合対応、保守/東京都豊島区/【WEB面談可】/テレワーク

開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク

債権債務システム追加開発/東京都文京区/【WEB面談可】/在宅勤務

PMO/東京都豊島区/【WEB面談可】/在宅勤務

jQueryでAjax通信を行う方法とは？Ajax通信を正しく使いこなそう！

jQueryでAjax通信を行う方法とは？

Ajaxとは

HTMLファイル読み込み

PHPへデータを渡す

JavaScriptファイル読込み

まとめ

株式会社オープンアップシステムはこんな会社です

スマホアプリから業務系システムまで

充実した研修制度

資格取得を応援

東証プライム上場企業グループ

株式会社オープンアップシステムに興味を持った方へ

新着案件New Job

開発エンジニア/東京都品川区/【WEB面談可】/在宅ワーク

遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク

病院内システムの不具合対応、保守/東京都豊島区/【WEB面談可】/テレワーク

開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク

債権債務システム追加開発/東京都文京区/【WEB面談可】/在宅勤務

PMO/東京都豊島区/【WEB面談可】/在宅勤務

関連記事Related Posts

jQueryでのクリックイベント on(click) の使い方とは？offメソッドについても紹介！

jQueryのloadとは？loadの使用方法やjQueryを使わずにloadを行う方法を紹介

jQueryでのValidationの使い方を紹介！Validationを正しく使いこなそう！

jquery.cookie.jsの操作方法を解説｜サンプルコードも紹介

JavaScriptでのStringの使い方｜各メソッドをコード付きで紹介