AJax¼¼Êõ

AJAX½Ì³Ì(8)£ºAJAX ÇëÇóʵÀý

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

AJAX½Ì³Ì(8)£ºAJAX ÇëÇóʵÀý,ÎÒÃÇÒÑ¿´µ½ AJAX ¿É±»ÓÃÀ´´´½¨¸ü¶à½»»¥ÐÔµÄÓ¦ÓóÌÐò¡£

ÍøÒ³ÖÆ×÷WebjxÎÄÕ¼ò½é£ºÎÒÃÇÒÑ¿´µ½ AJAX ¿É±»ÓÃÀ´´´½¨¸ü¶à½»»¥ÐÔµÄÓ¦ÓóÌÐò¡£

ÎÒÃÇÒÑ¿´µ½ AJAX ¿É±»ÓÃÀ´´´½¨¸ü¶à½»»¥ÐÔµÄÓ¦ÓóÌÐò¡£

AJAX SuggestʵÀý

ÔÚÏÂÃæµÄ AJAX Àý×ÓÖУ¬ÎÒÃÇ»áÑÝʾµ±Óû§ÏòÒ»¸ö±ê×¼µÄ HTML ±íµ¥ÖÐÊäÈëÊý¾ÝʱÍøÒ³ÈçºÎÓë web ·þÎñÆ÷½øÐÐͨÐÅ¡£

ÔÚÏÂÃæµÄÎı¾¿òÖÐÊäÈëÃû×Ö£º

Suggestions£º

Àý×Ó½âÊÍ - HTML±íµ¥

±íµ¥µÄ HTML ´úÂ룺

<form> First Name:<input type="text" id="txt1" onkeyup="showHint(this.value)" /> </form> <p>Suggestions: <span id="txtHint"></span></p>

ÕýÈçÄú¿´µ½µÄ£¬ÕâÊÇÒ»¸ö¼òµ¥µÄ´øÓÐÃûΪ "txt1" ÊäÈëÓòµÄ HTML ±íµ¥¡£ÊäÈëÓòµÄʼþÊôÐÔ¶¨ÒåÁËÒ»¸öÓÉ onkeyup ʼþ´¥·¢µÄº¯Êý¡£

±íµ¥ÏÂÃæµÄ¶ÎÂä°üº¬ÁËÒ»¸öÃûΪ "txtHint" µÄ span£¬Õâ¸ö span ³äµ±ÁËÓÉ web ·þÎñÆ÷ËùÈ¡»ØµÄÊý¾ÝµÄλÖÃռλ·û¡£

µ±Óû§ÊäÈëÊý¾Ýʱ£¬ÃûΪ "showHint()" µÄº¯Êý¾Í»á±»Ö´ÐС£º¯ÊýµÄÖ´ÐÐÊÇÓÉ "onkeyup" ʼþ´¥·¢µÄ¡£ÁíÍâÐèҪ˵Ã÷µÄÊÇ£¬µ±Óû§ÔÚÎı¾ÓòÖÐÊäÈëÊý¾Ýʱ°ÑÊÖÖ¸´Ó¼üÅÌ°´¼üÉÏÒÆ¿ªÊ±£¬º¯Êý showHint ¾Í»á±»µ÷Óá£

Àý×Ó½âÊÍ - showHint() º¯Êý

showHint() º¯ÊýÊÇÒ»¸öλÓÚ HTML Ò³Ãæ head ²¿·ÖµÄºÜ¼òµ¥µÄ JavaScript º¯Êý¡£

´Ëº¯Êý°üº¬ÒÔÏ´úÂ룺

function showHint(str) { if (str.length==0) { document.getElementById("txtHint").innerHTML=""; return; } xmlHttp=GetXmlHttpObject() if (xmlHttp==null) { alert ("ÄúµÄä¯ÀÀÆ÷²»Ö§³ÖAJAX£¡"); return; } var url="gethint.asp"; url=url+"?q="+str; url=url+"&sid="+Math.random(); xmlHttp.onreadystatechange=stateChanged; xmlHttp.open("GET",url,true); xmlHttp.send(null); }

ÿµ±ÓÐ×Ö·ûÊäÈëÎı¾¿òʱ£¬´Ëº¯Êý¾Í»áÖ´ÐС£

¼ÙÈçÎı¾ÓòÖдæÔÚijЩÊäÈ룬º¯Êý¾Í»áÖ´ÐУº

Àý×Ó½âÊÍ - GetXmlHttpObject() º¯Êý

ÉÏÃæµÄÀý×ӿɵ÷ÓÃÃûΪ GetXmlHttpObject() µÄº¯Êý¡£

´Ëº¯ÊýµÄ×÷ÓÃÊǽâ¾öΪ²»Í¬ä¯ÀÀÆ÷´´½¨²»Í¬µÄ XMLHTTP ¶ÔÏóµÄÎÊÌâ¡£

ÕâÊǴ˺¯ÊýµÄ´úÂ룺

function GetXmlHttpObject() { var xmlHttp=null; try { // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); } catch (e) { // Internet Explorer try { xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } } return xmlHttp; }

Àý×Ó½âÊÍ - stateChanged() º¯Êý

stateChanged() º¯Êý°üº¬ÏÂÃæµÄ´úÂ룺

function stateChanged() { if (xmlHttp.readyState==4) { document.getElementById("txtHint").innerHTML=xmlHttp.responseText; } }

ÿµ± XMLHTTP ¶ÔÏóµÄ״̬·¢Éú¸Ä±äʱ£¬stateChanged() º¯Êý¾Í»áÖ´ÐС£

µ±×´Ì¬±ä¸üΪ 4£¨“Íê³É”£©Ê±£¬txtHint ռλ·ûµÄÄÚÈݾͱ»ÏìÓ¦Îı¾À´Ìî³ä¡£

¡¡

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

Ïà¹ØÎÄÕÂ
  • AJAX½Ì³Ì(2)£ºAJAX HttpÇëÇó

    AJAX½Ì³Ì(2)£ºAJAX HttpÇëÇó

    2017-02-27 09:02

  • ajaxµÄxmlHttpRequest¶ÔÏó

    ajaxµÄxmlHttpRequest¶ÔÏó

    2017-02-27 08:04

  • phpÅжÏÒ»¸öÇëÇóÊÇ·ñÊÇ AJAX ÇëÇó

    phpÅжÏÒ»¸öÇëÇóÊÇ·ñÊÇ AJAX ÇëÇó

    2017-02-26 08:03

  • Thinkphp+ajaxʵÏÖÎÞˢзÖÒ³

    Thinkphp+ajaxʵÏÖÎÞˢзÖÒ³

    2017-02-25 14:01

ÍøÓѵãÆÀ
«