【PHP・jQuery】Ajaxを使ってページの一部を更新する方法

ページの一部のみリロードをさせたいときに、なんかいい方法無いかなぁって思って調べたらajaxっていうのがあったので使ってみた時の備忘録

Ajaxとは

Asynchronous JavaScript + XMLの略で非同期通信ができるもの
身近で使っているものとしてgooglemapとかがそうみたい
用途としては、画面全体をリロードしたくない、サイトの一部分だけ読みこみなおしたいって時に使うみたい

試しに使ってみた

そしてソースコード

<a href="http://localhost/T_twotone/">MyBlog-top</a>
<a href="https://twotone.me/diary/">MyBlog-diary</a>
<a href="https://twotone.me/web/">MyBlog-web</a>

<div id="ajax"></div>

<script type="text/javascript">
$(function () {
    $('a').click(function (event) {
        event.preventDefault();
        var a_link = $(this).attr('href');//クリックしたリンク取得
        $.ajax({
            url: a_link,
            cache: false,
            type: 'POST',
            data: {val:"test"},
            timeout: 10000,
            dataType: 'html'
            }).done(function (data) { //Ajax通信に成功したときの処理
                alert('success');
                $("#ajax").html(data);//#ajaxに指定したページを表示
            }).fail(function (data) { //Ajax通信に失敗したときの処理
                alert('error');
            }).always(function (data) { //処理が完了した場合の処理
                // alert('always');
        });
    });
});
</script>

基本的には参考サイトのままなのでリンク貼っとく

メモ

event.preventDefault()で「aタグに指定されたURLへの遷移」をしないようにしている

data: {val:"test"}はクエリーパラメータっていうみたい
GETメソッドで通信すればURLにURL/?val=testって感じで付くみたい

注意：外部サイトをAjaxを使って読み込もうとするとエラーになる

ドメインに属さないURLを読み込もうとするとAccess to XMLHttpRequest at '○○' from origin '××' has been blocked by CORS policyってエラーになるわ

なんかAjaxとかの通信だと通常のサーバーへリクエスト出すのとは違って「CORS(Cross Origin Resourse Sharing)」ってルールがあるみたい
許可がないと異なるドメインの情報を非同期で取得することはできないっぽい

一応対応方法もあるみたい

注意：jQueryのバージョンによって書き方が違うみたい

なんかjQueryのバージョンによってAjaxの書き方がことなるみたいね