Ajax: More processings in an individual Ajax request
Blogs20112011-03-23
I want to send more than 1 ajax requests within a button click. The following codes illustrates when clicking the button ‘1 or 3 processing when click?‘, 3 async Ajax requests are sent to server at the same time, and the responses will refresh different divs in the webpage.
-
the first processing uses jQuery.load(), to refresh
1
-
the second processing uses jQuery.get(), to refresh
1
-
the first processing uses jQuery’s.post(), to refresh
1
For simplifying, the 3 requests go to same URL: $_SERVER[‘PHP_SELF’]/test_multi_ajax.html. Of course, the URL can be different.
<html><head>
http://jquery-1.5.1.min.js
</head>
<body>
1
2
3
<input type="button" id="loading" value="1 or 3 processing when click?" />
$('#loading').click(function() {
$('#div1').load('test_multi_ajax.html #container');
$.get('test_multi_ajax.html', function(data) {
$('#div2').html(data);
});
$.post('test_multi_ajax.html', function(data) {
$('#div3').html(data);
});
return false;
});
</body>
</html>The script ‘test_multi_ajax.html’ is list below (it can be any php or html script):
this is the First test.
only container is included.
this is the LAST test. The behaviors behind the click is, the jQUery codes fork 3 processes to deal with 3 different ajax processings: each of them runs independently, no associated with each other. And the responses will present in different parts of the webpage, here is 3 divs: ‘div1’, ‘div2’, ‘div3’.
It is powerful enough: many online real-time searching system (e.g: airplan tickets) should use this way to get information from different repositories when user clicks ‘search tickets’ button. On the other side, for a greedy script, it can eat huge bandwidth and memory if it forks many processes to do the network occupying.