ajaxÓëxmlÊý¾Ý½»»¥
ajaxÓëxmlÊý¾Ý½»»¥
AJAX¿ÉÒÔͨ¹ýʹÓÃXMLÎļþÀ´ÈÃÐÅÏ¢²úÉú»¥¶¯
AJAX XML ʵÀý
ÔÚÏÈÃæµÄAJAXʵÀýÖÐÎÒÃǽ«ÑÝʾÈçºÎÈÃWEBÒ³ÃæÊ¹ÓÃAJAX¼¼ÊõÀ´»ñÈ¡µ½À´×ÔXMLÎļþµÄÐÅÏ¢
´ÓÏÂÀ¿òÖÐÑ¡ÔñÒ»ÅÌCD
Ñ¡ÔñCD: Bob DylanBonnie TylerDolly Parton
TITLE: Greatest Hits
ARTIST: Dolly Parton
COUNTRY: USA
COMPANY: RCA
PRICE: 9.90
YEAR: 1982
AJAX ʵÀý½âÎö
The example above contains a simple HTML form and a link to a JavaScript:
ÉÏÃæµÄ¾ÙÀý°üº¬Á˼òµ¥µÄHTML±íµ¥ÒÔ¼°Á¬½Óµ½JSµÄlink£º
<html>
<head>
<script src="selectcd.js"></script>
</head>
<body>
<form>
Select a CD:
<select name="cds" onchange="showCD(this.value)">
<option value="Bob Dylan">Bob Dylan</option>
<option value="Bonnie Tyler">Bonnie Tyler</option>
<option value="Dolly Parton">Dolly Parton</option>
</select>
</form>
<p>
<div id="txtHint"><b>CD info will be listed here.</b></div>
</p>
</body>
</html>
As you can see it is just a simple HTML form with a simple drop down box called "cds".
ÕýÈçÄãËù¿´µ½µÄ£¬ËüÖ»ÊǼòµ¥µÄHTML±íµ¥£¬ÀïÃæÓиöÃûΪ"cds"µÄÏÂÀ¿ò
The paragraph below the form contains a div called "txtHint". The div is used as a placeholder for info retrieved from the web server.
ÔÚ±íµ¥ÏÂÃæµÄ¶ÎÂäÀïÓÐÒ»¸öÃûΪ"txtHint"µÄdiv¡£Ëü¿ÉÓÃÀ´ÏÔʾ´Óweb·þÎñÆ÷ÉÏ»ñÈ¡µ½µÄÐÅÏ¢
When the user selects data, a function called "showCD" is executed. The execution of the function is triggered by the "onchange" event. In other words: Each time the user change the value in the drop down box, the function showCD is called.
µ±Óû§Ñ¡ÔñÁËÐÅÏ¢£¬Ò»¸öÃûΪ"showCD"µÄº¯Êý¾Í»á±»Ö´ÐС£Õâ¸öº¯ÊýÖ´ÐÐÓë"onchange"ʼþÏà¹ØÁª¡£»»¾ä»°Ëµ£ºÃ¿µ±Óû§¸Ä±äÁËÏÂÀ¿òÀïµÄÄÚÈÝ£¬Õâ¸öº¯Êý¾Í»áÖ´ÐС£
The JavaScript code is listed below.
JS´úÂ뽫ÔÚÏÂÃæÁгö
The AJAX JavaScript
This is the JavaScript code stored in the file "selectcd.js":
Õâ¸öÃûΪ"selectcd.js"µÄJSÎļþ±£´æÁËÎÒÃÇÇ°ÃæËù½²µ½µÄ´úÂ룺
var xmlHttp
function s
Ïà¹ØÎĵµ£º
½ñÌì³õ´Î½Ó´¥AjaxÄÇôÎÒ½«ÎÒµÄѧϰ¼Ç¼ÏÂÀ´£¬×î½ü¼ÇÐÔ²»Ì«ºÃ¡£±¸Íü°É
1¡¢Ê×ÏÈ´ÓÍøÂ·ÉÏÏÂÔØAjaxÀ©Õ¹°ü£¬VS2008Ö»ÊÇ´ø×Å×î»ù´¡µÄÈý¸öAjax¿Ø¼þ¡£ÄÇôÎÒÃÇÏÂÔØAjaxControlToolkit¿Ø¼þ£¬½«ÏÂÔØºóµÄѹËõ°ü½âѹ¡£ÕÒ³öAjaxControlToolkit.dllËùÔÚλÖá£
2¡¢ÔÚVS2008ÖУ¬ËæÒâÕÒÒ»¸öÑ¡Ï£¬»òÕߣ¬Ð½¨Ò»¸öÑ¡ÏÀ´·ÅÈëÎÒÃÇËù¼ÓÈëµÄ ......
1£ºAjax¿ÉÒÔͨ¹ýJavaScriptµÄXMLHttpRequest¶ÔÏóÓë·þÎñÆ÷½øÐÐͨÐÅ£¬Í¨¹ýXMLHttpRequest£¬JavaScript¿ÉÒÔÔÚ²»ÖØÔØÒ³ÃæµÄÇé¿öÏÂÓë·þÎñÆ÷½øÐÐͨÐÅ¡£
2£ºXMLHttpRequest ä¯ÀÀÆ÷Ö§³Ö
<script type="text/javascript">
function ajaxFunction()
{
var xmlHttp;
try
{
xmlHtt ......
$.ajax({
type: "post",
url: loginUrl,
data: "username=" +uname + "&password=" +pwd,
async: ......
ÔÚʹÓÃAJAX½øÐгÌÐò¿ª·¢µÄʱºò£¬Ò»Ö±¶¼»áÃæ¶ÔÒ»¸ö»º´æµÄÎÊÌ⣡£¡
¼´ÊÇ£¬ÉÏ´ÎÇëÇóµÄʱºò£¬ÒòΪÄãµÄSQLÓï¾ä»òÕ߯äËûÔÒò£¬webserviceÖзµ»ØÖµÎª¿Õ£¬²»ÊÇÄãÏëÒªµÄ½á¹û¼¯£¬ÔÚÄã·¢ÏÖwebserviceÖÐÓï¾äÌå³ö´íºó£¬½øÐÐÐ޸ģ¬ÖØÐ²âÊÔ£¬ÈÔÈ»ÊÇÉϴεķµ»Ø½á¹û£¡¸Ð¾õ¾ÍÏñÄãµÄÐÞ¸ÄÍêÈ«ÎÞЧ¡£¡£
Æäʵ£¬ÕâÊÇÔÚAJAXµ ......
²ÎÊý:
options
·µ»ØÖµ:
XMLHttpRequest
ʹÓÃHTTPÇëÇóÒ»¸öÒ³Ãæ¡£
ÕâÊÇjQueryµÄµÍ¼¶AJAXʵÏÖ¡£Òª²é¿´¸ß¼¶³éÏ󣬼û$.set¡¢$.postµÈ£¬ÕâЩ·½·¨¸üÒ×ÓÚÀí½âºÍʹÓᣵ«Êǹ¦ÄÜÉÏÓÐÏÞÖÆ(ÀýÈ磬ûÓдí
Îó´¦Àíº¯Êý)¡£
¾¯¸æ£ºÈç¹ûÊý¾ÝÀàÐÍÖ¸¶¨Îª"script"£¬ÄÇôPOST×Ô¶¯×ª»¯ÎªGET·½·¨¡£(ÒòΪscript»á×÷Ϊһ¸öǶÈëÒ³ ......