php - URLでAjaxリクエストを表示するには?

Question

私が欲しいのは、ページの一部を変更するリンクと、そのための動的 URL で、次のような変数を指定できるようにすることです。#calendar=10_2010tabview=tab2

Check this for an exact example: 正確なデモについては、ここをクリックしてください

だからここに私が必要とするリンク形式があります：

#calendar=10_2010&tabview=tab2

calendarなどのリンクに変数が必要なtabviewので、再読み込みせずに 1 つのページで複数の項目を変更できます。

またはhttp://www.wbhomes.com.auのような別の形式、これはまさに私が望むものですが、最初の形式も優れていますが、これははるかに美しいです。

http://wbhomes.com.au/#/propertiesforsale/houseandland/quinnsbeach-waterland1

要件

たとえば、メールから、または URL バーに書き込むだけの場合は、どこからでもアクセスする必要があります。
リンクは履歴にあるはずなので、戻るボタンまたは進むボタンを押すと、ページにアクセスする必要があります。
ページの更新も機能する必要があります。

いくつかのリソース:

例:

www.developer.yahoo.com/
www.facebook.com - プロフィールページのサイドバーリンク
www.wbhomes.com.au/ - 私が望むものに 100% 近い
www.flickr.com/
www.youtube.com

いくつかのチュートリアル:

私を助けてください！これを行うための解決策を見つけたことはありませんが、jquery や API、ライブラリを使用したくありません。動作するJavascript/AJAXスクリプトPHPが必要です。

score 25 · Accepted Answer

質問にリンクされているデモの場合、その機能を実現するのは実際には非常に簡単です-AJAXをまったく使用しないためです（AJAXをミックスに追加し始めると、より難しくなります-後で説明します）。その機能を実現するには、次のようにします。ハッシュを使用するようにリンクをアップグレードしてから、hashchange イベントにバインドします。残念ながら、hashchange イベントはブラウザ間の互換性がありませんが、幸いなことに、多くの「履歴/リモートプラグイン」が利用可能です。ここ数年で推奨されているプラグインはjQuery Historyであることが証明されており、オープンソースであり、優れたサポートを受けており、積極的に開発されています。 -)。

ただし、Facebook、 WBHomes、Balupton.comなどのサイトに AJAX 機能を追加するとなると、非常に困難な一連の問題に直面することになります。(私は最後の 2 つのサイトのリードアーキテクトだったので知っています!)。これらの問題のいくつかは次のとおりです。

特定の内部リンクを適切かつ簡単にアップグレードして履歴と AJAX 機能を使用し、ハッシュが変更されたことを検出する方法は? 他のリンクは以前と同じように機能し続けます。
「www.yoursite.com/myapp/a/b/c」から「www.yoursite.com/myapp/#/a/b/c」にリダイレクトするには? 必要な 3 つのリダイレクトが可能な限りスムーズになるように、ユーザーのエクスペリエンスをスムーズに保ちます。
AJAX を使用してフォームの値とデータを送信し、ハッシュを更新する方法は? Javascript をサポートしていない場合はその逆です。
AJAX リクエストが必要としているページの特定の領域を検出する方法は? サブページが正しいページで表示されるようにします。
AJAX の状態が変化したときにページタイトルを変更するにはどうすればよいですか? およびその他の非ページコンテンツ。
AJAX の状態が読み込まれて変更されている間に素敵なイントロ/アウトロ効果を実行するにはどうすればよいですか? ユーザーが暗闇の中に取り残されないように。
AJAX 経由でログインするときにサイドバーのログイン情報を更新するにはどうすればよいですか? 明らかに、左上にあるログインボタンをもう表示したくありません。
JS が有効になっていないユーザーのために Web サイトを引き続きサポートするにはどうすればよいですか? 正常に劣化し、検索エンジンによって引き続きインデックス可能になるようにします。

私が知っている唯一のオープンソースで信頼できるプロジェクトで、前述の非常に困難な問題をすべて解決しようとしていることが証明されているのはjQuery Ajaxyです。これは事実上、前述の jQuery History プロジェクトの拡張機能であり、AJAX 機能をミックスに追加するための優れたエレガントな高レベルインターフェイスを提供し、舞台裏でこれらの困難な問題を処理するため、それらについて心配する必要はありません。これは、前述の最後のいくつかの商用サイトで使用されたソリューションでもあります。

