Looping alternative in Javascript/jQuery with AJAX

Question

I have the following piece of code of which I'm worried for performance wise. I'm not sure if it's a good idea to loop through $.ajax just like that. Is there a more efficient way to loop through an array in jQuery ajax?

What this code is supposed to do:

This code is supposed to take a bunch of URLs through a text area and if the URLs are broken into new lines, then each URL will be part of the urls_ary array. Otherwise, if there is not line break and the entered text area value is an URL, the value will be stored in single_url.

Now, I need to send these URLs (or URL) to my server-side script (PHP) and process those links. However, if the array urls_ary is the one to be sending data through AJAX, I'd need to send each URL individually, causing me to run the $.ajax call inside a for loop, which I think is inefficient.

    var char_start  = 10;
    var index       = 0;
    var urls        = $('textarea.remote-area');
    var val_ary     = [];
    var urls_ary    = [];
    var single_url  = '';

    urls.keyup(function(){      
        if (urls.val().length >= char_start)
        {           
            var has_lbrs = /\r|\n/i.test(urls.val());
            if (has_lbrs) {
                val_ary = urls.val().split('\n');

                for (var i = 0; i < val_ary.length; i++)
                {
                    if (!validate_url(val_ary[i]))
                    {
                        continue;   
                    }

                    urls_ary[i] = val_ary[i];
                }
            }
            else
            {
                if (validate_url(urls.val()))
                {
                    single_url = urls.val();
                }
            }

            if (urls_ary.length > 0)
            {
                for (var i = 0; i < urls_ary.length; i++)
                {
                    $.ajax({
                        // do AJAX here.                            
                    }); 
                }
            }
            else
            {
                $.ajax({
                    // do AJAX here.                                
                });     
            }
        }
    });

    function validate_url(url)
    {
        if(/^([a-z]([a-z]|\d|\+|-|\.)*):(\/\/(((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:)*@)?((\[(|(v[\da-f]{1,}\.(([a-z]|\d|-|\.|_|~)|[!\$&'\(\)\*\+,;=]|:)+))\])|((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]))|(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=])*)(:\d*)?)(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*|(\/((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)?)|((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)|((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)){0})(\?((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|[\uE000-\uF8FF]|\/|\?)*)?(\#((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|\/|\?)*)?$/i.test(url)){
          return true;
        }   

        return false;
    }

please describe what you think this code does, and what you're trying to do. — Mike 'Pomax' Kamermans
– Mike 'Pomax' Kamermans, Commented Dec 6, 2013 at 22:42
In this case you probably just want to (async) post the entire textarea string to your server (note: POST, not GET), and then let the server decide what to do with the data instead. — Mike 'Pomax' Kamermans
– Mike 'Pomax' Kamermans, Commented Dec 6, 2013 at 22:53

Jacob · Accepted Answer · 2013-12-06 22:52:18Z

1

Doing the $.ajax calls in a loop isn't the inefficient part. The AJAX requests will queue up, waiting for an available connection (only a certain number of requests per connection are allowed at a time). What's inefficient is the fact that you're doing multiple AJAX calls. Ideally, you could add the ability on the server to process multiple URLs at a time, then post an array of URLs in your client code instead of doing multiple requests.

So basically, the only way to be more efficient is to change the server-side code, then rewriting the client code should be straightforward.

answered Dec 6, 2013 at 22:52

Jacob

79k24 gold badges159 silver badges245 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

aborted Over a year ago

So you're suggesting to send the complete text area contents to my server-side and then take care of the line breaking and validating there? But I'd like to first make sure I'm sending valid URLs to my server-side script and when there are multiple URLs separated by line breaks, how would I check that out?

Jacob Over a year ago

You could send the whole text area, or you could post urls_ary to the server if you prefer doing validation on the client instead. The main point is that you should try to minimize the number of server round-trips if you are wanting to optimize your performance.

aborted Over a year ago

I get it, I think. Just one more question: The keyup event, it sends each character typed as a separate request I think, right? Having this said, wouldn't this be much of an overkill? I mean, sending only validated URLs to the PHP script would save AJAX from sending irrelevant stuff to the server - This is where I'm coming from and this is why I'm trying to validate these links through client-side scripting. Correct me if I'm wrong or where I'm failing to see the logic... Maybe sending each typed character doesn't stress the script? I don't know, please tell me.

Jacob Over a year ago

You could use setTimeout to only send the URLs after a period of time to avoid sending stuff while the user is still typing. The client-side validation is a good idea, but it's not that much more efficient than the PHP doing the same validation.

aborted Over a year ago

I would obviously have the PHP script do the checking too, but the only thing I'm worried about (as stated above) is that I don't want to send stuff to the PHP script that didn't go at least through one check if the entered data is an URL. In most cases those will be valid URLs, since not every end-user will look to exploit my system anyway. So how would I increase the efficiency of the Javascript with the thought that I wont do server side checking (I still will though).

Collectives™ on Stack Overflow

Looping alternative in Javascript/jQuery with AJAX

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related