jsÔõô»ñÈ¡ºó¶ËÊý¾Ý
javascript ¿Éͨ¹ýÒÔÏ·½·¨»ñÈ¡ºó¶ËÊý¾Ý£ºajax£ºÊ¹Óà xmlhttprequest ¹¤¾ßÏòЧÀÍÆ÷Òì²½·¢ËÍÇëÇ󣬴¦ÀíÏìÓ¦¡£fetch api£ºÊ¹Óà fetch() ÒªÁì¾ÙÐÐÍøÂçÇëÇ󣬷µ»Ø promise ¹¤¾ß²¢ÆÊÎöÏìÓ¦¡£
ÔõÑùʹÓà JavaScript »ñÈ¡ºó¶ËÊý¾Ý
JavaScript ¿ÉÒÔÔÚä¯ÀÀÆ÷ÖлñÈ¡ºó¶ËÊý¾Ý£¬ÊµÏÖÓëЧÀÍÆ÷¶ËµÄ½»»¥¡£³£ÓõÄÒªÁì°üÀ¨£º
1. AJAX (Asynchronous JavaScript and XML)
ä¯ÀÀÆ÷ͨ¹ý XMLHttpRequest ¹¤¾ßÏòЧÀÍÆ÷·¢³ö·ÇÛÕ±ÕÇëÇó¡£
ЧÀÍÆ÷·µ»ØÊý¾Ý£¬ä¯ÀÀÆ÷ʹÓà JavaScript ´¦ÀíºÍÏÔʾ¡£
XMLHttpRequest ¹¤¾ßÌṩÁËÐí¶àÒªÁ죬ÓÃÓÚÉèÖÃÇëÇó¡¢·¢ËÍÊý¾ÝºÍÎüÊÕÏìÓ¦¡£
2. Fetch API
Fetch API ÊÇÒ»¸ö¸üеġ¢¸ü¾«Á·µÄ·½·¨À´¾ÙÐÐÍøÂçÇëÇó¡£
¸Ã API ÌṩÁË fetch() ÒªÁ죬Ëü·µ»ØÒ»¸ö Promise ¹¤¾ß£¬¸Ã¹¤¾ßÆÊÎöΪÏìÓ¦¡£
ÏìÓ¦¹¤¾ß°üÀ¨ÖÖÖÖÒªÁ죬ÓÃÓÚ»á¼ûÏìӦ״̬¡¢±êÍ·ºÍÕýÎÄ¡£
°ì·¨£º
ʹÓà AJAX£º
// ½¨ÉèXMLHttpRequest¹¤¾ß var xhr = new XMLHttpRequest(); // ÉèÖÃÇëÇó xhr.open("GET", "url_to_backend", true); // ÉèÖÃÇëÇóÍ·ÐÅÏ¢£¨¿ÉÑ¡£© xhr.setRequestHeader("Content-Type", "application/json"); // ·¢ËÍÇëÇó xhr.send(); // ÆÚ´ýÏìÓ¦ xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { // ÏìÓ¦ÒÑ×¼±¸ºÃ var data = xhr.responseText; // ´¦ÀíÊý¾Ý } };
µÇ¼ºó¸´ÖÆ
ʹÓà Fetch API£º
// Ö´ÐÐÇëÇó fetch("url_to_backend") .then(response => { if (response.ok) { // ÏìÓ¦ÀÖ³É return response.json(); } else { // ÏìӦʧ°Ü throw new Error("Error: " + response.status); } }) .then(data => { // ´¦ÀíÊý¾Ý }) .catch(error => { // ÍÉ»¯´¦Àí });
µÇ¼ºó¸´ÖÆ
×¢ÖØÊÂÏ
È·±£ºó¶ËЧÀÍÆ÷ÔÊÐíÀ´×Ô JavaScript µÄÇëÇ󣬼´ÆôÓÿçÓò×ÊÔ´¹²Ïí (CORS)¡£
׼ȷÆÊÎöЧÀÍÆ÷ÏìÓ¦µÄÊý¾ÝÃûÌã¬ÀýÈç JSON¡¢XML »òÎı¾¡£
´¦ÀíÇëÇóºÍÏìÓ¦ÖпÉÄÜ·ºÆðµÄ¹ýʧ¡£
ÒÔÉϾÍÊÇjsÔõô»ñÈ¡ºó¶ËÊý¾ÝµÄÏêϸÄÚÈÝ£¬¸ü¶àÇë¹Ø×¢±¾ÍøÄÚÆäËüÏà¹ØÎÄÕ£¡