[http://creativecommons.org/licenses/by/3.0/]
This work is licensed under a CC
Attribution 3.0 Unported License [http://creativecommons.org/licenses/by/3.0/]
XMLHttpRequest ExampleXMLHttpRequest ResponsesXMLHttpRequest ResponsesXMLHttpRequest ResponsesXMLHttpRequest ImplementationsXMLHttpRequest in jQuery (Setup)XMLHttpRequest in jQuery (Interface)XMLHttpRequest in jQuery (Core)Scripting is used on the majority of today's modern Web sites. Scripting can be used to improve the usability and accessibility of a Web site (for example for validating form data on the client side), it can vastly improve the user experience with new interface design (the smooth scrolling of Google Maps vs. older click to scroll
map services), or it can be used to implement behavior that would be impossible without scripting (for example the online applications of Google Docs). Asynchronous JavaScript and XML (Ajax) takes Dynamic HTML (DHTML) to the next level by allowing server access from within scripting code. This is accomplished by using a standardized API for client/server communications, the XMLHttpRequest object. This objects allows using HTTP connections from within scripting code, and thereby allows scripting code to dynamically reload data from a server in response to user interactions.
mouseOver events)versionsof DOM/JavaScript
missing functionality
XMLHttpRequestXMLHttpRequest handles all HTTP interaction mechanicsXMLHttpRequest essentially is a client-side HTTP APIXMLHttpRequest Example<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript">
var http = new XMLHttpRequest();
http.open("GET", "helloworld.xml", true);
http.onreadystatechange = function() {
if ( this.readyState == 4 && this.status == 200 ) {
var xml = http.responseXML.documentElement;
var helloworld = document.createTextNode(' ' + xml.firstChild.nodeValue);
document.getElementById('demo').appendChild(helloworld);
}
}
http.send();
</script>
</head>
<body>
<p id="demo">Ajax-based</p>
</body>
</html><?xml version="1.0" encoding="UTF-8"?> <xml>"Hello World!"</xml>
XMLHttpRequest allows all HTTP methods to be usedXMLHttpRequest can be used for any content typeXMLHttpRequest ResponsesresponseText always contains the entity body of the HTTP responseXMLHttpRequest treats XML-oriented responses in a special waytext/xml, application/xml or …+xml responses are XML media typesresponseXML contains XML parsed into a DOM treeXMLHttpRequest ResponsesXMLHttpRequest allows all header fields to be inspectedgetResponseHeader() returns a specific response headergetAllResponseHeaders() returns all response headers// The following script:
var client = new XMLHttpRequest();
client.open("GET", "test.txt", true);
client.send();
client.onreadystatechange = function() {
if(this.readyState == 2) {
print(client.getResponseHeader("Content-Type"));
}
}
// ...should output something similar to the following text:
Content-Type: text/plain; charset=utf-8XMLHttpRequest Responsesbest match
addressesto be used in request
// The following script:
var client = new XMLHttpRequest();
client.open('GET', 'ajax-data');
client.setRequestHeader('Accept', 'application/json;q=1.0, application/xml;q=0.8');
client.send();
// ... results in the following header being sent:
...
Accept: application/json;q=1.0, application/xml;q=0.8
...XMLHttpRequest ImplementationsXMLHttpRequest in jQuery (Setup) ajaxSettings: {
url: location.href,
global: true,
type: "GET",
contentType: "application/x-www-form-urlencoded",
processData: true,
async: true,
/*
timeout: 0,
data: null,
username: null,
password: null,
traditional: false,
*/
// Create the request object; Microsoft failed to properly
// implement the XMLHttpRequest in IE7 (can't request local files),
// so we use the ActiveXObject when it is available
// This function can be overriden by calling jQuery.ajaxSetup
xhr: window.XMLHttpRequest && (window.location.protocol !== "file:" || !window.ActiveXObject) ?
function() {
return new window.XMLHttpRequest();
} :
function() {
try {
return new window.ActiveXObject("Microsoft.XMLHTTP");
} catch(e) {}
},
accepts: {
xml: "application/xml, text/xml",
html: "text/html",
script: "text/javascript, application/javascript",
json: "application/json, text/javascript",
text: "text/plain",
_default: "*/*"
}
},XMLHttpRequest in jQuery (Interface) get: function( url, data, callback, type ) {
// shift arguments if data argument was omited
if ( jQuery.isFunction( data ) ) {
type = type || callback;
callback = data;
data = null;
}
return jQuery.ajax({
type: "GET",
url: url,
data: data,
success: callback,
dataType: type
});
},
getScript: function( url, callback ) {
return jQuery.get(url, null, callback, "script");
},
getJSON: function( url, data, callback ) {
return jQuery.get(url, data, callback, "json");
},XMLHttpRequest in jQuery (Core) ajax: function( origSettings ) {
var s = jQuery.extend(true, {}, jQuery.ajaxSettings, origSettings);
var jsonp, status, data,
callbackContext = origSettings && origSettings.context || s,
type = s.type.toUpperCase();
// convert data if not already a string
if ( s.data && s.processData && typeof s.data !== "string" ) {
s.data = jQuery.param( s.data, s.traditional );
}
// Handle JSONP Parameter Callbacks
if ( s.dataType === "jsonp" ) {
if ( type === "GET" ) {
if ( !jsre.test( s.url ) ) {
s.url += (rquery.test( s.url ) ? "&" : "?") + (s.jsonp || "callback") + "=?";
}
} else if ( !s.data || !jsre.test(s.data) ) {
s.data = (s.data ? s.data + "&" : "") + (s.jsonp || "callback") + "=?";
}
s.dataType = "json";
}
// Build temporary JSONP function
if ( s.dataType === "json" && (s.data && jsre.test(s.data) || jsre.test(s.url)) ) {
jsonp = s.jsonpCallback || ("jsonp" + jsc++);
// Replace the =? sequence both in the query string and the data
if ( s.data ) {
s.data = (s.data + "").replace(jsre, "=" + jsonp + "$1");
}
s.url = s.url.replace(jsre, "=" + jsonp + "$1");
// We need to make sure
// that a JSONP style response is executed properly
s.dataType = "script";
// Handle JSONP-style loading
window[ jsonp ] = window[ jsonp ] || function( tmp ) {
data = tmp;
success();
complete();
// Garbage collect
window[ jsonp ] = undefined;
try {
delete window[ jsonp ];
} catch(e) {}
if ( head ) {
head.removeChild( script );
}
};
}best JavaScript framework
is there a collapse/expand folder view?)
is the framework openly licensed)