Develop Reference

How to handle multiple AJAX behaviors in one HTTP request?

I am using jQuery. I have implemented a multipart web page where a list of links* are rendered and each link is periodically updated through AJAX HTTP requests. That is, on the page there are many links of which each one is "timer-triggered" through JavaScript so to perform a HTTP request to the URL pointed by the link itself and, on response success, to replace those links with the retrieved data (the updated links).
This implementation works but it is "performance less" in cases when the page contains many links: one AJAX request is executed per link resulting in many hits to the server. In order to solve that performance issue I thought to make the JavaScript code to execute a unique AJAX request that retrieves the whole set of links and then to replace DOM data.
However I do not know how to implement the "unique request" mostly due to the practice/technique that I have to use and since it is the first time I notice this kind of problem. What can I do? Should I implement a JavaScript handler for event-registration or what?
* In my case link elements are used (<a></a> HTML tags) but those can be anything associated with a URL.
Update after the jfriend00 answer
If the solution is to build a JSON array as jfriend00 describes in his answer then I should implement the page behavior so to update the JSON array dynamically. Since my HTML links are even rendered dynamically along with some JavaScript code then that JavaScript code could update the JSON array dynamically by "registering"/"unregistering" links. If this is a solution in my case, how can I implement it?
I render links as "partial templates" along with the JavaScript code which JavaScript makes those links to execute AJAX requests. HTML-JS code per each link (the mentioned "partial templates") looks like the following:
<script type="text/javascript">
(function() {
var link = $('#link_1')
...
}());
</script>

It seems like you can just send some JSON that is your array of links to request and then receive JSON back that is an object where each key is the requested link and the data is the server response for that particular link.
If the links you want to process look something like this:
<a class="myLink" href="xxx"></a>
It could look something like this:
function processLinks()
// assuming you can specify some CSS selector to select the links in your page that
// you want to target
// create an array of URLs for the ajax call
// and an index of arrays --> DOM objects so we know which DOM object goes
// with a given URL when processing the ajax results
var urlArray = [];
var urlIndex = {};
var urlArray = $(".templateLink").each(function() {
urlArray.push(this.href);
urlIndex[this.href] = this;
});
$.ajax({
url: "your ajax url here",
data: JSON.stringify(urlArray),
dataType: "json"
}).done(function(data) {
// assumes you get data back as {"url1": data1, "url2": data2, ...}
$.each(data, function(url, urlData) {
// get DOM object that goes with this URL
var domObj = urlIndex[url];
// apply urlData to domObj here
})
});
}
Updating my answer now that you've disclosed your "partial templates".
To process them all at once, change this type of structure which processes them one at a time:
<script>
(function() {
var link = $('#link_1')
...
}());
</script>
<a href="yyy" id="link_2></a>
<script>
(function() {
var link = $('#link_2')
...
}());
</script>
to this which finds them all in the DOM and process them all at once:
<script>
// process all the template links
$(document).ready(processLinks);
</script>

How to use `GET` parameters in a HTML document?

