Ajax

ajax

Asynchronous Javascript and XML(XSL) is a way to update just the part of a html page that changes instead of redrawing the whole page. AJAX combines languages like html, javascript, php, sql, xml and xsl.

historically

There are a number of mechanisms used to combine them.

• You call an HTML page and it displays
• You call an PHP page and it displays
• You call an HTML page and it calls a PHP page which gets combined and displays
• You call an HTML or PHP page and it calls a javascript page which gets combined and displays

ajax does all this

• You call an HTML page that includes a javascript page that responds to events by sending some action to PHP on the server which then instantiates a class and calls class methods some of which access a MYSQL database using SQL and then puts the results in a XML container which gets sent back to the browser then gets interpreted into XHTML by an XSL file and gets injected into some location in the page.

breaking it down

to check what's going on at the server

Send some stuff: http://pathboston.com/vocab/grid2/test/test.php?action=CHANGE_SOURCE&source=NFLhistory and get the XML back.

to check the XSL

Create a file of the XML that will be coming back from the server and then include an XSL file and see how it does.

simple bang bang browser to server to browser to server to browser

Call for data. Select from that data to query

getting around a XSL page using javascript

ex: You want to update a database based upon what is in some text fields. How do you find the name/value pairs that you want to send to the server? The construct document.forms.grid_form_id has some elements? What are its elements?

a complex example form the AJAX boook

index.html includes grid.js which replaces the

portion of the html page. (also loads the grid.css)

grid.js initializes creating a xmlhttp request object loading a XSL stylesheet and page1 of the grid

FEED_GRID_PAGE To create page 1 of the grid has to create a URL query = grid.php?action=FEED_GRID_PAGE&page=1 and then send that query to the server by opening the request object with the query - xmlHttp.open("GET", query, true);

The script running in the browser acts once the data comes back from the server. When the readyState property changes to 4, the xmlhttp.onreadystatechange handleGridPageLoad() function will be executed. It gets the data sent back from a server using the xmlhttp.responseText property to get the xml data. The (previosly loaded) xsl stylesheet loads the XML putting it in xmlResponse=stylesheetDoc.load(xmlHttp.responseXML)

The XML is transformed to HTML and put in page = xsltProcessor.transformToFragment(xmlResponse, document);

Meanwhile to replace the gridDiv from the index.html page we've got to get the ID and put the html in there:

var gridDiv = document.getElementById(gridDivId); gridDiv.innerHTML = ""; gridDiv.appendChild(page);

meanwhile at the server...

The server just sits there waiting to do shit getting its instructions to grid.php. Grid.php takes some 'action' and then echos shit back to the browser.

The actions can be FEED_GRID_PAGE or UPDATE_ROW or DELETE_ROW.

FEED_GRID_PAGE calls the grid-class function read page and it creates the key-value pairs of the XML and puts them in in a variable that comes back as getGridXML()

The whole show runs out of the grid.xsl file which has certain live buttons that respond to "on click" events. The xsl has a menu template sitting on top of and below a table. The table has heading then a foreach row section.

The loadGridPage() function is whenever you hit previous page and next page.

EditID() is called when you click on a particular row's "edit" link. The first parameter is some unique ID which seems to be assigned for the "tr" element right after foreeach statement. It is set equal to the database ID value for the record. The function on the first time through has edit as "true" and it replaces the inner html with input boxes and update,cancel and delete buttons. The Cancel button calls editID again this time has edit as false and just displays the row data.

The update button appears when the input boxes are drawn and when clicked it calls the updateRow() which puts together a url query ?action=UPDATE_ROW&id=" + id completing it with createUpdateUrl(grid).

In createUpdateUrl(grid), grid is from document.forms.grid_form_id and document.forms.grid_form_id.elements[i].name and value pairs are added to the url query.

Update row finishes by sending off the query to grid.php and waits for the reply. It uses: xmlHttp.open("GET", query, true); xmlHttp.onreadystatechange = handleUpdatingRow; xmlHttp.send(null);

I suppose you could edit any record in the database just by sending it something like: http://pathboston.cpm/vocab/grid2/grid.php?action=UPDATE_ROW&id=224&word=covert&def=sneaky&usage=you_are_covert

All the server (grid.php) sends back is a number, if it is -1 everything is cool and edit mode is turned off and the screen is redrawn with new values by calling editID(id,false).

<syntaxhighlight lang="php"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> [bar] [foo] [ant]

This is a version using msqli and adding an OOclass to handle wuff

frog

duck

antelope

</syntaxhighlight> XSL tutorial

http://www.smallbizonline.co.uk/php_session_variables.php

http://roshanbh.com.np

http://rajshekhar.net/blog/archives/85-Rasmus-30-second-AJAX-Tutorial.html