web-dev-qa-db-ja.com

URLでAjaxリクエストを表示するにはどうすればよいですか？

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

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

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

#calendar=10_2010&tabview=tab2

calendarやtabviewのようなリンクに変数を含める必要があるので、再読み込みせずに1つのページで複数のものを変更できます。

または、 http://www.wbhomes.com.a のような別の形式、これは正確に私が欲しいものですが、最初の形式も良いですが、これはたくさんありますより美しく。

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

要件

  • メールの例から、またはURLバーに書き込むだけの場合は、どこからでもアクセスする必要があります。

  • リンクは履歴にあるはずなので、戻るまたは進むボタンを押すと、ページにアクセスする必要があります。

  • ページの更新も機能する必要があります。

いくつかのリソース：

例：

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

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

phpajaxurl-rewritingfragment-identifierhashchange
31
Adam

あなたの質問にリンクされているデモの場合、その機能を実現することは実際には本当に簡単です-それはAJAXをまったく使用しないので（あなたがAJAX =ミックスすると、さらに難しくなります-後で説明します）その機能を実現するには、リンクをアップグレードしてハッシュを使用し、hashchangeイベントにバインドします。残念ながら、hashchangeイベントはクロスブラウザー互換ではありませんが、幸いなことにあります。多くの「履歴/リモートプラグイン」が利用可能です-長年にわたって私たちが好んだものはjQuery Historyであることが証明されており、オープンです-ソース、素晴らしいサポートを得て、積極的に開発されています:-)。

ただし、FacebookなどのサイトのようなミックスにAJAX機能を追加することになると、 WBHomes および Balupton.com から開始します一連の深刻な困難な問題に直面すること！（私は最後の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 hashchange機能を非推奨にするHTML5History API（pushState、popState）があります。 History.js はjQuery Historyの後継であり、HTML5 History APIのブラウザー間の互換性と、HTML4ブラウザーの オプションhashchangeフォールバックを提供します。 jQuery AjaxyはHistory.js用にアップグレードされます

25
balupton

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

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

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

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

1
KakambaWeb

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;
}​
1
gblazex

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

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

window.sethash（ "＃newsection"）;
1
Adrian A.

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

0
Jungle Hunter

ハッシュリンクを使用すると、ページをリロードする代わりに、ブックマーク可能/共有可能なリンクでJavaScriptコードをトリガーできます。 Ben Almans jQuery hashchange event イベントハンドラーを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が提供する機能が失われます。これは、ポータブルソリューションにとって非常に重要です。

0
thnee

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

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

次に、ここで見つけることができるベンアルマンによるjQueryハッシュ変更プラグインが必要になります： 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で、リンクがハッシュ変更をトリガーするようにする必要があります。これを行うには、？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' );

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

0
Kelly Copley