頑張ってください。さらに質問がある場合は、この回答にコメントを投稿してください。できるだけ早く回答します:-)

更新: HTML4 機能を廃止する HTML5 History API (pushState、popState) が追加されましたhashchange。History.jsは jQuery History の後継となり、HTML5 History API のクロスブラウザー互換性と、HTML4 ブラウザーのオプションの hashchangeフォールバックを提供します。jQuery Ajaxy は History.js 用にアップグレードされます

score 1 · Accepted Answer

Szevasz.. :)

HTML

<a href="/bye.php?user=abc&page=messages" 
   onclick="return goToWithAjax(this);">bye</a>

Javascript

function goToWithAjax(hash) {
  hash = hash.href ? hash.getAttribute("href", 2) : hash;
  ajax( hash, function( response ) {
    document.getElementById("content").innerHTML = response;
  });
  hash = ("#!/" + hash).replace("//","/");
  window.location.hash = hash;
  return false;
}

//////////////////////////////////////////////////////////////////////////////

function getXmlHttpObject() {
    var xmlHttp;
    try {
        xmlHttp = new XMLHttpRequest();
    } catch (e) {
        try {
            xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
    }
    return xmlHttp;
}

function ajax(url, onSuccess, onError) {
    var xmlHttp = getXmlHttpObject();
    xmlHttp.onreadystatechange = function () {
        if (this.readyState == 4) {
            // onError
            if (this.status != 200) {
                if (typeof onError == 'function') {
                    onError(this.responseText);
                }
            }
            // onSuccess
            else if (typeof onSuccess == 'function') {
                onSuccess(this.responseText);
            }
        }
    };
    xmlHttp.open("GET", url, true);
    xmlHttp.send(null);
    return xmlHttp;
}

score 1 · Accepted Answer

HTML5 に存在するonHashChangeイベントを使用するか、HTML 5 を完全にサポートしていないブラウザーでその「ハッシュ」動作をエミュレートする JavaScript ライブラリを使用すると、非常に簡単にそれを行うことができると思います。そのようなライブラリの 1 つにMooTools onhashchangeがありますが、他にも多くのライブラリがあります。

HTML 5 対応のブラウザや、動作をエミュレートするライブラリを使用している場合よりも、次のようにします。

window.sethash("#newsection");

ユースケースのシナリオに応じて、javascript から新しいものに変更したり、その onHashChange イベントへのコールバックを傍受したりします。

score 1 · Accepted Answer

CorMVC Jquery フレームワークはそのように行われ、ソースを掘り下げてそこからロジックを取得できるオープンソースです。

実際、それはかなり簡単です。作成者は、下のこのビデオでそれをうまく伝えています。

http://www.bennadel.com/resources/jing/2009-12-21_0933.swf

PS申し訳ありませんが、2番目のリンクを投稿できませんbc私は新しいユーザーです。

score 0 · Accepted Answer

ハッシュリンクを使用すると、ページをリロードする代わりに、ブックマーク可能/共有可能なリンクで JavaScript コードをトリガーできます。Ben Almans jQuery hashchange イベントを使用すると、イベントハンドラーを hashchange イベントにバインドできます。このプラグインは、これを通常サポートしていない古いブラウザーで動作します。hashchange にバインドされたイベントハンドラーは、URL のハッシュ部分を読み取り、任意の関数を呼び出すことができます。

// register event handler
function bindHashchange() {

    $(window).bind('hashchange', function(event) {
        event.preventDefault();
        var label = location.hash.substring(1);
        handleLabel(label);
    });

    // trigger event so handler will be run when page is opened first time
    // otherwise handler will only run when clicking on hash links
    $(window).trigger('hashchange');
}

// read and handle hash part of url
function handleLabel(label) {

    if ( label.length > 0 ) {
        // using label from url
        switchPage(label);
    } else {
        // use the default label, if no hash link was present
        switchPage('start');
    }
}

// in this case, load hidden <div>'s into a <div id="content">
function switchPage(label) {
    if ( label == 'start ) {
        $('div#content').html($('div#start'));
    } else if ( label == 'some_other_page' ) {
        // do something else
    }
}

この他のイベントハンドラーは、同じ URL 内のドット ('.') で区切られた 2 つの引数を処理できます。

function processHash() {

    var str = location.hash.substring(1);
    var pos = $.inArray('.', str);

    var label = '';
    var arg = '';

    if ( pos > -1 ) {
        label = str.substring(0, pos);
    } else {
        label = str.substring(0);
    }

    if ( pos > 1 ) {
        arg = str.substring(pos+1);
    }

    if ( label.length == 0 ) {
        // the default page to open of label is empty
        loadContent('start');
    } else {
        // load page, and pass an argument
        loadContent(label, arg);
    }
}

正規表現を使用すると、任意の文字の組み合わせを解析できます。

var registry = {};

// split on character '.'
var args = label.split(/\./g);

for ( i in args ) {
    var arg = args[i];

    // split on character '='
    var temp = arg.split('=');
    var name = temp[0];
    var value = temp[1];

    // store argument in registry
    registry[name] = value;
}
// registry is loaded, ready to run application that depends on arguments

これにより、URLが変換されます:

mysite/#company.page=items.color=red

次の JavaScript オブジェクトに:

オブジェクト { company=undefined, page="items", color="red"}

次に、選択した要素に対して jQuery の show() または hide() 関数を実行するだけです。

これを jQuery 以外の JavaScript に変換することはできますが、移植可能なソリューションにとって重要な Ben Alman が提供する機能を失うことになります。

score 0 · Accepted Answer

必要なのは、既存の多くのライブラリを使用して実行できる履歴をサポートする方法です。history の YUI 3 ページをAJAX読むことをお勧めします。

score 0 · Accepted Answer

これは、ほとんどの新しい AJAXian 開発者が避けていることです。解決するのはかなり簡単な問題ですが。

最初に必要なのは、jquery.com で無料で入手できる jQuery コアです。

次に、Ben Alman による jQuery hash change even プラグインが必要になります。これは、http: //benalman.com/projects/jquery-hashchange-plugin/で見つけることができます。html5 をサポートする新しいバージョンのブラウザーでは、これは必要ありません。 hashchange イベントですが、古いバージョンのブラウザーの場合はそうします。何もする必要はありませんが、このスクリプトをページに含めるだけで、残りは処理されます。

リンクについては、次のようにクエリ文字列の方法で作成する必要があります。

<a href="user.php?q=/topic/article" class="dynlnk">Link Text/Image</a>

これで、ページに移動するリンクがあり、javascript がオフになっている場合に php で処理できます。スーパーグローバルな $_GET を使用し、クエリ文字列を解析してページコンテンツを処理するだけです。

ページのJavaScriptで、リンクがhashchangeをトリガーするようにする必要があります。このように ?q= を # に置き換えることでそれを行うことができます。

$(".dynlnk").each(function(){
    $(this).attr("href", $(this).attr("href").replace("?q=", "#"));
});

これで、リンクがハッシュ変更をトリガーします。あとは、ハッシュ変更を何かを行う関数にバインドするだけです。これは、次のように jQuery を使用して非常に簡単に実行できます。

$(window).bind( 'hashchange', function(e){

    //this splits the part after the hash so you can handle the parts individually.
    //to handle them as one just use location.hash
    pageparts = location.hash.split("/");

});

ここで、ajax とコンテンツを処理するために行うコードを追加するだけです。

ページが最初にハッシュでロードされた場合に備えて、ハッシュチェンジをトリガーするためにJavaScriptの最後のビットが必要なだけなので、ページがロードされたときにWindowsトリガー関数を呼び出すだけです

$(window).trigger( 'hashchange' );

これが十分に明確であることを願っています。そうでない場合は、遠慮なく私に連絡してさらに質問してください。

php - URLでAjaxリクエストを表示するには?

7 に答える 7

Related

Reference