wie URL in der Adressleiste ändern, ohne die Seite neu zu laden

Question

Ich habe http://mysite.com/index.php.

Und ein Untermenü

• home =>http://mysite.com/index.php
• über uns =>http://mysite.com/about.us.php
• Produkte =>http://mysite.com/products.php

Aber ich möchte http://mysite.com/index.php jede Anforderung verarbeiten, und nur Ändern Sie den Inhalt mithilfe der Ajax-Anforderung. Auf diese Weise lädt die Site nur den Inhaltsteil und ist viel schneller und einfacher zu navigieren.

Das Problem hier ist SEO, weil das einzige URL Google sieht http://mysite.com/index.php ist, und ich mag http://mysite.com/about-us zum über sie Inhalt verknüpfen, http://mysite.com/product die Produkte Inhalt usw.

Ich weiß, Ich kann das mit PHP machen, indem ich einfach die URL lese und den Ajax im laufenden Betrieb schreibe, aber dabei wird die ganze Seite jedes Mal neu geladen. Gibt es eine Möglichkeit, dies zu tun, ohne die gesamte Seite neu zu laden? Was ich denke, ich brauche einen regulären Anker im Untermenü, zum Beispiel auf "http://mysite.com/contact-us", aber wenn geklickt, anstatt diese Seite zu öffnen, bearbeiten Sie die Ajax Anfrage.

Und wenn das möglich ist, wird Google dies wahrscheinlich als schwarzen Hut sehen, oder?

Grüße Alex

Answer 1

können Sie die URL in der Adressleiste ändern, ohne die Seite zu ändern, weil der Lage sein zu tun, dass ich couldlet Sie mich bei http://www.imhackingyou.com/sucker besuchen, aber die addressbar ändern http://www.bankofamerica.com/login

Answer 2

lesen

Dies ist ein Routing-Problem, kein AJAX-Problem.

Wenn Sie ein anderes Werkzeug wurden mit (Husten ASP.NET MVC Husten), dann würden Sie nur eine Route hinzufügen (und ich bin zuversichtlich, eine Art und Weise gibt es diese in PHP zu tun), die URLS wie

akzeptiert

/home 
/products 
... 

und schreckte sie auf, sagen wir,

/index.php?area=home 
/index.php?area=products 

Dies wird typischerweise mit einer Rewrite-Engine erreicht, wenn außerhalb eines guten MVC oder RESTful URL-System verwendet. Ich benutze ISAPI Rewrite auf IIS, aber wenn Sie auf dem LAMP-Stack arbeiten, denke ich, Apache bietet ein Modul, das die gleichen Funktionen bietet. (Google .htaccess)

WARNUNG: GESCHIMPFE FOLGT

Und für das, was es wert ist,

1. Vermeiden Sie versuchen, Ihre gesamte Anwendung in JavaScript zu schreiben. Der Server ist aus einem bestimmten Grund da.Teil Ihrer Aufgabe als Webentwickler ist es, so viel Arbeit wie möglich auf Ihren Server zu übertragen. Browser-Leistung und Kompatibilitätsprobleme werden Sie verrückt machen, wenn Sie versuchen, alles auf dem Client zu tun.

2. Die Vermeidung von Postbacks ist in vielen Situationen sinnvoll, aber es ist kein Wundermittel, das Sie auf jede Seite anwenden sollten. Normalerweise macht es Sinn, eine neue Seite zu laden, wenn auf einen Link geklickt wird. Es ist das, was der Benutzer erwartet, es ist stabiler (da der Großteil der benötigten Infrastruktur serverseitig ist) und es ist nicht langsamer als eine AJAX-Anfrage, um dasselbe zu erhalten.

Regeln:

1. NIEMALS die Zurück-Taste brechen. Ohne sorgfältige Planung brechen die meisten AJAX-Apps diese Regel.
2. Siehe Regel # 1.

Answer 3

Das klingt wie es mit einem rewrite engine erreicht werden sollte, aber davon aus, dass Sie einen guten Grund haben AJAX zu verwenden, können Sie URLs mit Javascript ändern, indem Sie den Abschnitt nach dem Hash-Modifikation, oder besser noch, die Hash-Bang:

window.location.hash = "#!about-us"; 

• http://mysite.com/
• http://mysite.com/#!about-us
• http://mysite.com/#!products

Für weitere Informationen über die Hash-Bang von einer SEO Perspektive Besuche http://www.seomoz.org/blog/how-to-allow-google-to-crawl-ajax-content

Answer 4

Wie Shopify es dann tun? Gehen Sie auf ihrer Website, klicken Sie auf den Link Eigenschaften und Sie werden die URL sehen, sagt:

http://www.shopify.com/tour/sell-online

Klicken Sie dann auf einen der Sub-Links und Sie werden sehen, dass die Adresse in der URL-Änderungen ohne Verwendung ein Hash, aber es gibt keinen Seitenumbruch.

Ich glaube nicht, dass sie Ajax verwenden, um den Inhalt zu ändern, weil es scheint, dass alle in versteckten divs auf der Seite enthalten sind, aber unabhängig davon können Sie die URL mit Client-Tricks ändern.

Answer 5

HIER gibt es eine Lösung:

window.history.pushState(data, title, url) 

Hier Rob erklärt, wie es funktioniert, und Sie haben ein funktionierendes Beispiel:

http://moz.com/blog/create-crawlable-link-friendly-ajax-websites-using-pushstate