ʲôÊÇAjax¼¼Êõ£¿
1.ʲôÊÇAjax?
AjaxµÄÈ«³ÆÊÇ£ºAsynchronousJavaScript+XML
2.AjaxµÄ¶¨Ò壺
Ajax²»ÊÇÒ»¸ö¼¼Êõ£¬Ëüʵ¼ÊÉÏÊǼ¸ÖÖ¼¼Êõ£¬Ã¿ÖÖ¼¼Êõ¶¼ÓÐÆä¶ÀÌØÕâ´¦£¬ºÏÔÚÒ»Æð¾Í³ÉÁËÒ»¸ö¹¦ÄÜÇ¿´óµÄм¼Êõ¡£
3.Ajax°üÀ¨£º
XHTMLºÍCSS
ʹÓÃÎĵµ¶ÔÏóÄ£ÐÍ(DocumentObjectModel)×÷¶¯Ì¬ÏÔʾºÍ½»»¥
ʹÓÃXMLºÍXSLT×öÊý¾Ý½»»¥ºÍ²Ù×÷
ʹÓÃXMLHttpRequest½øÐÐÒì²½Êý¾Ý½ÓÊÕ
ʹÓÃJavaScript½«ËüÃǰó¶¨ÔÚÒ»Æð
Web¿ª·¢ÁìÓòµÄ×îÐÂʱ÷ÖÊõÓïÆäʵÖÊÊÇ“¾Éò»»ÐÂÑÕ”¡£
Ajax£¨AsynchronousJavaScriptandXML£©ÊǽáºÏÁËJava¼¼Êõ¡¢XMLÒÔ¼°JavaScriptµÈ±à³Ì¼¼Êõ£¬¿ÉÒÔÈÿª·¢ÈËÔ±¹¹½¨»ùÓÚJava¼¼ÊõµÄWebÓ¦Ó㬲¢´òÆÆÁËʹÓÃÒ³ÃæÖØÔØµÄ¹ßÀý¡£
AjaxÊÇʹÓÿͻ§¶Ë½Å±¾ÓëWeb·þÎñÆ÷½»»»Êý¾ÝµÄWebÓ¦Óÿª·¢·½·¨¡£ÕâÑù£¬WebÒ³Ãæ²»Óôò¶Ï½»»¥Á÷³Ì½øÐÐÖØÐ¼Ӳ㬾ͿÉÒÔ¶¯Ì¬µØ¸üС£Ê¹ÓÃAjax£¬Óû§¿ÉÒÔ´´½¨½Ó½ü±¾µØ×ÀÃæÓ¦ÓõÄÖ±½Ó¡¢¸ß¿ÉÓᢸü·á¸»¡¢¸ü¶¯Ì¬µÄWebÓû§½çÃæ¡£
Òì²½JavaScriptºÍXML£¨AJAX£©²»ÊÇʲôм¼Êõ£¬¶øÊÇÖ¸ÕâÑùÒ»ÖÖ·½·¨£ºÊ¹Óü¸ÖÖÏÖÓм¼Êõ——°üÀ¨¼¶ÁªÑùʽ±í£¨CSS£©¡¢JavaScript¡¢XHTML¡¢XMLºÍ¿ÉÀ©Õ¹ÑùʽÓïÑÔת»»£¨XSLT£©£¬¿ª·¢Íâ¹Û¼°²Ù×÷ÀàËÆ×ÀÃæÈí¼þµÄWebÓ¦ÓÃÈí¼þ¡£ÊµÏÖAjaxµÄËùÓÐ×é¼þ¶¼ÒÑ´æÔÚÁËÐí¶àÄê¡£AdaptivePathµÄÓû§ÌåÑéÕ½ÂÔ²¿ÃÅÖ÷¹Ü¼æ´´°ìºÏ»ïÈËJesseJamesGarrett½ñÄê2Ô·¢±íÔÚAdaptivePathÍøÕ¾ÉϵÄһƪÎÄÕÂÖжÅ׫ÁËÕâ¸öÊõÓï¡£
Òì²½Õâ¸ö´ÊÊÇÖ¸AJAXÓ¦ÓÃÈí¼þÓëÖ÷»ú·þÎñÆ÷½øÐÐÁªÏµµÄ·½Ê½¡£Èç¹ûʹÓþÉģʽ£¬Ã¿µ±Óû§Ö´ÐÐijÖÖ²Ù×÷¡¢Ïò·þÎñÆ÷ÇëÇó»ñµÃÐÂÊý¾Ý£¬Webä¯ÀÀÆ÷¾Í»á¸üе±Ç°´°¿Ú¡£
Èç¹ûʹÓÃAJAXµÄÒ첽ģʽ£¬ä¯ÀÀÆ÷¾Í²»±ØµÈÓû§ÇëÇó²Ù×÷£¬Ò²²»±Ø¸üÐÂÕû¸ö´°¿Ú¾Í¿ÉÒÔÏÔʾлñÈ¡µÄÊý¾Ý¡£Ö»ÒªÀ´»Ø´«ËͲÉÓÃXML¸ñʽµÄÊý¾Ý£¬ÔÚä¯ÀÀÆ÷ÀïÃæÔËÐеÄJavaScript´úÂë¾Í¿ÉÒÔÓë·þÎñÆ÷½øÐÐÁªÏµ¡£JavaScript´úÂ뻹¿ÉÒÔ°ÑÑùʽ±í¼Óµ½¼ìË÷µ½µÄÊý¾ÝÉÏ£¬È»ºóÔÚÏÖÓÐÍøÒ³µÄij¸ö²¿·Ö¼ÓÒÔÏÔʾ¡£
ÔÚÃæÏòÏû·ÑÕßµÄÖî¶àÓ¦Óõ±ÖУ¬GoogleµÄGmailºÍGoogleMaps¾ÍÊÇ×î³£¼ûµÄÀý×Ó¡£ÔÚGmailµ±ÖУ¬AJAX¸ºÔðÈçºÎ¿ªÆôÏ̻߳Ự£¬ÒÔÏÔʾ²»Í¬ÓʼþµÄÎı¾ÄÚÈÝ¡£¶øÔÚMapsµ±ÖУ¬AJAXÔÊÐíÓû§ÒÔÒ»ÖÖËÆºõÎÞ·ìµÄ·½Ê½ÍÏÀ¼°¹ö¶¯µØÍ¼¡£
»¹ÓÐÑÅ»¢µÄFlickrÏñƬ¹²ÏíÓ¦ÓúÍÑÇÂíÑ·ÍøÕ¾µÄA9ËÑË÷ÒýÇæ¡£ÁíÍ⣬ÑÅ»¢ÐµÄWebÓʼþ·þÎñ¿ÉÄܺܿì¾Í»áÎüÒýAJAXÖ§³ÖÕßµÄĪ´ó¹Ø×¢£¬ÕâÏî·þÎñ»ùÓÚÑÅ»¢ÊÕ¹ºOddpostºóµÃµ½µÄ¼¼Êõ¡£
ÕâЩUI¶¼³ä·ÖµØÊ¹ÓÃÁ˺ǫ́ͨµÀ£¬Ò²±»Ò»Ð©¿ª·¢Õß³ÆÎª“
Ïà¹ØÎĵµ£º
PopupControlÀ©Õ¹Æ÷¿Ø¼þ¿ÉÒÔ¸½¼Óµ½ÈκοؼþÖ®ÉÏ£¬µ±Óû§µã»÷¸Ã¿Ø¼þʱ£¬½«µ¯³öÒ»¸öÔ¤ÏÈÖ¸¶¨ºÃµÄ¡¢ÏÔʾ¸½¼ÓÐÅÏ¢»òÓÃÀ´°ïÖúÓû§Ö´ÐÐijЩÉ趨µÄPanel¡£µ±¸Ã¿Ø¼þʧȥÊäÈë½¹µãÖ®ºó£¬Panel½«×Ô¶¯Ïûʧ£¬ÇÒÓû§ÔÚÆäÖнøÐеÄÅäÖý«±»É趨µ½À©Õ¹Æ÷µÄÄ¿±ê¿Ø¼þÖ®ÉÏ¡£
ʵ ......
var xmlHttp;
var flag = false;
function createXMLHttpRequest()
{
if(window.ActiveXObject)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest)
{
xmlHttp=new XMLHttpRequest();
}
}
fu ......
±¾ÎÄÄÚÈÝÕª×Ô£º¡¶Java Web¿ª·¢½Ì³Ì——ÈëÃÅÓëÌá¸ßƪ£¨JSP+Servlet£©¡·
½»»¥µÄ»ù±¾¹ý³Ì°üÀ¨£º
l ´´½¨XMLHttpRequest¶ÔÏó£»
l ·¢ËÍÇëÇó£»
l ´¦ÀíÏìÓ¦¡£
´ ......
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>JavaScript Sample</title>
<link rel="stylesheet" type="text/css" href="main.css" media="all">
<sc ......
dataÀàÐÍ
js´úÂ룺
$.post("getmaterial.do?method=getmaterial",
{name:name},
function (data) {
});
ÆäÖÐgetmaterial.do?method=getmaterialÊÇÇëÇóµÄurl£¬{name:name}ÊÇ´«µÝµ½ºǫ́µÄ²ÎÊý£¬¿ÉÒÔÓÃ
request.getParameter("name");»ñÈ¡£¬dataÊǺǫ́´«µÝ¹ýÀ´µÄÊý¾Ý¡£
action´úÂ룺
response.setContentType( ......