AJax¼¼Êõ

Ô­ÉúajaxÏê½â

×ÖºÅ+ ×÷ÕߣºH5Ö®¼Ò À´Ô´£ºH5Ö®¼Ò 2017-03-19 18:02 ÎÒÒªÆÀÂÛ( )

Ajxa¾Ö²¿Ë¢ÐÂÓÃÓÚÌá¸ßÓû§ÌåÑé¡£Ajax¼¼ÊõµÄºËÐÄÊÇXMLHttpRequest¶ÔÏ󣨼ò³ÆXHR£©XMLHttpRequest¶ÔÏóXMLHttpRequest¶ÔÏóÔÚie7¼°¸ü¸ß°æ±¾¿ÉÒÔÕâÑùÉêÃ÷¡£var xhr=ne

Ajxa¾Ö²¿Ë¢ÐÂÓÃÓÚÌá¸ßÓû§ÌåÑé¡£Ajax¼¼ÊõµÄºËÐÄÊÇXMLHttpRequest¶ÔÏ󣨼ò³ÆXHR£©

  • XMLHttpRequest¶ÔÏó
  • XMLHttpRequest¶ÔÏóÔÚie7¼°¸ü¸ß°æ±¾¿ÉÒÔÕâÑùÉêÃ÷¡£

    var xhr=new XMLHttpRequest();

     

  • XHRµÄÓ÷¨
  • ·¢ËÍgetÇëÇóд·¨ÊÇÕâÑù£º

    xhr.open(¡°get¡±,¡±example¡±,false); xhr.send(null);

     

    ÓÉÓÚÕâ´ÎÇëÇóʱͬ²½µÄ£¬JavaScript´úÂë»áµÈµ½·þÎñÆ÷ÏìÓ¦Ö®ºóÔÙ¼ÌÐøÖ´ÐУ¬ÔÚÊÕµ½ÏìÓ¦ºó£¬ÏìÓ¦µÄÊý¾Ý»á×Ô¶¯Ìî³äXHR¶ÔÏóµÄÊôÐÔ£¬Ïà¹ØµÄÊôÐÔÈçÏ£º

    ÔÚ½ÓÊÕµ½ÏìÓ¦ºó£¬µÚÒ»²½ÊǼì²éstatusÊôÐÔ£¬ÒÔÈ·¶¨ÏìÓ¦ÒѾ­³É¹¦·µ»Ø£¬ÎªÈ·±£½ÓÊÕµ½Êʵ±µÄÏàÓ¦£¬Ó¦¸ÃÏñÏÂÃæÕâÑùд£º

    xhr.open(¡°get¡±,¡±example.txt¡±,false); xhr.send(null); if((xhr.status>=200&&xhr.status<300)||xhr.status==304){ alert(xhr.responseText); }else{ alert(¡°Request was unsuccessful:¡±+xhr.status); }

     

    ºÜ¶àÇé¿öÏ£¬ÎÒÃÇ»¹ÊÇÒª·¢ËÍÒì²½ÇëÇ󣬲ÅÄÜÈÃJavaScript¼ÌÐøÖ´Ðжø²»±ØµÈ´ýÏìÓ¦£¬´Ëʱ£¬¿ÉÒÔ¼ì²âXHR¶ÔÏóµÄreadyStateÊôÐÔ£¬¸ÃÊôÐÔ±íʾÇëÇó/ÏìÓ¦¹ý³ÌµÄµ±Ç°»î¶¯½×¶Î£º

    Ö»ÒªreadyStateÊôÐÔµÄÖµÓÒÒ»¸öÖµ±ä³ÉÁíÒ»¸öÖµ£¬¶¼»á´¥·¢Ò»´Îreadystatechangeʼþ£¬¿ÉÒÔÀûÓÃÕâ¸öʼþÀ´¼ì²âÿ´Î״̬±ä»¯ºóµÄreadyStateµÄÖµ£¬Í¨³£ÎÒÃÇÖ»¶ÔreadyStateֵΪ4µÄ½×¶Î¸ÐÐËȤ£¬²»¹ý±ØÐëÔÚµ÷ÓÃopen֮ǰָ¶¨onreadystatechangeʼþ´¦Àí³ÌÐò²ÅÄÜÈ·±£¿çä¯ÀÀÆ÷¼æÈÝÐÔ¡£´úÂëÈçÏ£º

    var xhr=createXHR(); xhr.onreadystatechange=function(){ if(xhr.readyState==4){ if((xhr.status>=200&&xhr.status<300)||xhr.status==304){ alert(xhr.responseText); }else{ alert(¡°request was unsuccessful:¡±+xhr.status); } } }; xhr.open(¡°get¡±,¡±sxample¡±,true); xhr.send(null);

     

    ÒÔÉÏ´úÂëÀûÓÃDOM0¼¶·½·¨ÎªXHR¶ÔÏóÌí¼ÓÁËʼþ´¦Àí³ÌÐò£¬Ô­ÒòÊDz¢·ÇËùÓÐä¯ÀÀÆ÷¶¼Ö§³ÖDOM2¼¶·½·¨£¬ÓëÆäËûʼþ´¦Àí³ÌÐò²»Í¬£¬ÕâÀïûÓÐÏòonreadystatechangeʼþ´¦Àí³ÌÐòÖд«µÝevent¶ÔÏó£»±ØÐëͨ¹ýXHR¶ÔÏó±¾ÉíÈ·¶¨ÏÂÒ»²½¸ÃÔõô×ö¡£

    ÔÚ½ÓÊÕµ½ÏìӦ֮ǰ»¹¿ÉÒÔµ÷ÓÃabort()·½·¨À´È¡ÏûÒì²½ÇëÇó£¬ÈçÏ£º

    xhr.abort();

     

    µ÷ÓÃÕâ¸ö·½·¨ºó£¬XHR¶ÔÏó»áÍ£Ö¹´¥·¢Ê¼þ£¬¶øÇÒÒ²²»ÔÙÔÊÐí·ÃÎÊÈκÎÓëÏìÓ¦ÓйصĶÔÏóÊôÐÔ£¬ÔÚÖÕÖ¹ÇëÇóÖ®ºó£¬»¹Ó¦¸Ã¶ÔXHR¶ÔÏó½øÐнâÒýÓòÙ×÷£¬²»½¨ÒéÖØÓÃXHR¶ÔÏó¡£

  •  HTTPÍ·²¿ÐÅÏ¢
  • ÿ¸öHTTPÇëÇóºÍÏìÓ¦¶¼»á´øÓÐÏàÓ¦µÄÍ·²¿ÐÅÏ¢£¬Í·²¿ÐÅÏ¢ÓУº

    ËäÈ»²»Í¬ä¯ÀÀÆ÷ʵ¼Ê·¢Ë͵ÄÍ·²¿ÐÅÏ¢»áÓÐËù²»Í¬£¬µ«ÒÔÉÏÁгöµÄ»ù±¾ÉÏÊÇËùÓÐä¯ÀÀÆ÷¶¼»á·¢Ë͵ģ¬Ê¹ÓÃsetRequestHeader·½·¨¿ÉÒÔÉèÖÃ×Ô¶¨ÒåµÄÇëÇóÍ·²¿ÐÅÏ¢£¬Õâ¸ö·½·¨½ÓÊÜÁ½¸ö²ÎÊý£ºÍ·²¿×ֶεÄÃû³ÆºÍÍ·²¿×ֶεÄÖµ¡£È磺

    var xhr=createXHR(); xhr.onreadystatechange=function(){ if(xhr.readyState==4){ if((xhr.status>=200&&xhr.status<300)||xhr.status==304){ alert(xhr.responseText); }else{ alert(¡°Request was unsuccessful:¡±+xhr.status); } } }; xhr.open(¡°get¡±,¡±example.php¡±,true); xhr.setRequestHeader(¡°MyHeader¡±,¡±MyValue¡±); xhr.send(null);

     

    µ÷ÓÃXHR¶ÔÏóµÄgetResponseHeader·½·¨²¢´«ÈëÍ·²¿×Ö¶ÎÃû³Æ£¬¿ÉÒÔÈ¡µÃÏàÓ¦µÄÏìӦͷ²¿ÐÅÏ¢£¬¶øµ÷ÓÃgetAllResponseHeaders·½·¨Ôò¿ÉÒÔÈ¡µÃÒ»¸ö°üº¬ËùÓÐÍ·²¿ÐÅÏ¢µÄ³¤×Ö·û´®¡£

  • GetÇëÇó
  • GetÊÇ×î³£¼ûµÄÇëÇóÀàÐÍ£¬¿ÉÒÔ½«²éѯ×Ö·û´®²ÎÊý×·¼Óµ½URLµÄĩ⣬ÒԱ㽫ÐÅÏ¢·¢Ë͸ø·þÎñÆ÷£¬Ê¹ÓÃgetÇëÇó¾­³£»á·¢Ë͵ÄÒ»¸ö´íÎó¾ÍÊDzéѯ×Ö·û´®µÄ¸ñʽÎÊÌ⣬²éѯ×Ö·û´®ÖеÄÿ¸ö²ÎÊýÃûºÍÖµ¶¼±ØÐëʹÓÃencodeURIComponent½øÐбàÂ룬ȻºóÔڷŵ½URLµÄĩ⣬¶øÇÒËùÓÐÃû-Öµ¶Ô¶¼±ØÐëÓÉ&·Ö¸ô¡£

  • POSTÇëÇó
  • ʹÓÃƵÂʽö´ÎÓÚget£¬postÇëÇóÓ¦¸Ã°ÑÊý¾Ý×÷ΪÇëÇóµÄÖ÷ÌåÌá½»£¬¿ÉÒÔ°üº¬·Ç³£¶àµÄÊý¾Ý£¬¶øÇÒ¸ñʽ²»ÏÞ£¬ÓùýajaxÀ´Ìá½»±íµ¥ÒªÏȽ«Content-TypeÍ·²¿ÐÅÏ¢ÉèÖÃΪapplication/x-www-form-urlencoded£¬Ò²¾ÍÊÇ±íµ¥ÌύʱµÄÄÚÈÝÀàÐÍ¡£´úÂëÈçÏ£º

    function submitData(){ var xhr=createXHR(); xhr.onreadystatechange=function(){ if(xhr.readyState==4){ if((xhr.status>=200&&xhr.status<300)||xhr.status==304){ alert(xhr.responseText); }else{ alert(xhr.responseText); } } } }; xhr.open(¡°post¡±,postexample.php,true); xhr.setRequestHeader(¡°Content-Type¡±,¡±application/x-www-form-urlencoded¡±); var form=focument.getElementById(¡°user-info¡±); xhr.send(serialize(form));

     

  • XMLHttpRequest 2¼¶£ºFormData
  • FormDataΪÐòÁл¯±íµ¥ÒÔ¼°´´½¨Óë±íµ¥¸ñʽÏàͬµÄÊý¾ÝÌṩÁ˱ãÀû¡£

    var data=new FormData(); data.append(¡°name¡±,¡±Nicholas¡±); var data=new FormData(doucument.forms[0])

     

  • ³¬Ê±É趨
  • ±íʾÇëÇóÔڵȴýÏìÓ¦¶àÉÙºÁÃëÖ®ºó¾ÍÖÕÖ¹£¬ÔÚ¸ø¶¨µÄʱ¼äÄÚä¯ÀÀÆ÷»¹Ã»ÓнÓÊÕµ½ÏìÓ¦£¬ÄÇô¾Í»á´¥·¢timeoutʼþ£¬½ø¶ø»áµ÷ÓÃontimeoutʼþ³öÀ´³ÌÐò£¬´úÂëÈçÏ£º

    var xhr=createXHR(); xhr.onreadystatechange=function(){ if(xhr.readyState==4){ try{ if((xhr.status>=200&&xhr.status<300)||xhr.status==304){ alert(xhr.responseText); }else{ alert(¡°Request was unsuccessful:¡±+xhr.status); } }catch(ex){ } } } xhr.open(¡°get¡±,¡±timeout.php¡±,true); xhr.timeout=1000; xhr.ontimeout=function(){ alert(¡°Request did not return in a second¡±); }; xhr.send(null);

     

  • overrideMineType·½·¨
  • ¡¡

    1.±¾Õ¾×ñÑ­ÐÐÒµ¹æ·¶£¬ÈκÎתÔصĸå¼þ¶¼»áÃ÷È·±ê×¢×÷ÕߺÍÀ´Ô´£»2.±¾Õ¾µÄÔ­´´ÎÄÕ£¬ÇëתÔØʱÎñ±Ø×¢Ã÷ÎÄÕÂ×÷ÕߺÍÀ´Ô´£¬²»×ðÖØÔ­´´µÄÐÐΪÎÒÃǽ«×·¾¿ÔðÈΣ»3.×÷ÕßͶ¸å¿ÉÄܻᾭÎÒÃDZ༭Ð޸Ļò²¹³ä¡£

    Ïà¹ØÎÄÕÂ
    ÍøÓѵãÆÀ
    Å