CODEWITHSUNDEEP
javascriptjqueryajaxjquery-events
rev
rev

Reputation: 1861

AJAX event for when the server receives the request - before processing it

I'm currently developing a class in PHP that makes cURL requests and returns the answer as JSON for it to be processed by jQuery on my page. So far — no problems. (Note that the only way for me to load that content is by using my own server - I'm querying a website's API with my private API key)

The problem is that some pages are slow (because of their server), and that plus the request to my server with jQuery makes it long to load a page, which makes around 5 seconds (or more) with no feedback at all for the user.

What I was wondering if there's any jQuery event for $.ajax which is called when the request is sent to the server (meaning that the server also started loading the requested page), but before the actual request to my page ended.

I'm trying to achieve this:

*user click* (0)
Sending request... (1)
Request sent. Loading page... (2)
Page loaded. (2)

As a side note: I'm using jQuery, but I have no problems in using plain JavaScript if needed.

Upvotes: 0

Views: 1394

Answers (3)

Felipe T.
Felipe T.

Reputation: 637

Maybe something like this can perform what you want:

xmlhttp.onreadystatechange = function () {
  if (xmlhttp.readyState == 2) {
    alert("loading page");
  }
}

XMLHttpRequest has this states: 0: request not initialized 1: server connection established 2: request received 3: processing request 4: request finished and response is ready

I don't know if this really works. I never had to use a differente state of 4.

Upvotes: 3

Paulo Roberto Rosa
Paulo Roberto Rosa

Reputation: 3285

The Ajax have the default events that can be handled with here on the reference: http://api.jquery.com/jquery.ajax/

But i'll do a sample to you see how it works.

The HTML code for a sample: 

<input type=button id=yourButtonID name=yourButtonID>

-> (0) - The onClick event. 

$("#yourButtonID").click(AjaxFunction());

-> (1), (2), (3) The AjaxFunction.

function AjaxFunction(){

  $.ajax({
    url: "http://www.stackoverflow.com"
  }).beforeSend(function() {
    //show the ajax image
  }).done(function(data) {
    alert(data);
  }).fail(function() {
    alert("sorry, it failed");
  }).success(function() {
    alert("Sucess!");
  });
}

If you want to show to the user that the Request is happening, you just need to show to the user a ajax loading image on the beforeSend event, like that one:

Ajax loading

Something like onSend is the beforeSend because it executes before sending, and while are you sending, why you would fire a event?

Basically, ajax is a useful tool to make XHR's (XMLHTTPRequest's) that have pre-made events that you can use before you send the request, when your request is done, and if it fails, and if it success.

Upvotes: 2

CodeToad
CodeToad

Reputation: 4724

Basically, you want two responses from server: the first as soon as it receives your request, and the second containing the payload from the other server.

Since a regular ajax HTTP request can only have one response, you could use web sockets instead. This allows the server to 'push' data to the client.

see the links below:

https://developer.mozilla.org/en-US/docs/WebSockets

http://www.html5rocks.com/en/tutorials/eventsource/basics/

Upvotes: 0

Related Questions