.net column
.NET開発者のためのブログメディア

社内サーバー

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

2021年02月26日

SE
Ajax通信を行う方法を教えてください。

PM
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を作成します。

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

次に、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を作成します。

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

JavaScriptファイル読込み

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

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

SE
XAMPPをインストールすることでAjax通信できるのですね。

PM
Ajaxはページを読みこむ必要がなくなる便利な機能です。ぜひ機能をマスターしましょう。

まとめ

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

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


.NET分野でのキャリアアップをお考えの方は、現在募集中の求人情報をご覧ください。

また、直接のエントリーも受け付けております。

エントリー(応募フォーム)

Search

Popular

reccomended

Categories

Tags