Xem mẫu
The init Method
var enable = false; self.ajax = new Ajax();
self.form = document.getElementById(`searchForm`); document.getElementById(`resultsDiv`).style.display = `block`; self.form.onsubmit = function() { return false; }; self.hand[`searchButton`] = self.submitSearch; self.evalSearchTextState();
The init method starts off by doing all your normal app initialization stuff—it creates the Ajax object for submitting searches and sets up a reference to the web form.
Next, it “turns on” the results section of the UI. A CSS declaration of display: none is associated with the div that has the ID resultsDiv; as such, non-JavaS-cript browsers won’t see the div, but browsers that do support JavaScript will. This is the div that will contain our AJAX-powered UI. As part of this application, we’ll be looking at how we could build an alternate UI for non-JavaScript browsers that will POST to a different page.
Next, init sets up an event handler for the form’s Submit button. We’re using an input type="submit" element for this button, which allows the form to work for non-JavaScript-capable clients too. We don’t want our JavaScript clients to submit the actual form because we’re making our requests with AJAX; thus, we have to suppress form submission.
Then, the method places a reference to what will become the Submit button’s onclick event handler into the hand property—an associative array with the button ID as key.
Then, the method places into the hand property an associative array with the button ID as its key. The method places into hand a reference to the method that will become the Submit button’s onclick event handler.
This gives us a convenient way to store all the onclick handlers for the buttons so we can turn buttons on and off at will. We’ll see how this works in the next section.
Next is a call to evalSearchTextState, which looks at the SearchText field, and either enables or disables the Search button based on whether or not it contains any text. Here’s the code for evalSearchTextState:
203
Licensed to siowchen@darke.biz
Chapter 7: More Web Services and a Back Button
File: webservices2.js (excerpt)
this.evalSearchTextState = function() { var self = Search;
var enableState = `off`;
if (self.form.SearchText.value.length > 0) { enableState = `on`;
}
self.setButtonState(self.form.searchButton, enableState); };
This method prevents users from trying to submit a search without entering any search terms.
The middle chunk of the init method deals with the Back button code:
File: webservices2.js (excerpt)
if (BROWSER_BACK) { self.startHist();
}
else { self.addHistoryNav();
}
The first part of the if-else branch is for the browser Back button fix. It fires up some code that watches for changes to the browser history and the location bar—we’ll be covering how this works in the section devoted to the browser Back button fix. The other branch sets up an application navigation panel that has both Back and Forward buttons. You’ll see how all this works in the section that explains how to build your own Back button.
The final chunk of code turns on these features for users with screen readers:
File: webservices2.js (excerpt)
self.enableScreenReaderFeatures(); };
This method is almost identical to the method with the same name that was part of our login application in Chapter 4. There are a few tweaks that need to be made to the screen reader code that’s specific to this app. We’ll be going over these in the section on screen reader code near the end of the chapter.
204
Licensed to siowchen@darke.biz
Disabling and Enabling Buttons
Disabling and Enabling Buttons
We saw above that the evalSearchTextState method called from init prevents users from submitting searches with no search text. It does so by calling setButtonState to enable or disable the Submit button according to whether or not the SearchText field has a value.
Here’s the code for setButtonState:
File: webservices2.js (excerpt)
this.setButtonState = function(buttonRef, enableState) { var self = Search;
if (enableState == `on`) { buttonRef.disabled = false;
buttonRef.onclick = self.hand[buttonRef.id]; }
else {
buttonRef.disabled = true; buttonRef.onclick = null;
} };
The method takes two parameters — buttonRef, a reference to the button to be toggled on and off, and enable, a boolean that says whether we’re turning the button on or off.
Enabling the button sets its disabled property to false. The code then looks at the associative array of handler methods stored in hand, and uses the button’s ID as a key to figure out which method should be attached to that button.
Disabling the button is simple—we just set its disabled property to true so that it appears properly dimmed out, and set the button’s onclick event handler to null so that clicking the button will have no effect.
Enabling Search
Now that we’ve got the UI all set up, it’s time to perform some searches. Initially, the Search button is disabled, because the search text box is empty. This approach, which is similar to what we did with the application login in Chapter 4, represents a proactive approach to validating input. In this way, we prevent users from making mistakes, rather than waiting until they’ve taken some action before we
205
Licensed to siowchen@darke.biz
Chapter 7: More Web Services and a Back Button
tell them “sorry, that was wrong.” When the button is disabled, it’s impossible for legitimate users to submit an empty search.
Once the user has typed something into the text field, we need to enable the Search button. We do this in the same way we enabled the Search button in Chapter 4—via a method attached to the document.onkeyup event for the page:
File: webservices2.js (excerpt) document.onkeyup = Search.keyup;
That method will fire each time users hit a key, and will check to see whether or not they’re typing into the search text box. Here’s the code for keyup:
File: webservices2.js (excerpt)
this.keyup = function(e) { var self = Search;
e = e || window.event; if (e.keyCode == 13) {
if (!self.form.searchButton.disabled) { self.submitSearch();
} }
else { self.evalSearchTextState();
} };
Note that since all keyboard input goes through this method, we’re also using it to submit the search when the user hits the Enter key (which has a keyCode of 13). If the pressed key was the Enter key, it will submit the search—but only if the Search button has been enabled.
The submitSearch Method
Once users have typed something into the search text box, and the Search button is enabled, they can either click the Search button or hit Enter to perform the search. Both options call the submitSearch method. Here’s the first chunk of the code for submitSearch:
File: webservices2.js (excerpt)
this.submitSearch = function() { var self = Search;
var service = ``;
206
Licensed to siowchen@darke.biz
Passing to the Proxy Script
var searchText = ``; var proxyURI = ``; var dt = new Date();
service = self.form.SearchService.value; searchText = self.form.SearchText.value;
if (service != self.service || searchText != self.searchText) { self.service = service;
self.searchText = searchText; self.setButtonState(self.form.searchButton, `off`);
This code is fairly straightforward. It pulls the form values into some local variables (service for the web service to use for the search, and searchText for the string of text to search on), then checks that this isn’t the user’s previous search by comparing service and searchText against properties of the same names. Provided at least one of these doesn’t match, we disable the Search button and store service and searchText in these properties. This stops an impatient user from repeating the same search over and over again. The service and searchText properties will be used later as we navigate the user’s search history with the Back button.
Passing to the Proxy Script
The next chunk of the code looks like this:
File: webservices2.js (excerpt)
proxyURI = `/webservices2_proxy.php` + `?search=` + escape(self.searchText) + `&service=` + self.service +
`&dt=` + dt.getTime;
As in the previous chapter, this application will use a proxy script to relay our AJAX requests to URIs on a server that’s different from the one on which our AJAX app lives. Browser security prevents us from making requests directly to those other servers, so we go through a proxy script on our own server. Note that we need to escape the service and search terms in order to pass them along on the query string.
Submitting the Search
Here’s the last chunk of code for the submitSearch method:
207
Licensed to siowchen@darke.biz
...
- tailieumienphi.vn
nguon tai.lieu . vn