How To Create Form Posts with Ajax / Page 2 | WebReference

How To Create Form Posts with Ajax / Page 2


[prev]

How To Create Form Posts with Ajax [con't]

Sending Queries As XMLHTTP Requests

Sending the form submissions through Ajax is easy once the Post object has been created (and it can be reused for future forms). The Post object consists of only four methods, Send, OnResponse, buildQuery and getElementValue, with each one being relatively self-explanatory. It all starts with the Send method, which is added to the forms onSubmit event, with the form element as its parameter. With this form element the Send method calls buildQuery. buildQuery iterates through all of the forms elements, calls getElementValue and builds a query string from each element name and value. Once the query string is constructed, the Ajax request is made by using the form method as the method of submission, the form action is the file that we make the request to, the query is the query that we just built and the callback method is OnResponse, which writes the results to the page.

The Server-Side

The bridge file that we submit the form values to needs to accommodate both get and post methods. In order to do this we need to check whether one or the other is set and then handle the values as necessary. i.e., I've created a bridge.php file to show you how you would handle the request and return a response as XML.

This is all it takes to convert your forms to Ajax. The object creation process takes a bit of time, but now you have a reusable way of handling form submissions with Ajax.

About The Author

Kris Hadlock is the owner and founder of Studio Sedition, a Web design and development firm. He is the author of Ajax for Web Application Developers and has been a feature writer for numerous Web sites and design magazines. To learn more about Kris, visit his Web site at http://www.studiosedition.com/ or his blog at http://blog.studiosedition.com/

Original: August 29, 2007

Digg This Add to del.icio.us


[prev]