JavaScript-Ajaxの原理

Ajax(Asynchronous Javascript And XML)
  :           ,     ,           

一.JavaScriptシングルスレッド

  JavaScript    ,  Ajax                 ,
            ,onreadystatechange        ,  JavaScript     .

        , JavaScript  、      、      
  JavaScript  Html,       ,   JavaScript   ,       ;
               ,          ,  JavaScript     .

二.Ajaxの実装

    ,      javaScript  Http      ,    file://  
      D:\Software\Chrome\chrome.exe --allow-file-access-from-files,
 chrome     JS XMlHttpRequest    file://        
  : File          ,   Windows         

1.XML HttpRequest実装Ajax

//   XMLHttpRequest  
var xhr;
try{ 
    //Chrome/Firefox/Opera/Safari
    xhr=new XMLHttpRequest();
}catch(e){
    //IE
    try{    
        xhr=new ActiveXObject("Msxml2.XMLHTTP");
    }catch(e){
        xhr=new ActiveXObject("Microsoft.XMLHTTP");
    }
}

//   Http    
xhr.onreadystatechange=function(){
        //readyState
        //0     
        //1     ,  open()
        //2     ,  send()
        //3         
        //4       
        if(xhr.readyState==4){
            //status
            //200   (ok)
            //304      (not modified)
            //404      (not found)
            //403     (forbidden)
            //500      (internal service error)                 
            if(xhr.status==200||xhr.status==304){
                // responseText        
                // responseXML     XML  
                var jsonData = eval("("+ xmlHttp.responseText +")");
                for(var i=0;i

2.jQuery実装Ajax

$.get(url,    ,    ,      );
$.getJson(url,    ,    );
$.post(url,    ,    ,      );
      :xml/html/json

: http://www.jianshu.com/p/0215f63d481fCSDNブログ:http://blog.csdn.net/qq_32115439/article/details/54980581GitHubブログ:http://lioil.win/2017/02/11/Ajax.htmlCodingブログ:http://c.lioil.win/2017/02/11/Ajax.html