第23章　jQuery - AJAXの紹介

# **jQuery - AJAXの紹介**

***

AJAXは、ページ全体を再ロードすることなく、サーバーとデータを交換し、Webページの一部を更新する技術です。

## **AJAXとは何ですか？**

AJAX =非同期のJavaScriptとXML。

要するにAJAXは、ページ全体を再ロードせずに、バックグラウンドでデータをロードしてWebページに表示することを目的としています。

AJAXを使用したアプリケーションの例：Gmail、Google Maps、Youtube、Facebookの各タブ。

## **jQueryとAJAXはどうですか？**

jQueryはAJAX機能のためのいくつかのメソッドを提供します。

jQuery AJAXメソッドを使用すると、HTTP GetとHTTP Postの両方を使用してリモートサーバーからテキスト、HTML、XML、またはJSONを要求できます。そして、外部データをWebページの選択されたHTML要素に直接ロードできます。

## **ajax()の書き方**

ajaxはscriptタグ内に処理を書くことができます。  
```
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  $( function() {
    $.ajax( {
      //実行する処理。
    } );
  } );
```

今回はローカルにあるファイルをリロードなしで読み込んでみましょう。  
Chromeではローカルファイルの読み込みができないのでChrome以外のブラウザで実行するようにしてください。

[sample23-1.html]  
```
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CSS overflow</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
      $(function() {
        $('#button').click(
          function() {
            $.ajax({
              url: 'sample.html',
              dataType: 'html',
              success: function(data) {
                $('#text').html(data);
              },
              error: function(data) {
                alert('error');
              }
             });
          }
        );
      });
    </script>
  </head>
  <body>
    <input type="button" id="button" value="button"/>
    <br/>
    <div id="text"></div>
  </body>
</html>
```  
<br>
[sample.html]  
```  
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CSS overflow</title>
  </head>
  <body>
    <p>Sample</p>
  </body>
</html>
```

## **実行結果**
<a href="https://i.loli.net/2020/03/24/JTiF5cybqCYGl2B.png" target="_blank"><img src="https://i.loli.net/2020/03/24/JTiF5cybqCYGl2B.png" ></a>

ボタンを押してみて、ボタンの下にsample.htmlの内容が表示されれば成功です。  
リロードせずに表示できていることがわかります。

content

第23章 jQuery - AJAXの紹介

第23章　jQuery - AJAXの紹介