HTTP脚本化——XMLHttpRequest对象的学习笔记

var request = new XMLHttpRequest();
    // Emulate the XMLHttpRequest() constructor in IE5 and IE6
    if (window.XMLHttpRequest === undefined) {
    　　window.XMLHttpRequest = function() {
   　　 try {
        　　// Use the latest version of the ActiveX object if available
        　　return new ActiveXObject("Msxml2.XMLHTTP.6.0");
   　　 }catch (e1) {
        　　try {
    　　　　　　// Otherwise fall back on an older version
    　　　　　　return new ActiveXObject("Msxml2.XMLHTTP.3.0");
    　　　　} catch(e2) {
    　　　　　　// Otherwise, throw an error
   　　　　 　　throw new Error("XMLHttpRequest is not supported");
    　　　　}
    　　}
    };
}        

function postMessage(msg) {
　　var request = new XMLHttpRequest();      // ①New request
　　request.open("POST", "/log.php");        // ②POST to a server-side script
　　// Send the message, in plain-text, as the request body
　　request.setRequestHeader("Content-Type", "text/plain;charset=UTF-8"); //③Request body will be plain text
　　request.send(msg);                   // ④Send msg as the request body
　　// The request is done. We ignore any response or any error.
}

// Issue an HTTP GET request for the contents of the specified URL.
// When the response arrives successfully, verify that it is plain text
// and if so, pass it to the specified callback function
function getText(url, callback) {
　　var request = new XMLHttpRequest();         // ①Create new request
　　request.open("GET", url);                   // ② Specify URL to fetch
　　request.onreadystatechange = function() {   // ③Define event listener
　　　　// If the request is compete and was successful
　　　　if (request.readyState === 4 && request.status === 200) {
　　　　var type = request.getResponseHeader("Content-Type");
　　　　if (type.match(/^text/))                  // Make sure response is text
　　　　　　callback(request.responseText);       // Pass it to callback
　　　　}
　　};
　　request.send(null);         // ④Send the request now
}

// Issue a synchronous HTTP GET request for the contents of the specified URL.
// Return the response text or throw an error if the request was not successful
// or if the response was not text.
function getTextSync(url) {
　　var request = new XMLHttpRequest();      // Create new request
　　request.open("GET", url, false);            // Pass false for synchronous
　　request.send(null);                      // Send the request now
　　// Throw an error if the request was not 200 OK
　　if (request.status !== 200)  throw  new Error(request.statusText);
　　// Throw an error if the type was wrong
　　var type = request.getResponseHeader("Content-Type");
　　if (!type.match(/^text/))   throw new Error("Expected textual response; got: " + type);
　　return  request.responseText;
}

// Issue an HTTP GET request for the contents of the specified URL.
// When the response arrives, pass it to the callback function as a
// parsed XML Document object, a JSON-parsed object, or a string.
function get(url, callback) {
　　var request = new XMLHttpRequest();      // Create new request
　　request.open("GET", url);                 // Specify URL to fetch
　　request.onreadystatechange = function() {   // Define event listener
　　// If the request is compete and was successful
　　if (request.readyState === 4 && request.status === 200) {
　　　　// Get the type of the response
　　　　var type = request.getResponseHeader("Content-Type");
　　　　// Check type so we don‘t get HTML documents in the future
　　　　if (type.indexOf("xml") !== -1 && request.responseXML){  
　　　　　　callback(request.responseXML);               // XML response
　　　　}else if (type === "application/json"){
　　　　　　// JSON response, 先使用JSON.parse将对象转换为JSON对象
　　　　　　callback(JSON.parse(request.responseText));    
　　　　}else{
　　　　　　callback(request.responseText);               // String response
　　　　}
　　};
　　request.send(null);      // Send the request now
}

/*** Encode the properties of an object as if they were name/value pairs from  */
function encodeFormData(data) {
　　if (!data) return "";         // Always return a string
　　var pairs = [];             // To hold name=value pairs
　　for(var name in data) {     // For each name
　　　　if (!data.hasOwnProperty(name))  continue;            // Skip inherited
　　　　if (typeof data[name] === "function")  continue;         // Skip methods
　　　　var value = data[name].toString();                     // Value as string
　　　　name = encodeURIComponent(name.replace(" ", "+"));   // Encode name
　　　　value = encodeURIComponent(value.replace(" ", "+"));   // Encode value
　　　　pairs.push(name + "=" + value);                      // Remember name=value pair
　　}
　　return pairs.join(‘&‘);                 // Return joined pairs separated with &
}

function postData(url, data, callback) {
　　var request = new XMLHttpRequest();
　　request.open("POST", url);                  // POST to the specified url
　　request.onreadystatechange = function() {     // Simple event handler
　　if (request.readyState === 4 && callback)   // When response is complete
　　　　callback(request);                      // call the callback.
　　};   
　　// Set Content-Type
　　request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");  
　　request.send(encodeFormData(data));     // Send form-encoded data
}

function getData(url, data, callback) {
　　var request = new XMLHttpRequest();
　　request.open("GET", url + "?" + encodeFormData(data));    // with encoded data added
　　request.onreadystatechange = function() {               // Simple event handler
　　　　if (request.readyState === 4 && callback)  callback(request);
　　};
　　request.send(null);                  // Send the request
}

function postJSON(url, data, callback) {
　　var request = new XMLHttpRequest();
　　request.open("POST", url);                   // POST to the specified url
　　request.onreadystatechange = function() {     // Simple event handler
　　if (request.readyState === 4 && callback)  // When response is complete
　　　　callback(request);                     // call the callback.
　　};
　　request.setRequestHeader("Content-Type", "application/json");
　　request.send(JSON.stringify(data));
}

// Encode what, where, and radius in an XML document and post them to the
// specified url, invoking callback when the response is received
function postQuery(url, what, where, radius, callback) {
　　var request = new XMLHttpRequest();
　　request.open("POST", url);                  // POST to the specified url
　　request.onreadystatechange = function() {     // Simple event handler
　　　　if (request.readyState === 4 && callback) callback(request);
　　};
　　// Create an XML document with root element <query>
　　var doc = document.implementation.createDocument("", "query", null);
　　var query = doc.documentElement;          // The <query> element
　　var find = doc.createElement("find");        // Create a <find> element
　　query.appendChild(find);                  // And add it to the <query>
　　find.setAttribute("zipcode", where);          // Set attributes on <find>
　　find.setAttribute("radius", radius);
　　find.appendChild(doc.createTextNode(what));       // And set content of <find>
　　// Now send the XML-encoded data to the server.
　　// Note that the Content-Type will be automatically set.
　　request.send(doc);
}

// 查找有data-uploadto 属性的全部<input type="file"> 元素
// 并注册onchange handler 事件处理程序
//这样任何选择的文件都会自动通过POST方法发送到指定的 "uploadto" URL
// 服务器的响应是忽略的
whenReady(function() {                                 // Run when the document is ready
　　var elts = document.getElementsByTagName("input");      // All input elements
　　for(var i = 0; i < elts.length; i++) {                        // Loop through them
　　　　var input = elts[i];
　　　　if (input.type !== "file")  continue;                  // Skip all but file upload elts
　　　　var url = input.getAttribute("data-uploadto");         // Get upload URL
　　　　if (!url) continue;                                  // Skip any without a url
　　　　input.addEventListener("change", function() {         // When user selects file
　　　　　　var file = this.files[0];                          // Assume a single file selection
　　　　　　if (!file) return;                               // If no file, do nothing
　　　　　　var xhr = new XMLHttpRequest();               // Create a new request
　　　　　　xhr.open("POST", url);                         // POST to the URL
　　　　　　xhr.send(file);                                // Send the file as body
　　　　}, false);
　　}
});

function postFormData(url, data, callback) {
if (typeof FormData === "undefined")   throw new Error("FormData is not implemented");
var request = new XMLHttpRequest();               // New HTTP request
request.open("POST", url);                        // POST to the specified url
request.onreadystatechange = function() {           // A simple event handler.
if (request.readyState === 4 && callback)         // When response is complete
callback(request);                         // ...call the callback.
};
var formdata = new FormData();
for(var name in data) {
if (!data.hasOwnProperty(name)) continue;      // Skip inherited properties
var value = data[name];
if (typeof value === "function")  continue;       // Skip methods
// Each property becomes one "part" of the request.
// File objects are allowed here
formdata.append(name, value);               // Add name/value as one part
}
// Send the name/value pairs in a multipart/form-data request body. Each
// pair is one part of the request. Note that send automatically sets
// the Content-Type header when you pass it a FormData object
request.send(formdata);
}

function createCORSRequest(method, url){
　　var xhr = new XMLHttpRequest();
　　if (“withCredentials” in xhr){
     　　xhr.open(method, url, true);
　　} else if (typeof XDomainRequest != “undefined”){
　　xhr = new XDomainRequest();
　　xhr.open(method, url);
　　} else {
    　　xhr = null;
　　}
　　return xhr;
}
var request = createCORSRequest(“get”, “http://www.somewhere-else.com/page/”);
if (request){
　　　　request.onload = function(){
     　　//do something with request.responseText
　　};
　　request.send();
}

// Make a JSONP request to the specified URL and pass the parsed response data to the specified callback. 
// Add a query parameter named "jsonp" to
// the URL to specify the name of the callback function for the request.
function getJSONP(url, callback) {
　　// Create a unique callback name just for this request
　　var cbnum = "cb" + getJSONP.counter++;      // Increment counter each time
　　var cbname = "getJSONP." + cbnum;          // As a property of this function
　　// Add the callback name to the url query string using form-encoding
　　// We use the parameter name "jsonp". Some JSONP-enabled services
　　// may require a different parameter name, such as "callback".
　　if (url.indexOf("?") === -1)                  // URL doesn‘t already have a query section
    　　 url += "?jsonp=" + cbname;            // add parameter as the query section
　　else // Otherwise,
     　　url += "&jsonp=" + cbname;           // add it as a new parameter.
　　// Create the script element that will send this request
　　var script = document.createElement("script");
　　// Define the callback function that will be invoked by the script
　　getJSONP[cbnum] = function(response) {
　　try {
   　　callback(response);           // Handle the response data
　　} finally {                       // Even if callback or response threw an error
   　　delete getJSONP[cbnum];      // Delete this function
   　　script.parentNode.removeChild(script);             // Remove script
　　}
};
// Now trigger the HTTP request
script.src = url; // Set script url
document.body.appendChild(script); // Add it to the document
}
getJSONP.counter = 0;             // A counter we use to create unique callback names

Function loadJSON(url){
    var script = document.createElement(“script”);
    script.type = “text/javascript”;
    script.src = url;
    document.getElementsByTagName(“head”)[0].appendChild(script);
}