I have a HTML document and I want to send a parameter.
Let's name the document Categoty, and all it do it sends a request to the server (via Ajax) to get something on this categoty.
Suppose I'm using PHP, I would simply send the parameter:
localhost/Categoty.php?cat=somecat,
and read it in the PHP document: $_GET['cat'].
My question is if there's something similar in HTML (or Javascript)?
I though about hashtag (.i.e. categoty.html#somecat) , but I'm using jQuery mobile in my Android Hybrid application so it makes some issues.
Thanks in advance.

use the jQuery URL Parser in this link and then try:
jQuery.url().param('cat');
you can also access all other info we usually need in terms of dealing with GET parameters, like:
jQuery.url().attr('protocol');
returns the URL protocol like: http or https
jQuery.url().attr('host')
returns the host like stackoverflow.com
you can also get the segments of your URL like this:
jQuery.url().segment(1);//for instance in this very page's url it returns "posts"
at the end:
jQuery.url().param('cat') in javascript does the same as $_GET['cat'] does in PHP

jQuery ajax can do it , use $.ajax();
$.ajax({
type: 'GET',
url: 'http://localhost/Categoty.php?cat=somecat',
success: function(responseTxt,statusTxt,xhr){
}
});

hide variables passed in URL

We've been working on a web application and we've just about got it finished up, but there's one thing that bothering us (although by no means is it going to stop production.)
When we call one of the pages (index.html), we sometimes have to pass it a variable in the URL (searchid). So we get a page like http://domain.com/index.html?searchid=string.
We'd ideally like to not show the ?searchid=string, but I'm not sure how we'd do that.
My group doesn't own the index.html page (but we are working with the group that does), so I don't know how much we'd be able to do with anything like .htaccess or similar.
I was thinking about POSTing the variable, but I don't know how to receive it with just HTML and jQuery. Another person in my group thought that after the page loaded we could remove it from the URL, but I assume we would need a page refresh which would then lose the data anyway.
I'm trying to avoid XY problem where the problem is X and I ask about Y, so what's the right way to remove the variable from the URL?

You can use the History API, but it does require a modern browser
history.replaceState({}, null, "/index.html");
That will cause your URL to appear as /index.html without reloading the page
More information here:
Manipulated the browser history

Your question seems to indicate that the target page is not and will not be powered by some server-side script. If that's the case, I'd suggest changing the querystring to a hash, which has the advantage of being directly editable without triggering a page-load:
http://yourdomain.com/page.html#search=value
<script type='text/javascript'>
// grab the raw "querystring"
var query = document.location.hash.substring(1);
// immediately change the hash
document.location.hash = '';
// parse it in some reasonable manner ...
var params = {};
var parts = query.split(/&/);
for (var i in parts) {
var t = part[i].split(/=/);
params[decodeURIComponent(t[0])] = decodeURIComponent(t[1]);
}
// and do whatever you need to with the parsed params
doSearch(params.search);
</script>
Though, it would be better to get some server-side scripting involved here.

It's possible to rewrite the URL using JavaScript's history API. History.js is a library that does this very well.
That being said, I don't think there's any need for removing the query-string from the URL, unless you're dynamically changing the contents of the page to make the current query-string irrelevant.

You could post the data, then let the server include the posted data in the page, e.g.:
echo "<script> post_data = ".json_encode($_POST)." </script>";
This works cross-browser.

Extracting part of current page's URL in javascript

In ASP.NET MVC 3 site, I open the following uri
http://myserver/incidents/supercompany/register
That page needs to make use of ajax JSON retrieval mechanism with the help of jQuery:
$.getJSON('/Incidents/[[COMPANY NAME GOES HERE]]/SearchPeople/' + request.term, function (data)
I am new to javascript. How can I obtain supercompany part of my current url to build the
/Incidents/supercompany/SearchPeople/ string?

Assuming your URLs follow a logical structure, you can do this
var URLparts = window.location.toString().substr(7).split('/');
And you can now access URLparts[1] to get the company name. Obviously, you need to be able to know that that will ALWAYS be there, but it's a solution if you can guarantee that (eg. with htaccess).

Cut string obtained with Javascript inside hyperlink

I made a bookmark that users can add and it sends them to my site capturing the referrer.
Bookmark
My problem is that for some reason the location.href part instead of printing http:// it prints: "http%3A//". I want to remove it and get just the domain.com
I have a similar code that maybe could be useful but I'm having a hard time figuring out how to implement it inside HTML.
// Function to clean url
function cleanURL(url)
{
if(url.match(/http:\/\//))
{
url = url.substring(7);
}
if(url.match(/^www\./))
{
url = url.substring(4);
}
url = "www.chusmix.com/tests/?ref=www." + url;
return url;
}
</script>
Thanks

In most browsers, the referrer is sent as a standard field of the HTTP protocol. This technically isn't the answer to your question, but it would be a cleaner and less conspicuous solution to grab that information server-side.
In PHP, for example, you could write:
$ref = $_SERVER['HTTP_REFERER'];
...and then store that in a text file or a database or what-have-you. I can't really tell what your end purpose is, because clicking a bookmark lacks the continuity of browsing that necessitates referrer information (like the way that moving from a search engine or a competitor's website would). They could be coming from a history of zero, from another page on your site or something unrelated altogether.

Like already stated in my comment:
Be aware that this kind of bookmarking may harm users privacy, so please inform them accordingly.
That being said:
First, please use encodeURIComponent() instead of escape(), since escape() is deprecated since ECMAScript-262 v3.
Second, to get rid of the "http%3A//" do not use location.href, but assemble the location properties host, pathname, search and hash instead:
encodeURIComponent(location.host + location.pathname + location.search + location.hash);