WordPress.org
Get WordPress

Make WordPress Core

Ticket #16339: pushstate.php

File pushstate.php, 2.9 KB (added by mdawaffe, 14 years ago)
Line 
1<?php
2
3if ( 'POST' == strtoupper( $_SERVER['REQUEST_METHOD'] ) && 'true' == $_POST['__do_ajax'] ) {
4        header( 'Expires: Wed, 11 Jan 1984 05:00:00 GMT' );
5        header( 'Last-Modified: ' . gmdate( 'D, d M Y H:i:s' ) . ' GMT' );
6        header( 'Cache-Control: no-cache, must-revalidate, max-age=0' );
7        header( 'Pragma: no-cache' );
8
9        $action = empty( $_POST['action'] ) ? false : $_POST['action'];
10
11        echo output( $action );
12        echo "<pre>";
13        var_dump( $_POST );
14        echo "</pre>";
15        exit;
16}
17
18function output( $action = false ) {
19        switch ( $action ) {
20        case false :
21                return 'Original';
22        case 'one' :
23                return 'The loneliest number';
24        case 'two' :
25                return 'Can be as bad as one';
26        case 'three' :
27                return 'Not the mama';
28        default :
29                return '????';
30        }
31}
32
33?>
34<html>
35<head>
36<title>pushState()</title>
37<script type="text/javascript" src="/wordpress/wp-includes/js/jquery/jquery.js"></script>
38<script type="text/javascript">
39(function($) {
40
41if ( !window.history.pushState ) {
42        return;
43}
44
45var baseHref = document.location.href.split( '?' )[0],
46    originalHref = document.location.href,
47    doAJAX, getState, response;
48
49doAJAX = function( state ) {
50        response.load( 'pushstate.php', $.extend( { '__do_ajax' : 'true', '__random' : Math.random() }, state  ) );
51};
52
53getState = function( url ) {
54        var href, state, queryParams, queryParam;
55
56        href = url.replace( /https?:\/\/.*?(\/.*$)/, '$1' ).split( '?' );
57
58        if ( 'undefined' == typeof href[1] ) {
59                href[1] = '__do_ajax=true';
60        }
61
62        queryParams = href[1].split( '&' );
63
64        state = { __path: href[0] }; // state object holds the URL's path ...
65
66        // ... and the query parameters
67        $.each( queryParams, function( i ) {
68                queryParam = queryParams[i].split( '=' );
69                state[decodeURIComponent( queryParam[0] )] = decodeURIComponent( queryParam[1] );
70        } );
71
72        // state object, query string
73        return [ state, '?' + href[1] ];
74};
75
76
77$( function() {
78        // Define after onReady so we don't capture original popState event (Is this necessary?  Is there any such event?)
79        window.onpopstate = function( event ) {
80                var state = event.state ? event.state : getState( document.location.href )[0];
81
82                // do AJAX
83                doAJAX( state );
84        };
85
86        response = $('#response');
87   
88        $('ul a').click( function() {
89                // This is not the URL you are looking for
90                if ( 0 != this.href.indexOf( baseHref ) ) {
91                        return;
92                }
93
94                var state, queryString;
95
96                state = getState( this.href );
97                queryString = state[1];
98                state = state[0];
99
100                // Update the address
101                window.history.pushState( state, $(this).text(), queryString );
102
103                // do AJAX
104                doAJAX( state );
105
106                return false;
107        } );
108} );
109
110})(jQuery);
111</script>
112</head>
113<body>
114<ul>
115        <li><a href="?action=one&amp;foo=bar">One</a></li>
116        <li><a href="?action=two&amp;foo=pub">Two</a></li>
117        <li><a href="?action=three&amp;foo=boozeria">Three</a></li>
118        <li><a href="http://example.com/">Other</a></li>
119</ul>
120
121<p id="response"><?php echo htmlspecialchars( output( empty( $_GET['action'] ) ? false : $_GET['action'] ), ENT_NOQUOTES ); ?></p>
122</body>
123</html>