Updating Your Web Page Without Refreshing the Page

Updating Your Web Page Without Refreshing the Page

When someone visits your website, they are seeing your web page on their local computer.

The page may have been built on the fly at your hosting server using PHP and MySQL and then downloaded to the user’s computer, but by the time the visitor sees the page, it’s on their local computer.

Javascript code in the page may be making the web page more dynamic as well, but the user’s browser is handling the Javascript dynamics.

Since the user is viewing your web page on their local computer, any updates that need to be made to the page requiring PHP and/or MySQL must happen at the server level. This means that something on the page, such as a button or a link, must send another request to the server for the updated information. This used to require a page refresh.

The click of a link or a button would send the message to the server that another page was needed from the server. It might have been the same page with new, updated information, but as far as the server was concerned, it was a new page.

In other words, once the page has been built and sent to the user’s local computer, the only way to interact with the server is to send another request. This used to mean that the user’s browser would send the request and receive a new response to show a new page.

With advances in technology, advances in the languages that we now use for web development, and advances in our web browsers, it’s now possible to update specific sections of a page without refreshing the entire page. This has allowed web developers to create web ‘applications’ instead of just web ‘pages’. Web applications look and behave more like applications that you would run on your local computer. This new technology is called Ajax – Asynchronous Javascript and XML.

The Javascript inside the web page can be triggered to send a message, asynchronously. According to Wikipedia, in programming, asynchronous events are those occurring independently of the main program flow. In this case, these events are sending messages to the server while the viewer is still viewing and/or interacting with the web page. It’s all happening behind the scenes and the user may not even be aware that it’s happening.

The XML part of the name Ajax is the format in which the messages are usually sent. XML stands for extensible Markup Language. It is similar to HTML and is used a lot on the internet for sending messages from one computer to another, just like HTML.

The biggest difference in XML and HTML is that HTML is a limited set of XML. HTML is intended for one type of application – browsers – whereas, XML can be used for almost any application. It’s just a standard way to send messages electronically.

XML is very popular and works very well, because, in addition to having tags similar to HTML, it allows you to define your tags, as well. This means that you can send almost any type of information and, since you can define your tags, you can make it pretty clear as to what the data means.

Since Ajax is still sending a message through the internet, the response is not real-time – and in some cases can be pretty slow, but it’s a lot faster and much more convenient than waiting for the entire page to refresh.

Not only that, but it allows forms and pages to change based on the user’s input or mouse movements on the page. We don’t have to wait until the entire form is filled out before we submit some of the information. This allows the entire form to change before it’s filled out.

For instance, let’s assume I have a form of cars. On that form, I have a radio button for 2-door or 4-door. Depending on which of those the user selects, I want to give them a drop-down list of the 2-door or 4-door cars I have available for them to select from the list. Before Ajax, I would have to have combinations available on my form that weren’t available. Only after the user had submitted their form, could my scripts check to see if the combination they chose was available or not. Then my script would send back an error message.

With Ajax, I can check my database while the user is still filling out the form and respond to them inside the form before they click on the submit button. This reduces the number of errors that the user will have to experience before they get the form filled out correctly.

This is only one example of the many wonderful things that Ajax can help us build into our web applications. It’s making the internet much more dynamic and much more interactive. Ajax is a web developer’s dream!

Source by Cindy Cullen

Leave a Reply

Your email address will not be published.