- Standard Web Application Versus Standard AJAX Model
- The Data Reflection Pattern
- The Multiuser Pattern
- The Object Return Pattern
- Conclusion
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
The Object Return Pattern
The object return pattern is a standard AJAX/database interaction, except that it returns an object in the form of HTML, XHTML, or XML. This pattern is beneficial when you’re creating page content with an object-oriented server-side language and need to create a new object and add it to the page with the appropriate ID to be used for later access. The chart in Figure 4 shows the flow of this pattern.
)
Figure 4 Object return pattern.
The example that’s included in the sample has a TextLink class, which creates new hyperlinks in the database and assigns an ID and delete button for removing each specific hyperlink.
Here’s an example of the TextLink class:
class TextLink
{
public function TextLink() {}
public function CreateLink($_id, $_string, $_url)
{
$link = "<a href=’" . $_url . "’ target=’_blank’ id=’" . $_id . "’>" . $_string . "</a>";
$deleteButton = ""nbsp;"nbsp;<a href=\"javascript:deletePost(’$_id’);\">x</a><br/>";
return $link . $deleteButton;
}
}
The index page is nothing more than an HTML form with a div for displaying hyperlinks:
<html> <head> <title>Object Return Pattern</title> <script type="text/javascript" src="js/Ajax.js"></script> <script type="text/javascript" src="js/request.js"></script> </head> <body onload="javascript:ajax.makeRequest(’POST’, ’services/post.php?method=get’, onResponse);"> <div id="body"></div> <br/><br/> <b>Add a new link</b> <br/> Name: <input id=’name’> URL: <input id=’url’> <input type=’button’ name=’submit’ value=’save this post’ onclick="javascript:saveNewLink();"> </body> </html>
Once a name and a URL have been added and the submit button is clicked, the saveNewLink method is triggered. This method posts the name and URL value to the server-side language:
function saveNewLink()
{
var name = document.getElementById("name").value;
var url = document.getElementById("url").value;
ajax.makeRequest(’POST’, "services/post.php?method=save"name="+ name +""url="+ url, onResponse);
}
The server-side language inserts the data into the database table and calls the get method to return the updated XML:
public function save($id, $name, $url)
{
$this->dbConnect();
$query = "INSERT INTO $this->table (name, url) VALUES (’$name’, ’$url’)";
$result = @mysql_query($query);
mysql_close();
$this->get();
}
The get method returns XML to the callback method of the original AJAX request. What makes this response different is the fact that the get method uses the TextLink object to create hyperlinks and add them to the XML as HTML with the appropriate ID and delete button. Following is the get method:
public function get()
{
$this->dbConnect();
$query = "SELECT * FROM $this->table ORDER BY id";
$result = mysql_db_query (DB_NAME, $query, LINK);
$xml = "<?xml version=\"1.0\" encoding=\"ISO-8859-1\" ?>\n";
$xml .= "<links>\n";
while($row = mysql_fetch_array($result))
{
$textLink = new TextLink();
$xml .= "<link>\n";
$xml .= "<textLink><![CDATA[" . $textLink->CreateLink($row[’id’], $row[’name’], $row[’url’]) . "]]></textLink>\n";
$xml .= "</link>\n";
}
$xml .= "</links>";
mysql_close();
header("Content-Type: application/xml; charset=UTF-8");
echo $xml;
}