Native XMLHttpRequest Learning Log

Today decided to learn Ajax asynchronous XMLHttpRequest object, usually always use Jquery.ajax () is all right,

When you want to achieve a set of the details of the matter is found!jquery source is really profound and beautiful;

First look at the basic use of W3cschool, refer to the JQ version is v1.11.1

Http://www.w3school.com.cn/xml/xml_http.asp

The basic process is to do simple xmlhttprequest compatibility Processing, submit the request, and finally the callback processing results;

Setup1 Configuration

At the beginning of thinking how to write a beautiful parameter value, see the JQ Source code discovery is using Jquery.extend, and this function in many places are applied, it seems that the weight is very heavy oh;

The manual describes the use of one or more other objects to extend an object, to return the extended object, or to extend the jquery namespace itself if you do not specify target.

JQ is the first definition of the basic Parameter object ajaxsettings#8830 line start, and then call the Ajaxsetup method, in fact, the goods still call the jquery.extend to merge the object, just to determine whether it is an extended configuration object;

I am too dependent on only the simplest parameter to merge and get callback method things;

function Ajaxsetup (opations) {if (typeof opations = = ' object ') {for (key in opations) {//code ...}} return ajaxsetting;}

Setup2

Instantiate XMLHttpRequest to two methods Iswindowxhr and ISIEXHR, and then by JS Self-judged which one to use;

It's nothing special here! jquery is basically doing the same thing! It's just that it does a lot of ie6~9 browser-compatible code (the difficulty jQ2 just give up on treating them)

        // Create the request object         //  (this is still attached to ajaxsettings  for backward compatibility)          Jquery.ajaxsettings.xhr = window. Activexobject !== undefined ?// support: ie6+function ()  {// XHR cannot  access local files, always use ActiveX for that casereturn  !this.islocal &&// support: ie7-8// oldie xhr does not support  non-RFC2616 methods  (#13240)// see http://msdn.microsoft.com/en-us/library/ie/ ms536648 (v=vs.85) .aspx// and http://www.w3.org/protocols/rfc2616/rfc2616-sec9.html#sec9//  Although this check for six methods instead of eight// since  ie also does not support  "Trace"  and  "Connect"/^ (get|post|head|put|delete| Options) $/i.test ( this.type )  &&createstandardxhr ()  | |  CREATEACTIVEXHR ();}  :// for all other browsers, use the standard xmlhttprequest  objectcreateStandardXHR;

I just have a few lines of code without nutrients to be good!

var xmlHttp = iswindowxhr () | |        ISIEXHR (); function iswindowxhr () {//code ...} function isiexhr () {//code ...}

Setup3 value request server and processing callback

Here JQ does a lot of parameter value filtering, whether it is cross-domain request, head part of the assembly, whether cross-domain separated as if the two-part processing (do not know that there is no wrong!). The code is too long)

Search source jquery.ajaxtransport can be found;

And then also with the XMLHttpRequest process definition call send processing onreadystatechange in different states triggering events;

TODO: Add other state processing function StateChange () {if (xmlhttp.readystate = = 4) {//code ...}} return {' Ajax ': function (opations) {var settings = Ajaxsetup (opations); if (xmlHttp!== null && settings) {xmlHttp . onreadystatechange = Statechange;switch (settings[' type '].touppercase ()) {case ' POST '://code....break;case ' GET ':// Code....break;}} else {alert ("Your browser does not XMLHTTP.");}};

Find a good website in this study

whatwg.org

Later found that this guy and the people are very good luck;

Read more about "which HTML5?" WHATWG and the ways of the other

Http://www.cnblogs.com/xesam/archive/2012/07/23/2604254.html

Full code:

Index.html

<doctype html>
 
Xhr.js
 
var $ =  (function (Global) {var xmlhttp = iswindowxhr ()  | | &NBSP;ISIEXHR (); Var callback = {};var ajaxsetting = {//todo: Filter the address symbol, such as "/" ' URL ' at the end    : location.href, ' type '   :  ' GET ',//todo: Add type conversion judgment ' DataType '  :  ' Text ', ' async '  : true,//todo: Add support Object type ' data '   : null};function iswindowxhr ()   {try {if  (window. XMLHttpRequest)  {return new xmlhttprequest ();}}  catch  (e)  {}}function isiexhr ()  {try {if  (window. ActiveXObject)  {return new activexobject ("Microsoft.XMLHTTP");}}  catch  (e)  {}}function ajaxsetup (opations)  {if  (typeof opations ==   ' object ')  {for  (key in opations)  {if  (typeof ajaxsetting[key] != =  ' undefined ')  {ajaxsetting[key] = opations[key];}  else {switch (Typeof opatiOns[key]) {case  ' function ': Callback[key] = opations[key];break;}}} return ajaxsetting;} TODO: Add other status Processing Function statechange ()  {if  (xmlhttp.readystate == 4)  {if  ( xmlhttp.status == 200)  {if  (callback.success)  {//successreturn callback.success ( Xmlhttp.responsetext);}  else {return xmlhttp.response;}}  else {alert ("Problem retrieving xml data");}}} /* https://xhr.spec.whatwg.org/ */return {' Ajax '  : function (opations)  {var  Settings = ajaxsetup (opations);if  (xmlhttp !== null && settings)  {xmlhttp.onreadystatechange = statechange;switch (settings[' type '].touppercase ()) {case  ' Post ': Xmlhttp.open (' post ',  settings[' url '], settings[' async '); Xmlhttp.setrequestheader (" Content-type "," Application/x-www-form-urlencoded; charset=utf-8 "); Xmlhttp.send (ajaxSetting[' data '); Break;case  ' GET ': settings[' url '] +=  ('? ')  + ajaxsetting[' data '); Xmlhttp.open (' GET ',  settings[' url '], settings[' async '); Xmlhttp.send (null); break;}}  else {alert ("your browser does not support xmlhttp.");}};}) (window);
 
xmlhttprequestaction.php
 
<?phpdate_default_timezone_set ("PRC"); Echo json_encode (Array (' Date ' =>date (' y-m-d h:i:s '), ' POST ' =>$_post , ' GET ' =>$_get, ' content ' = ' Chinese '); >
 

Native XMLHttpRequest Learning Log