XMLHttpRequest for refreshing a page on external call

Say I have page1.html, and this is a queue list of people waiting to see me.

I have access to page2.html, which I use to see the list, and call specific people. When I click on a name on page2.html, page1.html is supposed to append a class to that person's name (which uses css3 animations to make it blink).

The example is lame, but you get what I'm trying to do here... I have read a little bit about XMLHttpRequests, and the 'onreadystatechange', bu开发者_C百科t I'm not sure how this works...

Ideas...

I suppose you could do it like this. Have your page2.html update a database when you click on a person's name. You can flag that person in your database when you click on his name on page2.html

Now on the other end make your page1.html continuously query the database in the background in a JavaScript loop. On requesting the information from the database you can accordingly update page1.html

I hope you get it. Do let me know if there are any loop holes.

This link might be of help: PHP long polling, without excessive database access

What you can do is use the XMLHttpRequest to load data from your page1.html and display it on your page2.html accordingly. You would have to use the request on page2 and return the data on page1.

You can think of page2 as your frontend or client where you would have to interpret the information and display it (in your example display the list and change the class of the person), while page1 is your backend that provides the information for your page2.

For further information about XMLHttpRequests or the concept that it's used for I suggest you have a look at the examples here: https://developer.mozilla.org/en/AJAX

As far as I understand you want to update page1 when you click on person's name on page2. I think there are some cases here:

1. page2 is a dialog window. When you click a name it can be directly manipulated on page1. No XMLHttpRequest needed here.
2. page2 is a pop-up window. Almost the same. This article may help you about this one.
3. page2 is a standalone page, in a different tab/window. Here you need an ajax ( XMLHttpRequest ). When you click on name, this action should be write down somewhere ( server-side, sql or something ), and page1 should check for any changes at some time interval.

I did get a fair number of responses, and while the majority of them required constant javascript pinging or somewhat roundabout approaches (such as Reverse AJAX or COMET, Long Polling, etc.), they each solved the problem.

Nonetheless, a little extra digging, and I found a nugget of tech that fits exactly:

HTML5's Server-Sent Events (http://dev.w3.org/html5/eventsource/)

This allows the client to declare itself as a 'recipient' of communication from the server, effectively reversing the 'Request first, serve later' approach that is dominant in web technology. The server can initiate communication with the client, without an initial request, allowing me to push updates to clients as and when they become available (such as DB changes).