?? ajax.js
字號:
saveForm(form, null, function( AJAX ) {
if (AJAX.readyState == 4) {
if (AJAX.status == 200) {
$('customerFormStatus').innerHTML = "<img src='./checkbox.gif' border=0 /> " + AJAX.statusText;
$('customerFormStatus').style.color = null;
form.save.disabled = true
} else {
$('customerFormStatus').innerHTML = AJAX.statusText
$('customerFormStatus').style.color = 'red';
}
}
});
// do not submit form if this is a submit button
return false;
}
<!----------------------------------- END "GET FORM VALUES" ------------------------------------->
<!----------------------------------- BEGIN CUSTOMERS BY STATE (NON-XML) ------------------------>
function getCustomersByState( state, target ) {
// if no state given then clear out
if (!state) {
clearCustomersByState();
} else {
var state1_div = $('state1_div');
state1_div.style.visibility = 'visible';
return new AJAXRequest("post", "/ThinkCAP/servlet/get_customers", "state=" + encode(state),
processGetCustomersByState);
}
}
function clearCustomersByState() {
var state1_div = $('state1_div');
state1_div.innerHTML = "";
state1_div.style.visibility = 'hidden';
document.getElementById("state1_info").innerHTML = "";
}
function processGetCustomersByState( myAJAX ) {
if (myAJAX.readyState == 4) {
if (myAJAX.status == 200) {
var response = myAJAX.responseText;
// Resonse text is in this format:
// state=XXX&customers=cust1!cust2!cust3!cust4
var customers;
var returnParms = response.split('&');
for (var i = 0; i < returnParms.length; i++) {
var pair = returnParms[i].split('=');
if (pair[0] == "customers") {
customers = pair[1];
if (customers == "") {
custList = "No customers found.";
document.getElementById("state1_info").innerHTML = "";
} else {
var custList = customers.split("!");
document.getElementById("state1_info").innerHTML
= " " + custList.length + " customer" + (custList.length == 1 ? "" : "s") + " found";
}
}
}
var div = document.getElementById("state1_div");
if (div) {
div.innerHTML
= "<ol style=\"padding-left:2em\"><li>" + decode(custList.join("<\/li><li>")) + "<\/li><\/ol>";
div.style.visibility = "visible"
}
} else {
alert("There was a problem retrieving the XML data:\n" + myAJAX.statusText);
}
}
}
<!------------------------------------- END CUSTOMERS BY STATE (NON-XML) ------------------------>
<!----------------------------------- BEGIN CUSTOMERS BY STATE WITH XML ------------------------>
function getCustomersByStateXML( state ) {
if (!state) {
clearCustomersByStateXML();
} else {
return new AJAXRequest("post", "/ThinkCAP/servlet/get_customersXML", "state=" + encode(state), processGetCustomersByStateXML);
}
}
function clearCustomersByStateXML() {
var state2_div = document.getElementById("state2_div");
state2_div.innerHTML = "Please enter a state...";
$("state2_info").innerHTML = "";
}
function processGetCustomersByStateXML( myAJAX ) {
if (myAJAX.readyState == 4) {
if (myAJAX.status == 200) {
logger(myAJAX.responseText);
xml = myAJAX.responseXML;
// Resonse text is in this format:
// state=XXX&customers=cust1!cust2!cust3!cust4
var div = "";
if (xml.documentElement) {
var state = xml.documentElement.getElementsByTagName("state")[0].firstChild.nodeValue;
var customers = xml.documentElement.getElementsByTagName("customer");
if (customers.length <= 0) {
div += "<tr><td class=\"customers_by_state_error\">No customers found for state: <strong>" + state
+ "<\/strong><\/td><\/tr>";
} else {
document.getElementById("state2_info").innerHTML
= " " + customers.length + " customer" +
(customers.length == 1 ? "" : "s") + " found"
div += "<table>";
for (var i = 0; i < customers.length; i++) {
var cust = customers[i];
var id = customers[i].getAttributeNode("custnum").nodeValue;
var name = decode(customers[i].firstChild.firstChild.nodeValue);
div += "<tr>"
div += "<td class=\"cust_num\">" + id + "<\/td><td class=\"cust_name\">" + name + "<\/td>";
div += "<\/tr>";
}
}
div += "<\/table>";
var state2_div = document.getElementById("state2_div");
if (state2_div) {
state2_div.innerHTML = div;
state2_div.style.display = 'block';
}
}
} else {
alert("There was a problem retrieving the XML data:\n" + myAJAX.statusText);
}
}
}
<!------------------------------------- END CUSTOMERS BY STATE (XML) ------------------------>
<!------------------------------------- BEGIN SUGGEST --------------------------------------------->
// this function is called when the call to the google_suggest servlet (AJAXSuggest) is finished
// google returns 'sendRPCDone( .... )'
function sendRPCDone( notUsed, search_term, term_array, results_array, unused_array ) {
var div = "<table>";
if (results_array.length == 0) {
div += "<tr><td class=\"search_error\">No results found for <strong>" + search_term + "<\/strong><\/td><\/tr>";
} else {
for (var i = 0; i < results_array.length; i++) {
div += "<tr><td class=\"search_term\"><a href='http://www.google.com/search?q=" + encode(term_array[i]);
div += "'>" + term_array[i] + '<\/a><\/td><td class="number_of_results">' + results_array[i]
+ "<\/td><\/tr>";
}
}
div += "<\/table>";
var google_suggest_target = document.getElementById("google_suggest_target");
if (google_suggest_target) {
google_suggest_target.innerHTML = div;
}
}
function clearSuggest() {}
function getSuggest( field ) {
return new AJAXRequest("POST", "/ThinkCAP/servlet/ajax_suggest", "qu=" + encode(field.value));
}
<!------------------------------------- END SUGGEST --------------------------------------------->
_description = new Object();
_description.div_ping = function( ) {
var desc = "<b>Ping</b><br>Ping sends the current date to the server. Basic AJAX functionality. See server console for date.";
desc += "<br><br><b>Spam</b><br>Sends 10 pings to the server to show how long it takes to send 1 request to the server.";
desc += "<br><br><b>Big File</b><br>Returns up to 10 megs from the server. Shows # of times onreadystatechange has been called (its a lot!).";
desc += "<br>While the file is downloaded, you can work on other fields and see server activity. This shows that the behavior is truly asynchronous and multiple requests can be handled.";
desc += "<br>The server stops sending data after 60 seconds so your file size might be smaller if you have a slower connection.";
desc += "<br>If you shut down the server while downloading the big file, you will see an error message.";
return desc;
};
_description.div_track_changes = function( ) {
var desc = "<b>Track Changes As Fields Change</b><br>";
desc += "As each field changes, the change is sent to the server. If all is well, the word OK shows up next to the field along with the text sent to the server.";
desc += "<br>The server console shows the values sent to the server.";
desc += "<br><br><b>Track Changes On Key Up</b><br>";
desc += "As each key is released, the current value of the field is sent to the server. If all is well, the word OK shows up next to the field.";
desc += "<br>The server console shows the values sent to the server.";
desc += "<br><br><h3>For Best Performance, Hide the Activity Log</h3>"
return desc;
};
_description.div_dropdowns = function( ) {
var desc = "<b>Drop Downs & Form Handling</b><br>";
desc += "An AJAX call is made to the server to get the states and populate the select box (drop down). ";
desc += "The server dynamically creates Javascript that is executed through an eval statement.";
desc += "The final line of the Javascript calls the onchange event of the state drop down which then retrieves all the cities for that state.";
desc += "<br><br>The city drop down is populated and its onchange event retrieves all the customers for a given city.";
desc += "<br><br>When the customer changes, the server returns Javascript that replaces all customer fields with the appropriate values.";
desc += "If you open the Track Changes section, you'll notice that both address fields on the page are updated.";
desc += "<br><br>In the samples, if you add a new INPUT field that matches a column in the customer table, it will be populated for you during runtime";
desc += "<br><br>The routines to retrieve the state, city, and customer dropdowns all use variations of encapsulating XMLHTTPRequests instead of using a global XMLHTTPRequest (_ajax).";
desc += "<br><br><b>Save</b><br>Sends the contents of the customer form back to the server. A message is shown indicating a successful save or a failure.";
desc += "<br><br><h3>For Best Performance, Hide the Activity Log</h3>"
return desc;
};
_description.div_customers_by_state = function( ) {
var desc = "<b>Retrieve Customers By State (non-XML)</b><br>";
desc += "This calls the server when the state is changed. The server returns a data set that includes the customer ID and the customer name. ";
desc += "<br><br>Each pair is delimited by a comma, and each set is delimited by a !";
desc += "<br><br>To see all customers, enter a '%' sign.";
desc += "<br><br><h3>For Best Performance, Hide the Activity Log</h3>"
return desc;
};
_description.div_customers_by_state_xml = function( ) {
var desc = "<b>Retrieve Customers By State (XML)</b><br>";
desc += "This calls the server when the state is changed. The server returns a data set that includes the customer ID and the customer name. ";
desc += "<br><br>The data is returned back as an XML document and the returnXML property of the XMLHTTPRequest is parsed to pull out the data.";
desc += "<br><br>To see all customers, enter a '%' sign.";
desc += "<br><br><h3>For Best Performance, Hide the Activity Log</h3>"
return desc;
};
_description.div_google_suggest_hack = function( ) {
var desc = "<b>Google Suggests Hack</b><br>";
desc += "This fires on each keystroke and calls the server passing the current search field.";
desc += "<br><br>The server in turn calls the google suggest URL and then passes the results back to the user's browser.";
desc += "<br><br>Google returns a Javascript method call to sendRPCDone(). We have our own sendRPCDone that loops through the results and presents the top 10 hits + # of pages.";
desc += "<br><br>The reason Google is not called directly from the browser is that XMLHTTPRequest can only be used to call the orignal server or a trusted server setup in the Browser settings.";
desc += "<br><br><h3>For Best Performance, Hide the Activity Log</h3>"
return desc;
};
_description.div_activity_log = function( ) {
var desc = "<b>Activity Log</b><br>";
desc += "Shows various activity logs for each of the examples.";
desc += "<br><br>The log is shown with the most recent log item at the top of the list.";
desc += "<br><br>To write to this log, use the logger() function in the Javascript.";
desc += "<br><br><h3>For Best Performance, Hide the Activity Log</h3>"
return desc;
};
_description.default_text = function( ) {
var desc = "<b>Basic AJAX Examples</b><br>";
desc += "<br><b>The downloadable samples include full JavaScript & Java Source, a sample database for any SQL database, and a PowerPoint presentation.</b>";
desc += "<br><br>This sampler shows some basic techniques to demonstrate some of the possibilities of using AJAX/XMLHTTPRequest techniques in web applications.";
desc += "<br><br>Basic browser & server interaction is demonstrated along with dynamic population of visual elements such as DIVs and SELECT drop downs.";
desc += "<br><br>In addition, many ways of instantiating & encapsulating XMLHTTPRequest objects are shown in the Javascript.";
desc += "<br><br>This sample is freeware and has no copyright restrictions whatsoever. It is doesn't carry a warranty or a guarantee.";
desc += "<br><br>Written by Steve Benfield.<br><a href='mailto:sbenfield@clearnova.com&subject=AJAX Samples' style='color:white' alt='email the author'>sbenfield@clearnova.com</a>";
desc += "<br><br>";
desc += "ClearNova provides ThinkCAP™, a framework & visual workbench ideally suited for building Rich Internet Applications using AJAX techniques.";
desc += "<br>For information on ThinkCAP, visit <a style='color:white' href='http://www.clearnova.com/thinkcap'>www.clearnova.com<\/a>";
desc += "<br><br><h3>For Best Performance, Hide the Activity Log</h3>"
desc += "<br><br><h3>This page is running on a development server--uptime is not guaranteed.</h3>"
desc += "<br><br>Last Updated: July 15, 2005 | Version 1.1";
return desc;
}
function toggleDiv( element ) {
var e = $(element);
if (e) {
e.style.display = ((e.style.display != 'block') ? 'block' : 'none');
$('div_upper_right').innerHTML = _description[e.id]();
}
}
function monitorSubmit() {
document.forms['linkDummyForm'].submit();
}
function submitAgain() {
tStart = new Date();
timerID = setTimeout("monitorSubmit();", 5000);
}
function pingjsfAgain() {
tStart = new Date();
timerID = setTimeout("pingjsf();", 10000);
}
?? 快捷鍵說明
復制代碼
Ctrl + C
搜索代碼
Ctrl + F
全屏模式
F11
切換主題
Ctrl + Shift + D
顯示快捷鍵
?
增大字號
Ctrl + =
減小字號
Ctrl + -