Deep Linking in JavaScript and Ajax Applications. Last week I posted a tutorial that demonstrated using a simple application how to implement progressive enhancement into your Ajax projects. The one major flaw in the final Ajax-driven page from that tutorial is the lack of deep linking when JavaScript is enabled.
Although the resulting code is clean, works well, and is easy to maintain, the lack of deep linking is enough to cause a client to balk at the use of progressive enhancement in such a circumstance. So, in this brief tutorial, I’ll describe how to incorporate deep linking into that page. If you haven’t already gone through the previous tutorial, doing so might help you get up to speed — but it’s not absolutely necessary, since the code we’ll be using is pretty straightforward.
Step 1: Review the Primary Function From the Previous Tutorial The final JavaScript code from the previous tutorial included a function called getEmployeeInfo, which is the primary piece of code we’ll be working with in this tutorial. Demo Page #1 Conclusion. Building an Ajax Application with Progressive Enhancement. If you’ve done your best to keep up with web development trends over the past five years or more, then it’s likely that you’re familiar with the concept of Progressive Enhancement.
I’m not going to provide an explanation of that technique here, but instead, I thought I would demonstrate using a small Ajax-driven page how progressive enhancement can be implemented. The mini-app we’ll be building in this tutorial is an employee information page. It will consist of a series of links at the top of the page that will determine what employee info is displayed in the content area. The information will be held inside of include files, to simplify the process (as opposed to a database or XML file which might be more practical in a real-world app).
View the Page We’ll Be Building Step 1: Create the Primary PHP-driven Web Page Here is the code for our main page: <ul> <li><a href="? <ul><li><a href="? Three things to note about the above code: Step 2: Create the employee.php Include File View Final Demo. Ajax From the Ground Up: Part 1 – XMLHttpRequest. It started out as an industry “buzzword” and has slowly progressed into one of the most important web technologies in use today. It is easily implemented using your favourite JavaScript framework. It can provide a beautiful layer of enhancement to many web applications, helping to improve page-load times and greatly improve the user experience. It can also degrade the user experience and cause a web application to fail if a particular client-side technology is unavailable. Yes, I’m talking about the web methodology immortalized by Jesse James Garrett called Ajax. (As Garrett points out, Ajax is not a technology, but several technologies.)
This article will begin a multi-part tutorial series in which I will explain how to implement Ajax “from the ground up”. This series will be geared towards web developers who would like to better understand Ajax in its raw format, using pure JavaScript. This series will benefit developers who have so far gained the following understanding of Ajax:
Ajax From the Ground Up: Part 3 — Getting a Response From the Server. Last year I began a series called “Ajax From the Ground Up”, that consisted of two articles describing how to implement Ajax from scratch using pure JavaScript. Because I was busy with other things, and due to minimal interest shown in the articles, I never wrote the third part to the series. But I didn’t feel comfortable leaving it permanently unfinished, so with this article, I’ll complete the 3-part series that will teach you how to fully implement Ajax calls in your pages using raw JavaScript. If you haven’t seen the previous articles, you can do so using the links below: Ajax From the Ground Up: Part 1 — XMLHttpRequest Ajax From the Ground Up: Part 2 — Sending Data to the Server The Code Written So Far When I left off the series, the code we created consisted of two functions.
Here is the code from the two previous tutorials, with the functions reversed (since the XHR function is more of a utility function): Checking the XHR Object’s readyState Property What if the Data Returned is XML? Ajax From the Ground Up: Part 2 – Sending Data to the Server. This is the second tutorial in a series explaining how to implement Ajax “from the ground up”, so if you haven’t yet checked out the first tutorial, then please do so now, as this one will be building on code from part one. In the first part, we learned how to create an instance of the XMLHttpRequest object in a cross-browser fashion.
In part 2, we’ll discuss the code needed to start communicating with the server. The result of this tutorial will help us send data to the server. The onreadystatechange Event Handler onreadystatechange is an event handler, much like onclick and onload are event handlers. onreadystatechange is more along the lines of onload since it is not triggered by user interaction, but by the server. When we left our code in part one, here’s how it looked (minus the getXhrObject function which you can get from part one): var ajaxCapable = getXhrObject(); if (ajaxCapable) { } var ajaxCapable = getXhrObject(); if (ajaxCapable) { // perform some Ajax functionality here }