Encapsulate Ajax Principles

Encapsulate Ajax Principles

1. first process the user if you do not pass some parameters, set the default value
   • type default get
   • default URL is current page
   • default Async method Request
   • data defaults to {}
2. handles user-passed parameter objects
   • traversal, stitching into key=value&key=value form, adding an array
   • creates xhr through XMLHttpRequest objects, and earlier IE browsers do not support XMLHttpRequest objects, via var xhr = new ActiveXObject (' Msxm12.xmlhttp Create
   • method to determine the user's request
     • get: Stitching data behind URL,
     • post: Need to add a request header and pass data with the Send method
   • Determine if data is successfully requested
     • xhr.readystate = = 4 && xhr.status = = $ Indicates successful request
   The
   • is processed based on the data type returned by the server and then passed out with callback
     • if the data returned in JSON format is converted to a JS object json.parse
     • in XML format, Returns the DOM document object
     • passes the processed data out with callback
   • optimization!!! The
     • mounts the parameters that the user needs to pass in to the options object, and the user only has to pass in an object to be able to use the

function Ajax (Options) {//Default value processing, when the user does not pass certain parameters, set some defaults//set the default value for type Getoptions.type = Options.type | | "Get";//Set the default value of the request address to the current page address Options.url = Options.url | | location.href;////Set default value for async Options.async = Options.async | | "true";//Set options.data default value Options.data = Options.data | | {};//handles the request parameter (data) object that the user passes in//{key: "123", Age:1, Gender: "Male"}//key=123&age=1&gender=malevar Dataarr = [];for (var k in Options.data) {Dataarr.push (k + "=" + Options.data[k]);} var datastr = Dataarr.join ("&"), var xhr = new XMLHttpRequest (); Xhr.open (options.type, Options.type = = "get"? Options. URL + "?" + DataStr:options.url, Options.async), if (Options.type = = "Post") {Xhr.setrequestheader ("Content-type", " Application/x-www-form-urlencoded ");} Xhr.send (Options.type = = "Get"? null:datastr), if (options.async) {xhr.onreadystatechange = function () {if ( Xhr.readystate = = 4 && xhr.status = = $) {var type = Xhr.getresponseheader ("Content-type"); var result;if ( Type.indexof ("JSON")! =-1) {result = Json.parse (xhr.reSponsetext);} else if (type.indexof ("xml")! =-1) {result = Xhr.responsexml;} Else{result = Xhr.responsetext;} Options.success (result);}}} Else{var type = Xhr.getresponseheader ("Content-type"); var result;if (Type.indexof ("json")! =-1) {result = Json.parse ( Xhr.responsetext);} else if (type.indexof ("xml")! =-1) {result = Xhr.responsexml;} Else{result = Xhr.responsetext;} Options.success (result);}} function get (options) {Options.type = "get"; Ajax (options);} function post (options) {Options.type = "post"; Ajax (options);} Ajax ({//URL: "json.php",//Data: {key: "123", Age:1, Gender: "Male"},//success:function (data) {//Console.log (data); }//}); get ({URL: "json.php", success:function (data) {Console.log (data)}) Ajax ({//URL: "xml.php",//Type: "Get",//Data: {key: "123", Age:1, Gender: "Male"},//success:function (data) {//cons Ole.log (data);//}//});

　　

Encapsulate Ajax Principles