Archive for March, 2013

Published by Pui-chor on 22 Mar 2013

ajax post method submission

The difference between GET and POST submission is that all arguments are viewable through the URL when GET method is used such as:

But when POST method is used, the URL does not contain the arguments and arugments input data are piped through the STDIN channel. Otherwise, the data information is processed by the server in a similar way. Here is the way to submit form data using POST with jQuery:

function submit_form(){
$.post(“/cgi-bin/”, $(“#form”).serialize(), function(data) {
alert(“Data Loaded: ” + data);// or call process routine for the data here
return false;
In the HTML document, there is a form with id=form section defined as such:

<form id=’form’ action=’#'>
<input type=’text’ name=’test’ size=20><br>
<input type=’radio’ name=’quiz’ value=’test’>test<br>
<input type=’radio’ name=’quiz’ value=’exam’>exam<br>
<input type=’checkbox’ name=’check’ value=1>a test<br>
<input type=’checkbox’ name=’check’ value=2>second test<br>
<input type=’checkbox’ name=’check’ value=3>third test<br>
<button onclick=’submit_form()’>submit
In processing routine, the result data can be inserted in specified DIV block and the webpage will not be replaced by the returned page.

Published by Pui-chor on 22 Mar 2013

ajax parse data and submit routines

Continue from last post ajax core routine, the content retrieved from XMLHttpRequest() call through the data retrieved XMLHttpRequestObject.responseText need to be parsed:
// this function create an Array that contains the JS code of every <script> tag in parameter
// then apply the eval() to execute the code in every script collected
function parseScript(strcode) {
var scripts = new Array();         // Array which will store the script’s code

// Strip out tags
while(strcode.indexOf(“<script”) > -1 || strcode.indexOf(“</script”) > -1) {
var s = strcode.indexOf(“<script”);
var s_e = strcode.indexOf(“>”, s);
var e = strcode.indexOf(“”, e);

// Add to scripts array
scripts.push(strcode.substring(s_e+1, e));
// Strip from strcode
strcode = strcode.substring(0, s) + strcode.substring(e_e+1);

// Loop through every script collected and eval it
for(var i=0; i<scripts.length; i++) {
try {
catch(ex) {
// do what you want here when a script fails

This function extracts all scripts enclosed by the script tag and using the eval() function to execute these extracted scripts. Whether data or function, they will be available when called.

The following extract the body content within the body tag:

function stripeBody(strcode) {
// Strip out tags
if(strcode.indexOf(“<body”) > -1 || strcode.indexOf(“</body”) > -1) {
var s = strcode.indexOf(“<body”);
var s_e = strcode.indexOf(“>”, s);
var e = strcode.indexOf(“</body”, s);
var e_e = strcode.indexOf(“>”, e);

result=strcode.substring(s_e+1, e);
return result
This should be done befoe extracting the scripts but that is ok. The problem is that when the webpage returned do not following the standard html such as the body section is not defined or in other word, no body tag. this function will not extract anything as it tries to look for all data within the body tag.
Lastly this is the function to trigger the form submission without using the normal submit button where the whole page will be replaced by the result of the form submission.
function ajaxSubmit(formurl){
serializedData = $(“#form”).serialize();// specify which form which has the id=form here
formurl is the argument telling the function what url should the form be submitted. The serializedData is the result of serializing the form data using $(“#form”).serialize(); function. getData function will trigger the same XMLHttpRequest() function to request processing the data using GET method and received the result data and insert the data into the div with id=container.

Published by Pui-chor on 20 Mar 2013

ajax core routine

The following is the core of ajax-capable browser, or web2-capable javascript:

var XMLHttpRequestObject = false;
if (window.ActiveXObject) {
XMLHttpRequestObject = new ActiveXObject(“Microsoft.XMLHTTP”);
else {
if (window.XMLHttpRequest) {
XMLHttpRequestObject = new XMLHttpRequest();
function getData(dataSource, divID, f, g, h)
if(XMLHttpRequestObject) {
var obj = document.getElementById(divID);“GET”, dataSource);

XMLHttpRequestObject.onreadystatechange = function()
if (XMLHttpRequestObject.readyState == 4 &&
XMLHttpRequestObject.status == 200) {
var ajaxContent = XMLHttpRequestObject.responseText;
var strip = stripeBody(ajaxContent);
obj.innerHTML = strip;
if(f) f();
if(g) g();
if(h) h();
If window.XMLHttpRequest is true, the function getData can be called to any dataSource which is the URL, uniform Resource Locator, or the website address, except that cross domain access is not allowed, that is, calling other website beside the current website cannot be done.

XMLHttpRequestObject.responseText is all content, that is, the source code of requested webpage or ouput of the server script including header, style, script, and everything. Some style or script can mess up the container webpage. This is whey the stripeBody function call is called to extract only the body enclosed portion. The function stripeBody will be illustrated in the later post.

The optional argument f, g, h functions are applied to allow the initialization routine to be run after the webpage is loaded. The function f, g, h are the functions defined earlier in the container webpage.  Desgining the call is the key to have a seamless transition of getting one webpage from another.

parseScript is another function implement to allow scripts loaded in the body section to be run. The purpose is similar to the additional scripts f, g, h to be called. This will be illustrated later.

Next »