Ajax performance - how to get the fastest response - php

Question

I have been making calls to php from javascript with the jquery $.ajax({}). I am finding this to be too slow particularly if ajax call is inside the code that loops through page elements. What is the best way to structure an ajax call to get the best performance?
This is a sample ajax call. Is there a better way?
// Make ajax call to update XML
$.ajax({
url: "make_update.php",
type: "POST",
data: { nodeid: scard_id, name: '', top: scard_top, left: '', width: '', height: '' },
cache: false,
/* async: true, */
success: function (response) {
if (response != '')
{
/* alert(response); */
}
}
});
The file make_update.php has this code.
<?php
ini_set('display_errors', 1);
error_reporting(E_ALL);
include_once("phpshared.php");
function make_update( $nodeid, $name, $top, $left, $width, $height ) {
$nodes = new SimpleXMLElement('linkcards.xml', null, true);
$returnArray = $nodes->xpath("//LINKCARD[#ID='$nodeid']");
$node = $returnArray[0];
if ($name != null) { $node->NAME = $name; }
if ($top != null) { $node->TOP = $top; }
if ($left != null) { $node->LEFT = $left; }
if ($width != null) { $node->WIDTH = $width; }
if ($height != null) { $node->HEIGHT = $height; }
$nodes->asXML('linkcards.xml');
$formatted = formatXmlString($nodes->asXML());
$file = fopen ('linkcards.xml', "w");
fwrite($file, $formatted);
fclose ($file);
}
echo make_update(trim($_REQUEST['nodeid']),trim($_REQUEST['name']),trim($_REQUEST['top']),trim($_REQUEST['left']),trim($_REQUEST['width']),trim($_REQUEST['height']));
?>

Answer 1

Instead of making a separate call per page element, write server-side code that allows a whole bunch of stuff to be done with one invocation.

Answer 2

According to your code and question, I suspect that most overhead is created by
1) The loop of Ajax calls, which could be easily bundled in an array
2) The parsing of the linkcards.xml document
So, on the client side, your code should look like this:
var xhrData = [];
/* Enqueue all the data generated in your loop to an array */
for(var i in loop) {
xhrData.push({ nodeid: loop[i].scard_id, name: '', top: loop[i].scard_top, left: '', width: '', height: '' });
}
/* Post the whole array */
$.ajax({
url: "make_update.php",
type: "POST",
data: { data: xhrData },
cache: false,
success: function (response) {
for(var i in response) {
if (response[i] != '') {
/* alert(response[i]); */
}
}
}
});
Server side the request should be handled like this:
function make_update() {
/* somewhere here you should read the XML file */
$nodes = new SimpleXMLElement('linkcards.xml', null, true);
foreach($_REQUEST['data'] as &$element) {
/* here goes the $_REQUEST data manipulation */
}
/* and this is where the XML writing should go */
$file = fopen ('linkcards.xml', "w");
fwrite($file, $formatted);
fclose ($file);
/* return JSON encoded string back to the client */
return json_encode($_REQUEST['data'])
}
echo make_update();
Unfortunately, I can't be more specific, because your code depends on external data and I have no insight in the logic behind it. The point is, though, that you should consider fetching all the data in an array and then send the whole array to your server. On the server, it is not nescessary to continually open and close the XML file, because every call consists of the same operations.
If you even want to have a better server side performance, I would recommend to use XMLReader/XMLWriter instead of SimpleXML.