\uc6cc\ub4dc\ud504\ub808\uc2a4\ub294 \uc6f9\uc0ac\uc774\ud2b8\uc640 \ube14\ub85c\uadf8\ub97c \ub9cc\ub4dc\ub294 \ub370 \uc720\uc6a9\ud55c \ud50c\ub7ab\ud3fc\uc774\uc9c0\ub9cc, \uc0ac\uc6a9\uc790 \uacbd\ud5d8\uc744 \uac1c\uc120\ud558\uace0 \ub354 \ub3d9\uc801\uc778 \uc6f9\ud398\uc774\uc9c0\ub97c \ub9cc\ub4e4\uae30 \uc704\ud574\uc11c\ub294 \uace0\uae09 \uae30\ub2a5\uc744 \uad6c\ud604\ud560 \ud544\uc694\uac00 \uc788\uc2b5\ub2c8\ub2e4. \uadf8\uc911\uc5d0\uc11c\ub3c4 AJAX(Asynchronous JavaScript and XML)\ub294 \uc2e4\uc2dc\uac04 \ub370\uc774\ud130 \ucc98\ub9ac\uc640 \ub3d9\uc801 \ucf58\ud150\uce20 \uc5c5\ub370\uc774\ud2b8\ub97c \uac00\ub2a5\ud558\uac8c \ud574\uc90d\ub2c8\ub2e4.<\/p>\n
AJAX\ub294 \ud074\ub77c\uc774\uc5b8\ud2b8\uc640 \uc11c\ubc84 \uac04\uc758 \ube44\ub3d9\uae30\uc801 \uc694\uccad\uc744 \uac00\ub2a5\ud558\uac8c \ud558\ub294 \uae30\uc220\uc785\ub2c8\ub2e4. \uc989, \ud398\uc774\uc9c0 \uc804\uccb4\ub97c \uc0c8\ub85c \uace0\uce58\uc9c0 \uc54a\uace0\ub3c4 \uc11c\ubc84\uc5d0 \uc694\uccad\uc744 \ubcf4\ub0bc \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc774 \uae30\uc220\uc740 \uc0ac\uc6a9\uc790 \uc778\ud130\ud398\uc774\uc2a4(UI)\ub97c \ubcf4\ub2e4 \ub3d9\uc801\uc73c\ub85c \ub9cc\ub4e4\uc5b4 \uc8fc\uba70, \uc0ac\uc6a9\uc790 \uacbd\ud5d8\uc744 \ud5a5\uc0c1\uc2dc\ud0b5\ub2c8\ub2e4.<\/p>\n
AJAX\ub294 \ub2e4\uc74c\uacfc \uac19\uc740 \uae30\uc220\uc744 \uc870\ud569\ud558\uc5ec \uc791\ub3d9\ud569\ub2c8\ub2e4:<\/p>\n
AJAX\ub97c \ud65c\uc6a9\ud568\uc73c\ub85c\uc368 \uc5bb\ub294 \uc8fc\uc694 \uc774\uc810\uc740 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4:<\/p>\n
\ub2e4\uc74c\uc740 AJAX\ub97c \uc0ac\uc6a9\ud558\uc5ec \ub313\uae00\uc744 \uc2e4\uc2dc\uac04\uc73c\ub85c \uc5c5\ub370\uc774\ud2b8\ud558\ub294 \uc608\uc81c\uc785\ub2c8\ub2e4. \uc0ac\uc6a9\uc790\uac00 \ub313\uae00\uc744 \ub0a8\uae30\uba74 \ud398\uc774\uc9c0\ub97c \uc0c8\ub85c \uace0\uce58\uc9c0 \uc54a\uace0\ub3c4 \ub313\uae00 \uc139\uc158\uc774 \uc5c5\ub370\uc774\ud2b8\ub429\ub2c8\ub2e4.<\/p>\n
<div id=\"comment-section\">\n <h2>\ub313\uae00<\/h2>\n <div id=\"comments-container\"><\/div>\n <textarea id=\"comment-text\" placeholder=\"\ub313\uae00\uc744 \uc785\ub825\ud558\uc138\uc694...\"><\/textarea>\n <button id=\"submit-comment\">\ub313\uae00 \ub0a8\uae30\uae30<\/button>\n<\/div><\/code><\/pre>\nJavaScript \ucf54\ub4dc<\/h3>\ndocument.getElementById('submit-comment').addEventListener('click', function() {\n var comment = document.getElementById('comment-text').value;\n\n var xhr = new XMLHttpRequest();\n xhr.open('POST', 'your-server-endpoint.php', true);\n xhr.setRequestHeader('Content-Type', 'application\/x-www-form-urlencoded');\n\n xhr.onload = function() {\n if (xhr.status === 200) {\n \/\/ \ub313\uae00\uc774 \uc131\uacf5\uc801\uc73c\ub85c \uc800\uc7a5\ub418\uba74\n var newComment = document.createElement('div');\n newComment.textContent = comment;\n document.getElementById('comments-container').prepend(newComment);\n document.getElementById('comment-text').value = ''; \/\/ \ub313\uae00 \uc785\ub825\ub780 \ucd08\uae30\ud654\n }\n };\n\n xhr.send('comment=' + encodeURIComponent(comment));\n});<\/code><\/pre>\nAJAX \uad6c\ud604\ud558\uae30<\/h2>\n
\uc6cc\ub4dc\ud504\ub808\uc2a4\uc5d0\uc11c AJAX\ub97c \uad6c\ud604\ud558\uae30 \uc704\ud574\uc11c\ub294 \uba3c\uc800 AJAX \uc694\uccad\uc744 \ucc98\ub9ac\ud560 PHP \ucf54\ub4dc\ub97c \uc791\uc131\ud574\uc57c \ud569\ub2c8\ub2e4. \uc774 \ub2e8\uacc4\uc5d0\uc11c\ub294 \uc6cc\ub4dc\ud504\ub808\uc2a4\uc758 AJAX API\ub97c \uc0ac\uc6a9\ud560 \uac83\uc785\ub2c8\ub2e4. \ub2e4\uc74c\uacfc \uac19\uc740 \uc808\ucc28\ub97c \ud1b5\ud574 \uc9c4\ud589\ud569\ub2c8\ub2e4.<\/p>\n
1. JavaScript \ud30c\uc77c \ub4f1\ub85d<\/h3>\nfunction enqueue_ajax_scripts() {\n wp_enqueue_script('ajax-script', get_template_directory_uri() . '\/js\/ajax.js', array('jquery'), null, true);\n wp_localize_script('ajax-script', 'ajax_object', array('ajax_url' => admin_url('admin-ajax.php')));\n}\nadd_action('wp_enqueue_scripts', 'enqueue_ajax_scripts');<\/code><\/pre>\n2. AJAX \uc694\uccad \ucc98\ub9ac\ud558\uae30<\/h3>\nfunction handle_ajax_request() {\n \/\/ \uc694\uccad\uc5d0\uc11c \uc804\ub2ec\ub41c \ub370\uc774\ud130\ub97c \ucc98\ub9ac\ud569\ub2c8\ub2e4.\n $comment = isset($_POST['comment']) ? sanitize_text_field($_POST['comment']) : '';\n\n \/\/ \ub313\uae00 \ub370\uc774\ud130\ubca0\uc774\uc2a4\uc5d0 \ucd94\uac00 (\uc608: wp_insert_comment \ud568\uc218 \uc0ac\uc6a9)\n\n \/\/ \uc751\ub2f5 \ubc18\ud658\n wp_send_json_success('\ub313\uae00\uc774 \ucd94\uac00\ub418\uc5c8\uc2b5\ub2c8\ub2e4.');\n}\nadd_action('wp_ajax_add_comment', 'handle_ajax_request');\nadd_action('wp_ajax_nopriv_add_comment', 'handle_ajax_request');<\/code><\/pre>\n\uc785\ub825 \ud3fc\uacfc \uc2e4\uc2dc\uac04 \ub370\uc774\ud130 \uc5c5\ub370\uc774\ud2b8<\/h2>\n
\uc774\uc81c \uc2e4\uc81c\ub85c \uc0ac\uc6a9\uc790 \uc785\ub825\uc744 \ubc1b\ub294 \ud3fc\uc744 \ud1b5\ud574 \uc2e4\uc2dc\uac04\uc73c\ub85c \ub370\uc774\ud130\ub97c \uc11c\ubc84\uc5d0 \uc804\uc1a1\ud558\uace0 \uc5c5\ub370\uc774\ud2b8\ud558\ub294 \ubc29\ubc95\uc744 \uc0b4\ud3b4\ubcf4\uaca0\uc2b5\ub2c8\ub2e4. \ub313\uae00 \uc785\ub825 \ud3fc\uc744 \ud1b5\ud574 \uc0ac\uc6a9\uc790\uac00 \ub313\uae00\uc744 \uc791\uc131\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
\uc785\ub825 \ud3fc \uc608\uc81c<\/h3>\n<div id=\"comment-section\">\n <form id=\"comment-form\">\n <textarea id=\"comment-text\" placeholder=\"\ub313\uae00\uc744 \uc785\ub825\ud558\uc138\uc694...\"><\/textarea>\n <button type=\"submit\">\ub313\uae00 \ub0a8\uae30\uae30<\/button>\n <\/form>\n <div id=\"comments-container\"><\/div>\n<\/div><\/code><\/pre>\nJavaScript \ucf54\ub4dc (\uc5c5\ub370\uc774\ud2b8)<\/h3>\ndocument.getElementById('comment-form').addEventListener('submit', function(e) {\n e.preventDefault(); \/\/ \uae30\ubcf8 \ud3fc \uc81c\ucd9c \ubc29\uc9c0\n\n var comment = document.getElementById('comment-text').value;\n\n var xhr = new XMLHttpRequest();\n xhr.open('POST', ajax_object.ajax_url, true);\n xhr.setRequestHeader('Content-Type', 'application\/x-www-form-urlencoded');\n\n xhr.onload = function() {\n if (xhr.status === 200) {\n var response = JSON.parse(xhr.responseText);\n if (response.success) {\n var newComment = document.createElement('div');\n newComment.textContent = comment;\n document.getElementById('comments-container').prepend(newComment);\n document.getElementById('comment-text').value = ''; \/\/ \ub313\uae00 \uc785\ub825\ub780 \ucd08\uae30\ud654\n } else {\n alert('\ub313\uae00 \ucd94\uac00 \uc624\ub958: ' + response.data);\n }\n }\n };\n\n xhr.send('action=add_comment&comment=' + encodeURIComponent(comment));\n});<\/code><\/pre>\n\uc6cc\ub4dc\ud504\ub808\uc2a4\uc5d0 AJAX \ucd94\uac00\ud558\uae30<\/h2>\n
\uc6cc\ub4dc\ud504\ub808\uc2a4\uc5d0 AJAX\ub97c \ucd94\uac00\ud558\ub824\uba74 \ub2e4\uc74c \ub2e8\uacc4\ub97c \ub530\ub974\uba74 \ub429\ub2c8\ub2e4:<\/p>\n
\n- wp_enqueue_script<\/strong>: AJAX \uc694\uccad\uc744 \uc704\ud55c JavaScript \ud30c\uc77c\uc744 \ub4f1\ub85d\ud569\ub2c8\ub2e4.<\/li>\n
- wp_localize_script<\/strong>: JavaScript\uc5d0 AJAX URL\uc744 \uc804\ub2ec\ud569\ub2c8\ub2e4.<\/li>\n
- AJAX Hook \uc124\uc815<\/strong>: AJAX \uc694\uccad\uc744 \ucc98\ub9ac\ud560 PHP \ud568\uc218\ub97c \ub4f1\ub85d\ud569\ub2c8\ub2e4.<\/li>\n<\/ul>\n
\uc804\uccb4 \ucf54\ub4dc \uc608\uc81c<\/h3>\n
\uc774\uc81c\uae4c\uc9c0 \uc124\uba85\ud55c \ubaa8\ub4e0 \ub0b4\uc6a9\uc744 \ud1b5\ud569\ud55c \uc804\uccb4 \ucf54\ub4dc\ub294 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n
function enqueue_ajax_scripts() {\n wp_enqueue_script('ajax-script', get_template_directory_uri() . '\/js\/ajax.js', array('jquery'), null, true);\n wp_localize_script('ajax-script', 'ajax_object', array('ajax_url' => admin_url('admin-ajax.php')));\n}\nadd_action('wp_enqueue_scripts', 'enqueue_ajax_scripts');\n\nfunction handle_ajax_request() {\n $comment = isset($_POST['comment']) ? sanitize_text_field($_POST['comment']) : '';\n \/\/ \ub313\uae00 \ub370\uc774\ud130\ubca0\uc774\uc2a4\uc5d0 \ucd94\uac00 \ucf54\ub4dc\ub294 \uc5ec\uae30\uc5d0\uc11c \uc791\uc131\ud569\ub2c8\ub2e4.\n\n wp_send_json_success('\ub313\uae00\uc774 \ucd94\uac00\ub418\uc5c8\uc2b5\ub2c8\ub2e4.');\n}\nadd_action('wp_ajax_add_comment', 'handle_ajax_request');\nadd_action('wp_ajax_nopriv_add_comment', 'handle_ajax_request');\n\n\/\/ AJAX \uc694\uccad \ucc98\ub9ac \uc704\ud55c \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \ucf54\ub4dc\ndocument.getElementById('comment-form').addEventListener('submit', function(e) {\n e.preventDefault();\n var comment = document.getElementById('comment-text').value;\n\n var xhr = new XMLHttpRequest();\n xhr.open('POST', ajax_object.ajax_url, true);\n xhr.setRequestHeader('Content-Type', 'application\/x-www-form-urlencoded');\n\n xhr.onload = function() {\n if (xhr.status === 200) {\n var response = JSON.parse(xhr.responseText);\n if (response.success) {\n var newComment = document.createElement('div');\n newComment.textContent = comment;\n document.getElementById('comments-container').prepend(newComment);\n document.getElementById('comment-text').value = '';\n } else {\n alert('\ub313\uae00 \ucd94\uac00 \uc624\ub958: ' + response.data);\n }\n }\n };\n\n xhr.send('action=add_comment&comment=' + encodeURIComponent(comment));\n});<\/code><\/pre>\n\uacb0\ub860<\/h2>\n
AJAX\ub294 \uc6cc\ub4dc\ud504\ub808\uc2a4\uc5d0 \uc2e4\uc2dc\uac04 \ub370\uc774\ud130 \ucc98\ub9ac \ubc0f \ub3d9\uc801 \ucf58\ud150\uce20 \uc5c5\ub370\uc774\ud2b8\ub97c \uac00\ub2a5\ud558\uac8c \ud558\ub294 \ub9e4\uc6b0 \uac15\ub825\ud55c \ub3c4\uad6c\uc785\ub2c8\ub2e4. \uc0ac\uc6a9\uc790\uac00 \ud398\uc774\uc9c0\ub97c \uc0c8\ub85c \uace0\uce58\uc9c0 \uc54a\uace0\ub3c4 \ub370\uc774\ud130\ub97c \uc1a1\uc218\uc2e0\ud560 \uc218 \uc788\ub3c4\ub85d \ud574\uc8fc\uba70, \uc804\uccb4 \uc0ac\uc6a9\uc790 \uacbd\ud5d8\uc744 \ud5a5\uc0c1\uc2dc\ud0b5\ub2c8\ub2e4. AJAX\ub97c \uc801\uc808\ud788 \ud65c\uc6a9\ud568\uc73c\ub85c\uc368 \ub354 \ub098\uc740 \uc6f9\uc0ac\uc774\ud2b8\ub97c \ub9cc\ub4e4 \uc218 \uc788\uc73c\uba70, \ub2e4\uc591\ud55c \uae30\ub2a5\uc744 \ud1b5\ud574 \uc0ac\uc6a9\uc790\uc640\uc758 \uc0c1\ud638\uc791\uc6a9\uc744 \ub354\uc6b1 \uac1c\uc120\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
\uc774\uc81c \uc55e\uc11c \uc124\uba85\ud55c \ubc29\ubc95\ub4e4\uc744 \ub530\ub77c \ub2e4\uc591\ud55c \uc2e4\uc2dc\uac04 \uae30\ub2a5\uc744 \uc6cc\ub4dc\ud504\ub808\uc2a4 \uc0ac\uc774\ud2b8\uc5d0 \uad6c\ud604\ud574\ubcf4\uc138\uc694. AJAX\uc758 \ud65c\uc6a9 \ubc94\uc704\ub294 \ub9e4\uc6b0 \ub113\uae30 \ub54c\ubb38\uc5d0 \uc5ec\ub7ec\ubd84\uc758 \uc544\uc774\ub514\uc5b4\uc5d0 \ub530\ub77c \ub354\uc6b1 \uc9c4\ud654\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc0ac\uc6a9\uc790\uc758 \uad00\uc2ec\uc744 \ub04c\uace0, \uc815\ubcf4\ub97c \uc804\ub2ec\ud558\ub294 \ub354 \ud601\uc2e0\uc801\uc778 \ubc29\ubc95\uc744 \ucc3e\uc73c\uc2dc\uae30 \ubc14\ub78d\ub2c8\ub2e4.<\/p>\n
<\/body><\/p>\n","protected":false},"excerpt":{"rendered":"