SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast SimonJ621's Avatar
    Join Date
    Mar 2006
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    AJAX request not always responding

    Hi all,

    I have a script that runs an asynchronous server request as you type in a text field. The specific event I use is onKeyUp to trigger the function.

    However, when typing too fast in the text fields, the last request does not always return a response. Perhaps it is because I abort the response at the beginning of each call, but without doing so I run into errors and the server locks up certain times.

    I have thought about trying to use some sort of timing method to send calls on some conditional basis, but haven't been able to figure anything out, which is why I post here. Any suggestions for solving this problem would be appreciated. Following is the relevant code.

    Function envoked with onKeyUp:
    HTML Code:
    function getResults() {
    	request.abort();
    	var x1 = document.getElementById("x1").value;
    	var x2 = document.getElementById("x2").value;
    	var x3 = document.getElementById("x3").value;
    	if (x1 == "" && x2 == "" && x3 == "") {
    	} else {
    		city = Trim(x2);
    		college = Trim(x3);
    		if (x1 == "" && x2 == "" && x3 == "") {
    		} else {
    			var url = "[url+querystring]";
    			request.open("GET", url, true);
    			request.onreadystatechange = updatePage;
    			request.send(null);
    		}
    	}
    }

    Function to collect response:
    HTML Code:
    function updatePage() {
    	var t = setTimeout("request.abort()", 10000);
    	if (request.readyState == 4) {
    		try {
    			if (request.status == 200) 
            {....} catch (requestMessedUp) {
    			request.abort();
    		}     

  2. #2
    SitePoint Addict
    Join Date
    Apr 2001
    Location
    Devon, UK
    Posts
    333
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    I'd recommend you use Firefox and Firebug to watch your AJAX calls and see what happens. If you're using IIS under XP, it does limit the number of server requests that can be made.

    OnKeyUp may not be the best event to use, either; it differs across browsers quite considerably and can rarely be canceled. I'd recommend onkeypress.

    Finally, perhaps you could ensure that the user has finished typing for a long enough period before the AJAX request is made, e.g...

    When a keypress occurs, start a setTimeout to call your updatePage() function after, say, 300 milliseconds. Any subsequent keypress would cancel that timeout (clearTimeout) and start a new one.

    Hope that helps.

  3. #3
    SitePoint Enthusiast SimonJ621's Avatar
    Join Date
    Mar 2006
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the suggestion ceeb. It makes sense to put an intermediary step in between the server requests to prevent unnecessary requests.

    I changed the onKeyUp to onKeyPress. And I attempted to add an intermediary step to build a time delay so that when someone is typing quickly, requests are only sent after a break of about 200 milliseconds.

    The problem, I don't think my intermediary function is working. The reason is, I increased the timeOut to 1 second, and every request occurred, just one second later. So my function isn't correctly stopping the previous request. Here is the code the intermediary code:

    HTML Code:
    function initialization() {
      clearTimeout(init);
      var init = setTimeout("getResults()", 500);
    }
    The onKeyPress calls the initialization function. I was hoping that it would cancel the previous initialization, but it doesn't seem to be doing that. Any suggestions?

    Oh, and yes I do use firebug, that's how I discovered where my problem was.

    Thanks in advance.

  4. #4
    SitePoint Addict
    Join Date
    Apr 2001
    Location
    Devon, UK
    Posts
    333
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In your function, init is a local variable, so it won't be available when the function is called again. Use this instead...

    Code:
    var init = null;
    function initialization() {
      if (init) clearTimeout(init);
      init = setTimeout(getResults, 500);
    }
    Hope that helps.

  5. #5
    SitePoint Enthusiast SimonJ621's Avatar
    Join Date
    Mar 2006
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ahh yes, good catch Ceeb. I should have realized that, but thanks it works well now. I think I'll end up using a 200 millisecond time lapse.

    Thanks again

  6. #6
    SitePoint Addict
    Join Date
    Apr 2001
    Location
    Devon, UK
    Posts
    333
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Glad it's working. You'll need to experiment a little. Also, you should cancel any current AJAX requests the instant the user hits another key.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •