Vlastní zpracování obsahu AJAX pomocí sady nástrojů Dojo

Pokud byste se mě zeptali na prvních pět slov, která by měla popisovat jakýkoli rámec JavaScriptu, jedno z nich by bylo flexibilní. Sada nástrojů Dojo je ultraflexibilní téměř ve všech směrech, používá přizpůsobitelné třídy a dojo -objekty s prostorem názvů, aby byla umožněna maximální flexibilita. Jeden z těchto dojo -namespaced objekty, dojo.contentHandlers , je objekt obsahující páry klíč->hodnota pro zpracování výsledků požadavků AJAX. Dovolte mi, abych vám ukázal, jak používat tyto ovladače obsahu a jak si můžete vytvořit vlastní!

dojo.xhr a handleAs

Vytváření požadavků AJAX se provádí pomocí dojo.xhr Dojo metody. Odeslání základního požadavku GET by vypadalo takto:

dojo.xhrGet({
	url: "/ajax.php",
	load: function(result) {
		// Do something with the result here
	}
});

Výše uvedený požadavek předpokládá, že odpověď by měla být zpracována jako prostý text, jak byste očekávali. Dojo dojo.xhr všechny metody přijímají objekt s vlastnostmi pro zpracování požadavku a jedna vlastnost, kterou můžete přidat, je handleAs . handleAs vlastnost by měl být řetězec představující typ analýzy, která by měla být provedena s výsledkem před jeho předáním do load metoda nebo odložené zpětné volání. Hodnoty pro vlastnost handleAs mohou být json, javascript, xml nebo jiné varianty json. Pokud chci, aby byl můj požadavek zpracován jako JSON, zakódoval bych:

dojo.xhrGet({
	url: "/ajax.php",
	handleAs: "json",
	load: function(result) { // result is a JS object
		// Do something with the result here
	}
});

Výsledný objekt poskytnutý obslužnému programu zatížení je text analyzovaný do objektu JavaScript. Podobně, pokud chci, aby byl výsledek zpracován jako XML, zakódoval bych:

dojo.xhrGet({
	url: "/ajax.php",
	handleAs: "xml",
	load: function(result) { // result is a XMLDocument object
		// Do something with the result here
	}
});

Zpětné volání zatížení je poskytováno XMLDocument objekt. Jeden jednoduchý parametr mění způsob analýzy odpovědi na požadavek. Jak je to možné a jak můžete vytvořit vlastní handleAs metody? Jednoduché!

dojo.contentHandlers

dojo.contentHandlers objekt funguje jako slovník pro analýzu požadavku ajax. Parametr handleAs, který zadáte, se mapuje na klíč v rámci dojo.contentHandlers . dojo.contentHandlers objekt je dodáván s následujícími obslužnými nástroji obsahu: javascript, json, json-comment-filtred, json-comment-optional, text a xml. Zde je úryvek obsahující tyto "analyzátory":

var handlers = dojo._contentHandlers = dojo.contentHandlers = {

	text: function(xhr){ 
		// summary: A contentHandler which simply returns the plaintext response data
		return xhr.responseText; 
	},
	json: function(xhr){
		// summary: A contentHandler which returns a JavaScript object created from the response data
		return _d.fromJson(xhr.responseText || null);
	},
	"json-comment-filtered": function(xhr){ 

		if(!dojo.config.useCommentedJson){
			console.warn("Consider using the standard mimetype:application/json."
				+ " json-commenting can introduce security issues. To"
				+ " decrease the chances of hijacking, use the standard the 'json' handler and"
				+ " prefix your json with: {}&&\n"
				+ "Use djConfig.useCommentedJson=true to turn off this message.");
		}

		var value = xhr.responseText;
		var cStartIdx = value.indexOf("\/*");
		var cEndIdx = value.lastIndexOf("*\/");
		if(cStartIdx == -1 || cEndIdx == -1){
			throw new Error("JSON was not comment filtered");
		}
		return _d.fromJson(value.substring(cStartIdx+2, cEndIdx));
	},
	javascript: function(xhr){ 
		// summary: A contentHandler which evaluates the response data, expecting it to be valid JavaScript

		// FIXME: try Moz and IE specific eval variants?
		return _d.eval(xhr.responseText);
	},
	xml: function(xhr){
		// summary: A contentHandler returning an XML Document parsed from the response data
		var result = xhr.responseXML;
		//>>excludeStart("webkitMobile", kwArgs.webkitMobile);
		if(_d.isIE && (!result || !result.documentElement)){
			//WARNING: this branch used by the xml handling in dojo.io.iframe,
			//so be sure to test dojo.io.iframe if making changes below.
			var ms = function(n){ return "MSXML" + n + ".DOMDocument"; }
			var dp = ["Microsoft.XMLDOM", ms(6), ms(4), ms(3), ms(2)];
			_d.some(dp, function(p){
				try{
					var dom = new ActiveXObject(p);
					dom.async = false;
					dom.loadXML(xhr.responseText);
					result = dom;
				}catch(e){ return false; }
				return true;
			});
		}
		//>>excludeEnd("webkitMobile");
		return result; // DOMDocument
	},
	"json-comment-optional": function(xhr){
		// summary: A contentHandler which checks the presence of comment-filtered JSON and 
		//		alternates between the `json` and `json-comment-filtered` contentHandlers.
		if(xhr.responseText && /^[^{\[]*\/\*/.test(xhr.responseText)){
			return handlers["json-comment-filtered"](xhr);
		}else{
			return handlers["json"](xhr);
		}
	}
};

Co když však chceme přidat vlastní obslužný program obsahu? Vše, co musíte udělat, je přidat key=>parser do dojo.contentHandlers objekt!

// CSV parsing found at:  http://stackoverflow.com/questions/1293147/javascript-code-to-parse-csv-data

dojo.contentHandlers.csv = function(xhr) {
	
	// Set the data
	var responseText = xhr.responseText;
	var delimiter = ",";
	
	// Create a regular expression to parse the CSV values.
	var objPattern = new RegExp(
		 (
			  // Delimiters.
			  "(\\" + delimiter + "|\\r?\\n|\\r|^)" +

			  // Quoted fields.
			  "(?:\"([^\"]*(?:\"\"[^\"]*)*)\"|" +

			  // Standard fields.
			  "([^\"\\" + delimiter + "\\r\\n]*))"
		 ), "gi");


	// Create an array to hold our data. Give the array
	// a default empty first row.
	var arrData = [[]];

	// Create an array to hold our individual pattern
	// matching groups.
	var arrMatches = null;


	// Keep looping over the regular expression matches
	// until we can no longer find a match.
	while (arrMatches = objPattern.exec(responseText)){

		 // Get the delimiter that was found.
		 var strMatchedDelimiter = arrMatches[1];

		 // Check to see if the given delimiter has a length
		 // (is not the start of string) and if it matches
		 // field delimiter. If id does not, then we know
		 // that this delimiter is a row delimiter.
		 if (strMatchedDelimiter.length && (strMatchedDelimiter != delimiter)){
			  // Since we have reached a new row of data,
			  // add an empty row to our data array.
			  arrData.push([]);
		 }
		
		 // Now that we have our delimiter out of the way,
		 // let's check to see which kind of value we
		 // captured (quoted or unquoted).
		 if (arrMatches[2]){

			  // We found a quoted value. When we capture
			  // this value, unescape any double quotes.
			  var strMatchedValue = arrMatches[2].replace(
				   new RegExp("\"\"", "g"),
				   "\""
				   );
		 } else {
			  // We found a non-quoted value.
			  var strMatchedValue = arrMatches[3];
		 }
		 // Now that we have our value string, let's add
		 // it to the data array.
		 arrData[arrData.length - 1].push(strMatchedValue);
	}

	// Return the parsed data.
	return(arrData);
}

Výše uvedený fragment kódu vám umožňuje nechat výsledek vašeho požadavku XHR analyzovat jako obsah CSV; výsledkem se stane objekt JavaScriptu představující data CSV. Zde je návod, jak jej použít:

dojo.xhrGet({
	url: "/ajax.php",
	handleAs: "csv",
	load: function(result) { // result is a JS object
		// Do something with the result here
	}
});

Jedním klíčem k flexibilitě v rámci JavaScriptu jsou „slovníky“ nebo „sáčky s vlastnostmi“, které umožňují přidávat, odebírat a upravovat existující vlastnosti. Díky tomu, že Dojo používá dojo.contentHandlers a dojo.xhr 's handleAs vlastnost, můžete zpracovat výsledek svých požadavků AJAX předtím, než budou předány zpětnému volání!