{"id":27227,"date":"2023-06-13T12:29:52","date_gmt":"2023-06-13T05:29:52","guid":{"rendered":"https:\/\/itviec.com\/blog\/?p=27227"},"modified":"2025-10-10T22:34:35","modified_gmt":"2025-10-10T15:34:35","slug":"ajax-la-gi","status":"publish","type":"post","link":"https:\/\/itviec.com\/blog\/ajax-la-gi\/","title":{"rendered":"AJAX l\u00e0 g\u00ec? Quy tr\u00ecnh ho\u1ea1t \u0111\u1ed9ng v\u00e0 th\u1ef1c h\u00e0nh AJAX d\u1ec5 hi\u1ec3u cho Web Developer"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_84 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">N\u1ed9i dung b\u00e0i vi\u1ebft<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/itviec.com\/blog\/ajax-la-gi\/#AJAX_la_gi\" >AJAX l\u00e0 g\u00ec?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/itviec.com\/blog\/ajax-la-gi\/#Quy_trinh_hoat_dong_AJAX_la_gi\" >Quy tr\u00ecnh ho\u1ea1t \u0111\u1ed9ng AJAX l\u00e0 g\u00ec?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/itviec.com\/blog\/ajax-la-gi\/#3_loi_ich_noi_bat_nhat_khi_su_dung_AJAX_la_gi\" >3 l\u1ee3i \u00edch n\u1ed5i b\u1eadt nh\u1ea5t khi s\u1eed d\u1ee5ng AJAX l\u00e0 g\u00ec?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/itviec.com\/blog\/ajax-la-gi\/#5_han_che_thuong_gap_cua_AJAX_la_gi\" >5 h\u1ea1n ch\u1ebf th\u01b0\u1eddng g\u1eb7p c\u1ee7a AJAX l\u00e0 g\u00ec?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/itviec.com\/blog\/ajax-la-gi\/#7_ung_dung_pho_bien_nhat_cua_AJAX_la_gi\" >7 \u1ee9ng d\u1ee5ng ph\u1ed5 bi\u1ebfn nh\u1ea5t c\u1ee7a AJAX l\u00e0 g\u00ec?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/itviec.com\/blog\/ajax-la-gi\/#jQuery_AJAX_la_gi\" >jQuery AJAX l\u00e0 g\u00ec?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/itviec.com\/blog\/ajax-la-gi\/#Cac_cau_hoi_AJAX_thuong_gap\" >C\u00e1c c\u00e2u h\u1ecfi AJAX th\u01b0\u1eddng g\u1eb7p<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/itviec.com\/blog\/ajax-la-gi\/#Hoc_AJAX_nhu_the_nao\" >H\u1ecdc AJAX nh\u01b0 th\u1ebf n\u00e0o?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/itviec.com\/blog\/ajax-la-gi\/#Cac_thao_tac_co_ban_voi_AJAX\" >C\u00e1c thao t\u00e1c c\u01a1 b\u1ea3n v\u1edbi AJAX<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/itviec.com\/blog\/ajax-la-gi\/#Tong_ket\" >T\u1ed5ng k\u1ebft<\/a><\/li><\/ul><\/nav><\/div>\n\n<p><strong><i>AJAX l\u00e0 g\u00ec? AJAX l\u00e0 m\u1ed9t k\u1ef9 thu\u1eadt ph\u00e1t tri\u1ec3n web hi\u1ec7n \u0111\u1ea1i gi\u00fap \u1ee9ng d\u1ee5ng web ng\u00e0y c\u00e0ng nhanh v\u00e0 m\u01b0\u1ee3t nh\u01b0 c\u00e1c \u1ee9ng d\u1ee5ng desktop. B\u00e0i vi\u1ebft n\u00e0y cung c\u1ea5p m\u1ecdi th\u1ee9 b\u1ea1n c\u1ea7n \u0111\u1ec3 c\u00f3 th\u1ec3 b\u1eaft \u0111\u1ea7u s\u1eed d\u1ee5ng AJAX, bao g\u1ed3m ki\u1ebfn th\u1ee9c n\u1ec1n t\u1ea3ng, v\u00ed d\u1ee5 th\u1ef1c t\u1ebf v\u00e0 t\u00e0i nguy\u00ean h\u1ecdc AJAX t\u1ed1t nh\u1ea5t.<\/i><\/strong> <span style=\"font-weight: 400;\">\u0110\u1ecdc b\u00e0i vi\u1ebft n\u00e0y \u0111\u1ec3:<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><span style=\"font-weight: 400;\">Hi\u1ec3u r\u00f5 k\u1ef9 thu\u1eadt AJAX l\u00e0 g\u00ec v\u00e0 c\u00e1c kh\u00e1i ni\u1ec7m li\u00ean quan\u00a0<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">N\u1eafm r\u00f5 c\u00e1ch ho\u1ea1t \u0111\u1ed9ng v\u00e0 khi n\u00e0o n\u00ean\/ kh\u00f4ng n\u00ean s\u1eed d\u1ee5ng AJAX<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">Th\u1ef1c h\u00e0nh c\u00e1c thao t\u00e1c c\u01a1 b\u1ea3n v\u1edbi AJAX<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">B\u1eaft \u0111\u1ea7u h\u1ecdc AJAX v\u1edbi g\u1ee3i \u00fd c\u00e1c t\u00e0i nguy\u00ean s\u00e1ch, kho\u00e1 h\u1ecdc, t\u00e0i li\u1ec7u t\u1ed1t nh\u1ea5t\u00a0<\/span><\/li>\n<\/ul>\n\n\n\n<p><strong><em>Xem th\u00eam <a href=\"http:\/\/itviec.com\/?utm_medium=anchor_text_high&amp;utm_source=blog&amp;utm_campaign=viec_lam_it&amp;utm_content=aja_la_gi\" target=\"_blank\" rel=\"noopener\">vi\u1ec7c l\u00e0m IT<\/a> ch\u1ea5t t\u1ea1i ITviec<\/em><\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-ajax-la-gi\"><span class=\"ez-toc-section\" id=\"AJAX_la_gi\"><\/span><b>AJAX l\u00e0 g\u00ec?<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-1-ajax-la-gi\"><b>1. AJAX l\u00e0 g\u00ec?<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">AJAX l\u00e0 t\u1eeb vi\u1ebft t\u1eaft c\u1ee7a \u201c<\/span><b>A<\/b><span style=\"font-weight: 400;\">synchronous <\/span><b>J<\/b><span style=\"font-weight: 400;\">avaScript <\/span><b>a<\/b><span style=\"font-weight: 400;\">nd <\/span><b>X<\/b><span style=\"font-weight: 400;\">ML\u201d (JavaScript v\u00e0 XML kh\u00f4ng \u0111\u1ed3ng b\u1ed9). AJAX l\u00e0 t\u1ed5 h\u1ee3p c\u00e1c c\u00f4ng ngh\u1ec7 ph\u00e1t tri\u1ec3n c\u00e1c \u1ee9ng d\u1ee5ng web t\u01b0\u01a1ng t\u00e1c, s\u1eed d\u1ee5ng c\u00e1c y\u00eau c\u1ea7u kh\u00f4ng \u0111\u1ed3ng b\u1ed9 cho ph\u00e9p m\u00e1y kh\u00e1ch v\u00e0 m\u00e1y ch\u1ee7 giao ti\u1ebfp \u0111\u1ed9c l\u1eadp, gi\u00fap c\u1eadp nh\u1eadt c\u00e1c th\u00e0nh ph\u1ea7n tr\u00ean web m\u00e0 kh\u00f4ng c\u1ea7n t\u1ea3i l\u1ea1i to\u00e0n b\u1ed9 trang.<\/span><\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><i><span style=\"font-weight: 400;\"><strong>Tham kh\u1ea3o <\/strong><\/span><\/i><a href=\"https:\/\/itviec.com\/viec-lam-it\/web-developer?utm_medium=anchor_text_mid&amp;utm_source=blog&amp;utm_campaign=viec_lam_web_developer&amp;utm_content=aja_la_gi\" target=\"_blank\" rel=\"noopener\"><i><strong><span style=\"font-weight: 400;\">Vi\u1ec7c l\u00e0m Web Developer<\/span><\/strong><\/i><\/a><i><span style=\"font-weight: 400;\"><strong> h\u1ea5p d\u1eabn tr\u00ean ITviec<\/strong><\/span><\/i><\/p>\n<\/blockquote>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-2-cac-thu\u1eadt-ng\u1eef-cong-ngh\u1ec7-trong-ajax-la-gi\"><b>2. C\u00e1c thu\u1eadt ng\u1eef c\u00f4ng ngh\u1ec7 trong AJAX l\u00e0 g\u00ec?<\/b><\/h3>\n\n\n\n<p>Sau khi \u0111\u00e3 hi\u1ec3u \u0111\u1ecbnh ngh\u0129a AJAX l\u00e0 g\u00ec v\u00e0 tr\u01b0\u1edbc khi ti\u1ebfn \u0111\u1ebfn t\u00ecm hi\u1ec3u s\u00e2u h\u01a1n v\u1ec1 kh\u00e1i ni\u1ec7m n\u00e0y, b\u1ea1n c\u1ea7n ph\u1ea3i hi\u1ec3u nh\u1eefng thu\u1eadt ng\u1eef th\u01b0\u1eddng g\u1eb7p khi n\u00f3i v\u1ec1 AJAX:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>Asynchronous l\u00e0 g\u00ec?\u00a0<\/b><\/li>\n<\/ul>\n\n\n\n<p><span style=\"font-weight: 400;\">Asynchronous l\u00e0 t\u00ednh kh\u00f4ng \u0111\u1ed3ng b\u1ed9, ngh\u0129a l\u00e0 web c\u00f3 th\u1ec3 g\u1eedi v\u00e0 nh\u1eadn d\u1eef li\u1ec7u n\u1ec1n t\u1eeb m\u00e1y ch\u1ee7, \u0111\u1ed3ng th\u1eddi c\u1eadp nh\u1eadt c\u00e1c th\u00e0nh ph\u1ea7n tr\u00ean trang web m\u00e0 kh\u00f4ng c\u1ea7n t\u1ea3i l\u1ea1i trang.<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>JavaScript l\u00e0 g\u00ec?\u00a0<\/b><\/li>\n<\/ul>\n\n\n\n<p><span style=\"font-weight: 400;\">JavaScript l\u00e0 ng\u00f4n ng\u1eef l\u1eadp tr\u00ecnh ph\u1ed5 bi\u1ebfn \u0111\u1ec3 l\u00e0m web t\u01b0\u01a1ng t\u00e1c.<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>XML l\u00e0 g\u00ec?\u00a0<\/b><\/li>\n<\/ul>\n\n\n\n<p><span style=\"font-weight: 400;\">XML l\u00e0 vi\u1ebft t\u1eaft c\u1ee7a Extensible Markup Language &#8211; Ng\u00f4n ng\u1eef \u0111\u00e1nh d\u1ea5u c\u00f3 th\u1ec3 m\u1edf r\u1ed9ng d\u00f9ng \u0111\u1ec3 l\u01b0u tr\u1eef v\u00e0 v\u1eadn chuy\u1ec3n d\u1eef li\u1ec7u t\u1eeb m\u00e1y ch\u1ee7 web.&nbsp;<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>XMLHttpRequest l\u00e0 g\u00ec?<\/b><\/li>\n<\/ul>\n\n\n\n<p><span style=\"font-weight: 400;\">XMLHttpRequest l\u00e0 m\u1ed9t \u0111\u1ed1i t\u01b0\u1ee3ng JavaScript \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 giao ti\u1ebfp kh\u00f4ng \u0111\u1ed3ng b\u1ed9 gi\u1eefa m\u00e1y kh\u00e1ch v\u00e0 m\u00e1y ch\u1ee7.<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>HTML l\u00e0 g\u00ec?\u00a0<\/b><\/li>\n<\/ul>\n\n\n\n<p><span style=\"font-weight: 400;\">HTML l\u00e0 vi\u1ebft t\u1eaft c\u1ee7a HyperText Markup Language &#8211; Ng\u00f4n ng\u1eef \u0111\u00e1nh d\u1ea5u si\u00eau v\u0103n b\u1ea3n d\u00f9ng \u0111\u1ec3 x\u00e1c \u0111\u1ecbnh c\u1ea5u tr\u00fac c\u1ee7a \u1ee9ng d\u1ee5ng web v\u00e0 hi\u1ec3n th\u1ecb d\u1eef li\u1ec7u.<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>CSS l\u00e0 g\u00ec?<\/b><\/li>\n<\/ul>\n\n\n\n<p><span style=\"font-weight: 400;\">CSS l\u00e0 Cascading Style Sheet, \u0111\u01b0\u1ee3c d\u00f9ng \u0111\u1ec3 t\u1ea1o giao di\u1ec7n v\u00e0 ki\u1ec3u d\u00e1ng cho web.<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>DOM l\u00e0 g\u00ec?<\/b><\/li>\n<\/ul>\n\n\n\n<p><span style=\"font-weight: 400;\">DOM l\u00e0 m\u1ed9t API hi\u1ec3n th\u1ecb c\u00e1c trang web v\u00e0 t\u01b0\u01a1ng t\u00e1c v\u1edbi d\u1eef li\u1ec7u.&nbsp;<\/span><\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><i><span style=\"font-weight: 400;\">\u0110\u1ecdc th\u00eam: <\/span><\/i> <i><span style=\"font-weight: 400;\">M\u1eb7c d\u00f9 X trong AJAX l\u00e0 vi\u1ebft t\u1eaft c\u1ee7a XML, nh\u01b0ng ngo\u00e0i s\u1eed d\u1ee5ng \u0111\u1ecbnh d\u1ea1ng XML, vi\u1ec7c \u0111\u00f3ng g\u00f3i v\u00e0 truy\u1ec1n d\u1eef li\u1ec7u d\u01b0\u1edbi \u0111\u1ecbnh d\u1ea1ng v\u0103n b\u1ea3n thu\u1ea7n t\u00fay ho\u1eb7c v\u0103n b\u1ea3n JSON c\u0169ng ph\u1ed5 bi\u1ebfn kh\u00f4ng k\u00e9m. Th\u1eadm ch\u00ed ng\u00e0y nay JSON (JavaScript Object Notation) \u0111\u01b0\u1ee3c \u01b0a th\u00edch h\u01a1n v\u00ec n\u00f3 c\u00f3 k\u00edch th\u01b0\u1edbc nh\u1eb9 h\u01a1n v\u00e0 \u0111\u01b0\u1ee3c vi\u1ebft b\u1eb1ng JavaScript.&nbsp;<\/span><\/i><\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-quy-trinh-ho\u1ea1t-d\u1ed9ng-ajax-la-gi\"><span class=\"ez-toc-section\" id=\"Quy_trinh_hoat_dong_AJAX_la_gi\"><\/span><b>Quy tr\u00ecnh ho\u1ea1t \u0111\u1ed9ng AJAX l\u00e0 g\u00ec?<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">AJAX kh\u00f4ng ph\u1ea3i l\u00e0 m\u1ed9t ng\u00f4n ng\u1eef l\u1eadp tr\u00ecnh, m\u00e0 l\u00e0 m\u1ed9t m\u00f4 h\u00ecnh s\u1eed d\u1ee5ng k\u1ebft h\u1ee3p c\u00e1c c\u00f4ng ngh\u1ec7 hi\u1ec7n c\u00f3, bao g\u1ed3m HTML ho\u1eb7c XHTML, CSS, JavaScript, DOM, XML, XSLT v\u00e0 quan tr\u1ecdng nh\u1ea5t l\u00e0 \u0111\u1ed1i t\u01b0\u1ee3ng XMLHttpRequest.&nbsp;<\/span> <span style=\"font-weight: 400;\">C\u1ee5 th\u1ec3, m\u00f4 h\u00ecnh AJAX s\u1eed d\u1ee5ng:<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>XMLHttpRequest Object<\/b><span style=\"font-weight: 400;\"> (m\u1ed9t <\/span><a href=\"https:\/\/itviec.com\/blog\/api-la-gi?\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">API<\/span><\/a><span style=\"font-weight: 400;\"> \u1edf d\u1ea1ng \u0111\u1ed1i t\u01b0\u1ee3ng t\u00edch h\u1ee3p trong tr\u00ecnh duy\u1ec7t) \u0111\u1ec3 y\u00eau c\u1ea7u d\u1eef li\u1ec7u t\u1eeb m\u00e1y ch\u1ee7.\u00a0\u00a0<\/span><\/li>\n\n\n\n<li><b>XHTML<\/b><span style=\"font-weight: 400;\"> \u0111\u1ec3 l\u00e0m \u0111\u1ecbnh d\u1ea1ng \u0111\u1ec3 nh\u1eadn d\u1eef li\u1ec7u t\u1eeb m\u00e1y ch\u1ee7<\/span><\/li>\n\n\n\n<li><b>CSS<\/b><span style=\"font-weight: 400;\"> \u0111\u1ec3 tr\u00ecnh b\u00e0y<\/span><\/li>\n\n\n\n<li><b>JavaScript\/ HTML DOM<\/b><span style=\"font-weight: 400;\"> \u0111\u1ec3 hi\u1ec3n th\u1ecb n\u1ed9i dung \u0111\u1ed9ng\u00a0<\/span><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"350\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2023\/05\/Browser.png\" alt=\"ajax-cach-hoat-dong\" class=\"wp-image-27259\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2023\/05\/Browser.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2023\/05\/Browser-300x164.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2023\/05\/Browser-200x109.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2023\/05\/Browser-100x55.png 100w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/figure>\n\n\n\n<p> <span style=\"font-weight: 400;\">M\u1ed9t quy tr\u00ecnh ho\u1ea1t \u0111\u1ed9ng c\u1ee7a AJAX c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c m\u00f4 t\u1ea3 nh\u01b0 sau:<\/span><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><span style=\"font-weight: 400;\"> M\u00f4t s\u1ef1 ki\u1ec7n x\u1ea3y ra tr\u00ean web, do ng\u01b0\u1eddi d\u00f9ng g\u1eedi y\u00eau c\u1ea7u t\u1eeb UI (v\u00ed d\u1ee5: t\u1ea3i trang, nh\u1ea5p v\u00e0o m\u1ed9t button,&#8230;).<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\"> JavaScript t\u1ea1o m\u1ed9t \u0111\u1ed1i t\u01b0\u1ee3ng XMLHttpRequest.<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\"> Tr\u00ecnh duy\u1ec7t g\u1eedi \u0111\u1ed1i t\u01b0\u1ee3ng XMLHttpRequest \u0111\u1ebfn m\u00e1y ch\u1ee7 web.<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\"> M\u00e1y ch\u1ee7 x\u1eed l\u00fd y\u00eau c\u1ea7u b\u1eb1ng c\u00e1ch t\u01b0\u01a1ng t\u00e1c v\u1edbi c\u01a1 s\u1edf d\u1eef li\u1ec7u th\u00f4ng qua JSP, PHP, Servlet, ASP.net,..<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\"> M\u00e1y ch\u1ee7 t\u1ea1o ph\u1ea3n h\u1ed3i v\u00e0 g\u1eedi l\u1ea1i cho tr\u00ecnh duy\u1ec7t web.<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\"> Ph\u1ea3n h\u1ed3i tr\u1ea3 v\u1ec1 \u0111\u01b0\u1ee3c x\u1eed l\u00fd trong tr\u00ecnh duy\u1ec7t b\u1eb1ng JavaScript.<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\"> JavaScript th\u1ef1c hi\u1ec7n h\u00e0nh \u0111\u1ed9ng th\u00edch h\u1ee3p (v\u00ed d\u1ee5: c\u1eadp nh\u1eadt n\u1ed9i dung trang).\u00a0<\/span><\/li>\n<\/ol>\n\n\n\n<p><i><span style=\"font-weight: 400;\">H\u00e3y t\u00ecm hi\u1ec3u m\u1ed9t v\u00e0i thao t\u00e1c th\u1ef1c h\u00e0nh c\u01a1 b\u1ea3n v\u1edbi c\u00e1c b\u01b0\u1edbc tr\u00ean \u1edf m\u1ee5c b\u00ean d\u01b0\u1edbi nh\u00e9.<\/span><\/i><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-3-l\u1ee3i-ich-n\u1ed5i-b\u1eadt-nh\u1ea5t-khi-s\u1eed-d\u1ee5ng-ajax-la-gi\"><span class=\"ez-toc-section\" id=\"3_loi_ich_noi_bat_nhat_khi_su_dung_AJAX_la_gi\"><\/span><b>3 l\u1ee3i \u00edch n\u1ed5i b\u1eadt nh\u1ea5t khi s\u1eed d\u1ee5ng AJAX l\u00e0 g\u00ec?<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">Tr\u01b0\u1edbc AJAX, kh\u00f4ng c\u00f3 c\u00e1ch n\u00e0o \u0111\u1ec3 ph\u00eda m\u00e1y kh\u00e1ch c\u1ee7a \u1ee9ng d\u1ee5ng web giao ti\u1ebfp tr\u1ef1c ti\u1ebfp v\u1edbi m\u00e1y ch\u1ee7. Thay v\u00e0o \u0111\u00f3, b\u1ea1n s\u1ebd ph\u1ea3i s\u1eed d\u1ee5ng c\u00e1ch th\u1ee9c t\u1ea3i l\u1ea1i trang.&nbsp;<\/span> <span style=\"font-weight: 400;\">V\u00ec v\u1eady, AJAX ra \u0111\u1eddi \u0111\u00e3 mang l\u1ea1i nhi\u1ec1u l\u1ee3i \u00edch cho vi\u1ec7c ph\u00e1t tri\u1ec3n web, n\u1ed5i b\u1eadt l\u00e0:<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>S\u1eed d\u1ee5ng t\u1ed1i \u01b0u b\u0103ng th\u00f4ng:\u00a0<\/b><\/li>\n<\/ul>\n\n\n\n<p><span style=\"font-weight: 400;\">AJAX t\u1ed1i \u01b0u h\u00f3a b\u0103ng th\u00f4ng m\u00e1y ch\u1ee7 c\u1ee7a b\u1ea1n b\u1eb1ng c\u00e1ch \u0111\u1ecbnh v\u1ecb n\u1ed9i dung c\u1ee5 th\u1ec3 thay v\u00ec ph\u00e2n lu\u1ed3ng to\u00e0n b\u1ed9 n\u1ed9i dung c\u1ee7a trang. \u0110i\u1ec1u n\u00e0y r\u1ea5t h\u1eefu \u00edch v\u1edbi c\u00e1c trang web c\u00f3 b\u0103ng th\u00f4ng h\u1ea1n ch\u1ebf, gi\u00fap c\u1ea3i thi\u1ec7n t\u1ed1c \u0111\u1ed9 t\u1ea3i v\u00e0 hi\u1ec7u su\u1ea5t \u1ee9ng d\u1ee5ng web.<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>T\u0103ng t\u00ednh t\u01b0\u01a1ng t\u00e1c v\u1edbi ng\u01b0\u1eddi d\u00f9ng:<\/b><\/li>\n<\/ul>\n\n\n\n<p><span style=\"font-weight: 400;\">Tr\u01b0\u1edbc \u0111\u00e2y, ng\u01b0\u1eddi d\u00f9ng ph\u1ea3i ch\u1edd \u0111\u1ee3i m\u00e1y ch\u1ee7 ho\u00e0n th\u00e0nh l\u1ec7nh, d\u1eef li\u1ec7u c\u1eadp nh\u1eadt \u0111\u01b0\u1ee3c t\u1ea3i l\u00ean trang web, sau \u0111\u00f3 reload trang \u0111\u1ec3 th\u1ef1c hi\u1ec7n l\u1ec7nh kh\u00e1c ho\u1eb7c th\u1ea5y k\u1ebft qu\u1ea3.<\/span> <span style=\"font-weight: 400;\">Do AJAX s\u1eed d\u1ee5ng c\u00e1c y\u00eau c\u1ea7u kh\u00f4ng \u0111\u1ed3ng b\u1ed9, vi\u1ec7c trao \u0111\u1ed5i d\u1eef li\u1ec7u gi\u1eefa m\u00e1y ch\u1ee7 v\u00e0 b\u1ea3n hi\u1ec3n th\u1ecb c\u00f3 th\u1ec3 ho\u1ea1t \u0111\u1ed9ng \u0111\u1ed9c l\u1eadp. Khi \u0111\u00f3, ng\u01b0\u1eddi d\u00f9ng c\u00f3 th\u1ec3 nh\u1eadn ph\u1ea3n h\u1ed3i ngay l\u1eadp t\u1ee9c khi th\u1ef1c hi\u1ec7n m\u1ed9t thao t\u00e1c tr\u00ean web m\u00e0 kh\u00f4ng g\u1eb7p b\u1ea5t k\u1ef3 s\u1ef1 ch\u1eadm tr\u1ec5 n\u00e0o.<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>C\u1ea3i thi\u1ec7n tr\u1ea3i nghi\u1ec7m ng\u01b0\u1eddi d\u00f9ng:\u00a0<\/b><\/li>\n<\/ul>\n\n\n\n<p><span style=\"font-weight: 400;\">AJAX t\u1ea1o ra c\u00e1c bi\u1ec3u m\u1eabu nhanh v\u00e0 th\u00e2n thi\u1ec7n v\u1edbi ng\u01b0\u1eddi d\u00f9ng, cho ph\u00e9p ng\u01b0\u1eddi d\u00f9ng th\u1ef1c hi\u1ec7n nhi\u1ec1u thay \u0111\u1ed5i kh\u00e1c nhau tr\u00ean web m\u00e0 kh\u00f4ng c\u1ea7n ch\u1edd \u0111\u1ee3i d\u1eef li\u1ec7u t\u1eeb m\u00e1y ch\u1ee7 \u0111\u1ebfn. \u0110i\u1ec1u n\u00e0y gi\u00fap mang l\u1ea1i tr\u1ea3i nghi\u1ec7m ng\u01b0\u1eddi d\u00f9ng t\u1ed1t h\u01a1n, t\u1eeb \u0111\u00f3 c\u00f3 th\u1ec3 t\u0103ng t\u1ef7 l\u1ec7 chuy\u1ec3n \u0111\u1ed5i cho doanh nghi\u1ec7p.<\/span><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-5-h\u1ea1n-ch\u1ebf-th\u01b0\u1eddng-g\u1eb7p-c\u1ee7a-ajax-la-gi\"><span class=\"ez-toc-section\" id=\"5_han_che_thuong_gap_cua_AJAX_la_gi\"><\/span><b>5 h\u1ea1n ch\u1ebf th\u01b0\u1eddng g\u1eb7p c\u1ee7a AJAX l\u00e0 g\u00ec?<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>Ph\u1ee5 thu\u1ed9c v\u00e0o JavaScript<\/b><\/li>\n<\/ul>\n\n\n\n<p><span style=\"font-weight: 400;\">C\u00e1c c\u00f4ng ngh\u1ec7 AJAX ng\u00e0y c\u00e0ng ph\u1ee9c t\u1ea1p, \u0111\u00f2i h\u1ecfi c\u00e1c web developer c\u1ea7n th\u01b0\u1eddng xuy\u00ean trau d\u1ed3i, \u0111\u1ea1t \u0111\u01b0\u1ee3c chuy\u00ean m\u00f4n cao v\u1ec1 JavaScript \u0111\u1ec3 c\u00f3 th\u1ec3 l\u00e0m vi\u1ec7c v\u1edbi n\u00f3.<\/span><\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em><span style=\"font-weight: 400;\">Xem th\u00eam:&nbsp;<\/span><\/em> <em><span style=\"font-weight: 400;\">20+<\/span><a href=\"https:\/\/itviec.com\/blog\/tai-lieu-javascript?\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\"> T\u00e0i li\u1ec7u h\u1ecdc JavaScript<\/span><\/a><span style=\"font-weight: 400;\"> c\u01a1 b\u1ea3n \u0111\u1ebfn n\u00e2ng cao hay nh\u1ea5t<\/span><\/em> <em><span style=\"font-weight: 400;\">30+ <\/span><a href=\"https:\/\/itviec.com\/blog\/37-nguon-resource-danh-cho-web-developer?\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">T\u00e0i li\u1ec7u l\u1eadp tr\u00ecnh web<\/span><\/a><span style=\"font-weight: 400;\"> \u201cch\u1ea5t\u201d nh\u1ea5t<\/span><\/em><\/p>\n<\/blockquote>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>V\u1ea5n \u0111\u1ec1 ba\u0309o m\u00e2\u0323t v\u00e0 quy\u1ec1n ri\u00eang t\u01b0 c\u1ee7a ng\u01b0\u1eddi d\u00f9ng:<\/b><\/li>\n<\/ul>\n\n\n\n<p><span style=\"font-weight: 400;\">C\u00e1c c\u00f4ng ngh\u1ec7 AJAX s\u1eed d\u1ee5ng bi\u1ec7n ph\u00e1p b\u1ea3o m\u1eadt ph\u00eda m\u00e1y ch\u1ee7 gi\u1ed1ng nh\u01b0 c\u00e1c \u1ee9ng d\u1ee5ng web th\u00f4ng th\u01b0\u1eddng. Do \u0111\u00f3, n\u00f3 d\u1ec5 b\u1ecb tin t\u1eb7c khai th\u00e1c theo c\u00e1ch t\u01b0\u01a1ng t\u1ef1.&nbsp;<\/span> <span style=\"font-weight: 400;\">Ngo\u00e0i ra, AJAX s\u1eed d\u1ee5ng JavaScript \u0111\u1ec3 m\u00e3 ho\u00e1 n\u00ean c\u00f3 th\u1ec3 d\u1ec5 d\u00e0ng b\u1ecb hacker truy c\u1eadp. Hacker c\u00f3 th\u1ec3 khai th\u00e1c c\u00e1c l\u1ed7 h\u1ed5ng ph\u00eda m\u00e1y ch\u1ee7, ch\u00e8n m\u00e3 \u0111\u1ed9c v\u00e0o h\u1ec7 th\u1ed1ng, l\u1eeba \u0111\u1ea3o ng\u01b0\u1eddi d\u00f9ng, ho\u1eb7c theo d\u00f5i l\u01b0u l\u01b0\u1ee3ng duy\u1ec7t web c\u1ee7a ng\u01b0\u1eddi d\u00f9ng \u0111\u1ec3 \u0111i\u1ec1u h\u01b0\u1edbng.<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>Kh\u00f3 b\u1ea3o tr\u00ec v\u00e0 debug:<\/b><\/li>\n<\/ul>\n\n\n\n<p><span style=\"font-weight: 400;\">Hi\u1ec7n nay c\u00f2n thi\u1ebfu c\u00e1c h\u01b0\u1edbng d\u1eabn \u0111\u1ec3 debug v\u00e0 b\u1ea3o tr\u00ec c\u00e1c web AJAX \u0111\u00fang c\u00e1ch.<\/span> <span style=\"font-weight: 400;\">JavaScript ph\u00eda m\u00e1y kh\u00e1ch y\u00eau c\u1ea7u can thi\u1ec7p th\u1ee7 c\u00f4ng \u0111\u1ec3 b\u1ea3o tr\u00ec. L\u1ed7i c\u1ee7a b\u1ea5t k\u1ef3 m\u1ed9t y\u00eau c\u1ea7u n\u00e0o c\u00f3 th\u1ec3 khi\u1ebfn to\u00e0n b\u1ed9 trang kh\u00f4ng t\u1ea3i \u0111\u01b0\u1ee3c.<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>Kh\u00f4ng t\u01b0\u01a1ng th\u00edch v\u1edbi m\u1ecdi tr\u00ecnh duy\u1ec7t:\u00a0\u00a0<\/b><\/li>\n<\/ul>\n\n\n\n<p><span style=\"font-weight: 400;\">AJAX ch\u1ec9 h\u1ed7 tr\u1ee3 m\u1ed9t s\u1ed1 l\u01b0\u1ee3ng h\u1ea1n ch\u1ebf c\u00e1c tr\u00ecnh duy\u1ec7t, bao g\u1ed3m:<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><span style=\"font-weight: 400;\">Mozilla Firefox 1.0 tr\u1edf l\u00ean<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">Konqueror<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">Opera 7.6 tr\u1edf l\u00ean<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">Microsoft Internet Explorer 5 tr\u1edf l\u00ean<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">Apple Safari 1.2 tr\u1edf l\u00ean<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">Netscape 7.1 tr\u1edf l\u00ean<\/span><\/li>\n<\/ul>\n\n\n\n<p><span style=\"font-weight: 400;\">AJAX kh\u00f4ng h\u1ed7 tr\u1ee3 m\u1ecdi tr\u00ecnh duy\u1ec7t l\u00e0 do: C\u00e1c tr\u00ecnh duy\u1ec7t kh\u00e1c nhau s\u1eed d\u1ee5ng c\u00e1c ph\u01b0\u01a1ng th\u1ee9c kh\u00e1c nhau \u0111\u1ec3 t\u1ea1o \u0111\u1ed1i t\u01b0\u1ee3ng JavaScript t\u00edch h\u1ee3p s\u1eb5n. Ng\u01b0\u1eddi d\u00f9ng n\u00e0o c\u00f3 tr\u00ecnh duy\u1ec7t kh\u00f4ng h\u1ed7 tr\u1ee3 JavaScript ho\u1eb7c \u0111\u1ed1i t\u01b0\u1ee3ng XMLHttpRequest, ho\u1eb7c \u0111\u00e3 t\u1eaft ch\u1ee9c n\u0103ng n\u00e0y c\u00f3 th\u1ec3 s\u1ebd kh\u00f4ng d\u00f9ng \u0111\u01b0\u1ee3c c\u00e1c trang web AJAX \u0111\u00fang c\u00e1ch.<\/span> <span style=\"font-weight: 400;\">V\u00ec v\u1eady, b\u1ea1n n\u00ean ki\u1ec3m tra v\u1ea5n \u0111\u1ec1 tr\u00ecnh duy\u1ec7t tr\u01b0\u1edbc khi vi\u1ebft \u1ee9ng d\u1ee5ng web AJAX.&nbsp;<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>V\u1ea5n \u0111\u1ec1 v\u1ec1 d\u1ea5u trang v\u00e0 \u0111i\u1ec1u h\u01b0\u1edbng:<\/b><\/li>\n<\/ul>\n\n\n\n<p><span style=\"font-weight: 400;\">V\u00ec AJAX \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 t\u1ea3i kh\u00f4ng \u0111\u1ed3ng b\u1ed9 n\u1ed9i dung v\u00e0o m\u1ed9t trang hi\u1ec7n c\u00f3, n\u00ean m\u1ed9t s\u1ed1 th\u00f4ng tin c\u1ee7a trang tr\u01b0\u1edbc \u0111\u00f3 c\u00f3 th\u1ec3 kh\u00f4ng t\u01b0\u01a1ng \u1ee9ng v\u1edbi trang m\u1edbi \u0111\u01b0\u1ee3c t\u1ea3i. L\u1ecbch s\u1eed tr\u00ecnh duy\u1ec7t v\u00e0 d\u1ea5u trang c\u00f3 th\u1ec3 b\u1ecb \u1ea3nh h\u01b0\u1edfng v\u00e0 kh\u00f4ng ho\u1ea1t \u0111\u1ed9ng \u0111\u00fang, do URL kh\u00f4ng thay \u0111\u1ed5i trong khi c\u00e1c th\u00e0nh ph\u1ea7n c\u1ee7a trang l\u1ea1i \u0111\u01b0\u1ee3c \u0111\u1ed5i m\u1edbi.<\/span><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-7-\u1ee9ng-d\u1ee5ng-ph\u1ed5-bi\u1ebfn-nh\u1ea5t-c\u1ee7a-ajax-la-gi\"><span class=\"ez-toc-section\" id=\"7_ung_dung_pho_bien_nhat_cua_AJAX_la_gi\"><\/span><b>7 \u1ee9ng d\u1ee5ng ph\u1ed5 bi\u1ebfn nh\u1ea5t c\u1ee7a AJAX l\u00e0 g\u00ec?<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">Tr\u00ean th\u1ef1c t\u1ebf, AJAX \u0111\u00e3 \u0111\u01b0\u1ee3c d\u00f9ng trong nhi\u1ec1u \u1ee9ng d\u1ee5ng web n\u1ed5i ti\u1ebfng. 7 \u1ee9ng d\u1ee5ng n\u1ed5i b\u1eadt c\u1ee7a AJAX l\u00e0:<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>T\u1ef1 ho\u00e0n th\u00e0nh (autocomplete) &#8211; <\/b><a href=\"https:\/\/www.google.com\/\" target=\"_blank\" rel=\"noopener\"><b>Google<\/b><\/a><\/li>\n<\/ul>\n\n\n\n<p><span style=\"font-weight: 400;\">Google l\u00e0 m\u1ed9t trong nh\u1eefng trang web \u0111\u1ea7u ti\u00ean k\u1ebft h\u1ee3p AJAX \u0111\u1ec3 t\u1ef1 \u0111\u1ed9ng \u0111\u1ec1 xu\u1ea5t cho ng\u01b0\u1eddi d\u00f9ng. Khi nh\u1eadp truy v\u1ea5n t\u00ecm ki\u1ebfm trong Google, b\u1ea1n s\u1ebd th\u1ea5y xu\u1ea5t hi\u1ec7n c\u00e1c \u0111\u1ec1 xu\u1ea5t t\u1eeb kho\u00e1, b\u1ea1n c\u00f3 th\u1ec3 ch\u1ecdn gi\u1eefa c\u00e1c g\u1ee3i \u00fd \u0111\u00f3 b\u1eb1ng c\u00e1ch \u0111i\u1ec1u h\u01b0\u1edbng qua c\u00e1c ph\u00edm l\u00ean v\u00e0 xu\u1ed1ng.&nbsp;<\/span><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"425\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2023\/05\/Ajax-google-autocomplete.jpg\" alt=\"ung-dung-ajax-autocomplete\" class=\"wp-image-27255\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2023\/05\/Ajax-google-autocomplete.jpg 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2023\/05\/Ajax-google-autocomplete-300x199.jpg 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2023\/05\/Ajax-google-autocomplete-200x133.jpg 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2023\/05\/Ajax-google-autocomplete-100x66.jpg 100w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/figure>\n\n\n\n<p class=\"has-text-align-center\"><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">\u1ede \u0111\u00e2y, AJAX \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 hi\u1ec3n th\u1ecb k\u1ebft qu\u1ea3 d\u1ef1a tr\u00ean th\u00f4ng tin \u0111\u1ea7u v\u00e0o c\u1ee7a m\u1ed7i l\u1ea7n nh\u1ea5n ph\u00edm. Ch\u1ee9c n\u0103ng n\u00e0y gi\u00fap ng\u01b0\u1eddi d\u00f9ng ho\u00e0n th\u00e0nh truy v\u1ea5n nhanh ch\u00f3ng, c\u00e1c thay \u0111\u1ed5i x\u1ea3y ra trong th\u1eddi gian th\u1ef1c, v\u00e0 trang web v\u1eabn gi\u1eef nguy\u00ean.<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>\u1ee8ng d\u1ee5ng b\u00ecnh ch\u1ecdn &#8211; <\/b><a href=\"http:\/\/www.reddit.com\/\" target=\"_blank\" rel=\"noopener\"><b>Reddit<\/b><\/a><b>, <\/b><a href=\"https:\/\/www.netflix.com\/\" target=\"_blank\" rel=\"noopener\"><b>Netflix<\/b><\/a><\/li>\n<\/ul>\n\n\n\n<p><span style=\"font-weight: 400;\">C\u00e1c trang web nh\u01b0 Reddit s\u1eed d\u1ee5ng AJAX \u0111\u1ec3 x\u1eed l\u00fd vi\u1ec7c b\u00ecnh ch\u1ecdn v\u00e0 x\u1ebfp h\u1ea1ng cho n\u1ed9i dung \u0111\u01b0\u1ee3c hi\u1ec3n th\u1ecb tr\u00ean trang web. Ng\u01b0\u1eddi d\u00f9ng c\u00f3 th\u1ec3 b\u00ecnh ch\u1ecdn v\u00e0 \u0111\u01b0a ra \u00fd ki\u1ebfn \u200b\u200b\u200b\u200bc\u1ee7a h\u1ecd v\u1ec1 nhi\u1ec1u b\u00e0i vi\u1ebft trong m\u1ed9t th\u1eddi gian ng\u1eafn.<\/span> <span style=\"font-weight: 400;\">M\u1ed9t v\u00ed d\u1ee5 kh\u00e1c c\u1ee7a AJAX l\u00e0 t\u00ednh n\u0103ng x\u1ebfp h\u1ea1ng phim tr\u00ean Netflix. Ng\u01b0\u1eddi d\u00f9ng \u0111\u00e1nh gi\u00e1 m\u1ed9t b\u1ed9 phim v\u00e0 x\u1ebfp h\u1ea1ng c\u00e1 nh\u00e2n c\u1ee7a h\u1ecd cho b\u1ed9 phim \u0111\u00f3 s\u1ebd \u0111\u01b0\u1ee3c l\u01b0u v\u00e0o c\u01a1 s\u1edf d\u1eef li\u1ec7u c\u1ee7a ng\u01b0\u1eddi d\u00f9ng m\u00e0 kh\u00f4ng c\u1ea7n ch\u1edd trang l\u00e0m m\u1edbi ho\u1eb7c t\u1ea3i l\u1ea1i.<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>Tin nh\u1eafn t\u1ee9c th\u1eddi\u00a0<\/b><\/li>\n<\/ul>\n\n\n\n<p><span style=\"font-weight: 400;\">AJAX c\u0169ng \u0111\u01b0\u1ee3c \u1ee9ng d\u1ee5ng \u0111\u1ec3 t\u1ea1o ra c\u00e1c t\u00ednh n\u0103ng nh\u1eafn tin t\u1ee9c th\u1eddi, li\u1ec1n m\u1ea1ch trong c\u00e1c chatroom. Hai quy tr\u00ecnh ch\u00ednh do AJAX x\u1eed l\u00fd bao g\u1ed3m &#8211; g\u1eedi v\u00e0 nh\u1eadn tin nh\u1eafn \u0111\u1ebfn v\u00e0 \u0111i t\u1eeb m\u00e1y ch\u1ee7 \u0111\u1ec3 c\u1eadp nh\u1eadt theo th\u1eddi gian th\u1ef1c. D\u01b0\u1edbi n\u1ec1n, AJAX t\u1ea3i l\u1ea1i trang m\u1ed7i khi ng\u01b0\u1eddi d\u00f9ng g\u1eedi ho\u1eb7c nh\u1eadn tin nh\u1eafn.<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>C\u1eadp nh\u1eadt n\u1ed9i dung ng\u01b0\u1eddi d\u00f9ng &#8211; <\/b><a href=\"http:\/\/www.twitter.com\/\" target=\"_blank\" rel=\"noopener\"><b>Twitter<\/b><\/a><\/li>\n<\/ul>\n\n\n\n<p><span style=\"font-weight: 400;\">Twitter g\u1ea7n \u0111\u00e2y \u0111\u00e3 s\u1eed d\u1ee5ng AJAX \u0111\u1ec3 c\u1ea3i thi\u1ec7n n\u1ec1n t\u1ea3ng v\u00e0 giao di\u1ec7n c\u1ee7a m\u00ecnh. M\u1ed7i khi m\u1ed9t ch\u1ee7 \u0111\u1ec1 m\u1edbi b\u1eaft \u0111\u1ea7u th\u1ecbnh h\u00e0nh ho\u1eb7c m\u1ed9t ng\u01b0\u1eddi d\u00f9ng t\u1ea1o tweet, ch\u00fang s\u1ebd \u0111\u01b0\u1ee3c c\u1eadp nh\u1eadt ngay l\u1eadp t\u1ee9c m\u00e0 kh\u00f4ng c\u1ea7n t\u1ea3i l\u1ea1i to\u00e0n b\u1ed9 trang. B\u1ea3ng tin tr\u00ean Twitter \u0111\u01b0\u1ee3c t\u1ea3i m\u1ed7i gi\u00e2y \u0111\u1ec3 ng\u01b0\u1eddi d\u00f9ng c\u1eadp nh\u1eadt c\u00e1c n\u1ed9i dung theo th\u1eddi gian th\u1ef1c, c\u00e1c ch\u1ee7 \u0111\u1ec1 th\u1ecbnh h\u00e0nh hay ho\u1ea1t \u0111\u1ed9ng tweet,&#8230;<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>Bi\u1ec3u m\u1eabu \u0111\u0103ng nh\u1eadp\u00a0<\/b><\/li>\n<\/ul>\n\n\n\n<p><span style=\"font-weight: 400;\">Tr\u01b0\u1edbc AJAX, ng\u01b0\u1eddi d\u00f9ng c\u1ea7n truy c\u1eadp trang \u0111\u0103ng nh\u1eadp, sau \u0111\u00f3 \u0111i\u1ec1u h\u01b0\u1edbng tr\u1edf l\u1ea1i trang ng\u01b0\u1eddi d\u00f9ng mu\u1ed1n ban \u0111\u1ea7u. <\/span><span style=\"font-weight: 400;\">V\u1edbi AJAX, ng\u01b0\u1eddi d\u00f9ng c\u00f3 th\u1ec3 \u0111i\u1ec1n th\u00f4ng tin \u0111\u0103ng nh\u1eadp tr\u1ef1c ti\u1ebfp tr\u00ean trang b\u1ea5t k\u00ec. Khi \u0111\u00f3 AJAX s\u1ebd g\u1eedi y\u00eau c\u1ea7u \u0111\u1ebfn m\u00e1y ch\u1ee7 v\u00e0 trang hi\u1ec7n t\u1ea1i s\u1ebd \u0111\u01b0\u1ee3c c\u1eadp nh\u1eadt.&nbsp;<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>Ti\u1ec7n \u00edch b\u00ean ngo\u00e0i &#8211; <\/b><a href=\"https:\/\/wordpress.com\/\" target=\"_blank\" rel=\"noopener\"><b>WordPress<\/b><\/a><b>, <\/b><a href=\"https:\/\/adsense.google.com\/\" target=\"_blank\" rel=\"noopener\"><b>Adsense<\/b><\/a><\/li>\n<\/ul>\n\n\n\n<p><span style=\"font-weight: 400;\">AJAX c\u0169ng \u0111\u01b0\u1ee3c \u1ee9ng d\u1ee5ng trong c\u00e1c H\u1ec7 th\u1ed1ng qu\u1ea3n l\u00fd n\u1ed9i dung nh\u01b0 WordPress hay c\u00e1c t\u1eadp l\u1ec7nh nh\u01b0 Google Adsense. AJAX c\u00f3 th\u1ec3 giao ti\u1ebfp v\u1edbi b\u1ea5t k\u1ef3 m\u00e1y ch\u1ee7 tr\u1ef1c tuy\u1ebfn n\u00e0o ch\u1ee9 kh\u00f4ng ch\u1ec9 m\u00e1y ch\u1ee7 ch\u1ee9a trang web. N\u00f3 t\u1ea3i n\u1ed9i dung b\u00ean ngo\u00e0i tr\u00ean trang web trong khi n\u1ed9i dung g\u1ed1c tr\u00ean trang web kh\u00f4ng thay \u0111\u1ed5i.<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>B\u1ea3n \u0111\u1ed3 &#8211; <\/b><a href=\"https:\/\/www.google.com\/maps\" target=\"_blank\" rel=\"noopener\"><b>Google Maps<\/b><\/a><\/li>\n<\/ul>\n\n\n\n<p><span style=\"font-weight: 400;\">Google Maps v\u00e0 Yahoo Maps s\u1eed d\u1ee5ng AJAX \u0111\u1ec3 l\u00e0m cho qu\u00e1 tr\u00ecnh \u0111i\u1ec1u h\u01b0\u1edbng d\u1ec5 d\u00e0ng h\u01a1n. Ng\u01b0\u1eddi d\u00f9ng c\u00f3 th\u1ec3 thay \u0111\u1ed5i ch\u1ebf \u0111\u1ed9 xem v\u00e0 thao t\u00e1c tr\u00ean b\u1ea3n \u0111\u1ed3 theo th\u1eddi gian th\u1ef1c, v\u00ed d\u1ee5 nh\u01b0 k\u00e9o b\u1ea3n \u0111\u1ed3 m\u00e0 kh\u00f4ng c\u1ea7n nh\u1ea5p v\u00e0o c\u00e1c n\u00fat.&nbsp;<\/span><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-jquery-ajax-la-gi\"><span class=\"ez-toc-section\" id=\"jQuery_AJAX_la_gi\"><\/span><b>jQuery AJAX l\u00e0 g\u00ec?<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-jquery-ajax-la-gi-0\"><b>jQuery AJAX l\u00e0 g\u00ec?<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">jQuery AJAX l\u00e0 m\u1ed9t ph\u01b0\u01a1ng th\u1ee9c g\u1ecdi AJAX b\u1eb1ng th\u01b0 vi\u1ec7n jQuery.&nbsp;<\/span> <span style=\"font-weight: 400;\">jQuery l\u00e0 m\u1ed9t th\u01b0 vi\u1ec7n JavaScript gi\u00e0u t\u00ednh n\u0103ng, gi\u00fap \u0111\u01a1n gi\u1ea3n h\u00f3a vi\u1ec7c vi\u1ebft m\u00e3 HTML ph\u00eda m\u00e1y kh\u00e1ch. jQuery cung c\u1ea5p c\u00e1c API gi\u00fap duy\u1ec7t c\u00e1c t\u00e0i li\u1ec7u HTML, ho\u1ea1t \u1ea3nh, x\u1eed l\u00fd s\u1ef1 ki\u1ec7n v\u00e0 thao t\u00e1c l\u1ec7nh g\u1ecdi AJAX d\u1ec5 d\u00e0ng h\u01a1n.<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-3-ph\u01b0\u01a1ng-th\u1ee9c-c\u01a1-b\u1ea3n-c\u1ee7a-jquery-ajax\"><b>3 ph\u01b0\u01a1ng th\u1ee9c c\u01a1 b\u1ea3n c\u1ee7a jQuery AJAX:<\/b><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>Ph\u01b0\u01a1ng th\u1ee9c load() trong jQuery AJAX:<\/b><span style=\"font-weight: 400;\">\u00a0<\/span><\/li>\n<\/ul>\n\n\n\n<p><span style=\"font-weight: 400;\">L\u1ea5y d\u1eef li\u1ec7u t\u1eeb m\u00e1y ch\u1ee7 v\u00e0 tr\u1ea3 k\u1ebft qu\u1ea3 cho ph\u1ea7n t\u1eed \u0111\u01b0\u1ee3c ch\u1ecdn.<\/span> <span style=\"font-weight: 400;\">C\u00fa ph\u00e1p:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><pre><span style=\"font-weight: 400;\">$(selector).load(URL,data,callback);<\/span><\/pre><\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>Ph\u01b0\u01a1ng th\u1ee9c get() trong jQuery AJAX:<\/b><\/li>\n<\/ul>\n\n\n\n<p><span style=\"font-weight: 400;\">L\u1ea5y d\u1eef li\u1ec7u t\u1eeb m\u00e1y ch\u1ee7 b\u1eb1ng ph\u01b0\u01a1ng th\u1ee9c HTTP GET<\/span> <span style=\"font-weight: 400;\">C\u00fa ph\u00e1p:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><pre><span style=\"font-weight: 400;\">$.get(URL,data,function(data,status,xhr),dataType)<\/span><\/pre><\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>Ph\u01b0\u01a1ng th\u1ee9c post() trong jQuery AJAX:<\/b><\/li>\n<\/ul>\n\n\n\n<p><span style=\"font-weight: 400;\">L\u1ea5y d\u1eef li\u1ec7u t\u1eeb m\u00e1y ch\u1ee7 b\u1eb1ng ph\u01b0\u01a1ng th\u1ee9c HTTP POST REQUEST<\/span> <span style=\"font-weight: 400;\">C\u00fa ph\u00e1p:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><pre><span style=\"font-weight: 400;\">$(selector).post(URL,data,function(data,status,xhr),dataType)<\/span><\/pre><\/code><\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">Trong \u0111\u00f3:<\/span> <span style=\"font-weight: 400;\">&#8211; URL: l\u00e0 \u0111\u01b0\u1eddng d\u1eabn \u0111\u1ebfn file m\u00e0 b\u1ea1n mu\u1ed1n l\u1ea5y d\u1eef li\u1ec7u<\/span> <span style=\"font-weight: 400;\">&#8211; Data: c\u1eb7p key\/ value g\u1eedi l\u00ean m\u00e1y ch\u1ee7 k\u00e8m v\u1edbi y\u00eau c\u1ea7u<\/span> <span style=\"font-weight: 400;\">&#8211; Callback: t\u00ean h\u00e0m s\u1ebd \u0111\u01b0\u1ee3c th\u1ef1c thi sau khi ho\u00e0n th\u00e0nh ph\u01b0\u01a1ng th\u1ee9c load<\/span> <span style=\"font-weight: 400;\">&#8211; Function: C\u00e1c ch\u1ee9c n\u0103ng x\u1eed l\u00fd khi th\u1ef1c hi\u1ec7n th\u00e0nh c\u00f4ng v\u1edbi c\u00e1c th\u00f4ng s\u1ed1, bao g\u1ed3m:&nbsp;<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><span style=\"font-weight: 400;\">Data: c\u00e1c d\u1eef li\u1ec7u tr\u1ea3 v\u1ec1 t\u1eeb y\u00eau c\u1ea7u<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">Status: c\u00e1c tr\u1ea1ng th\u00e1i request (\u201csuccess\u201d\/ \u201cnot modified\u201d\/ \u201cerror\u201d\/ \u201cparsererror\u201d\/ \u201ctimeout\u201d&#8230;)<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">Xhr: c\u00e1c \u0111\u1ed1i t\u01b0\u1ee3ng XMLhttpRequest<\/span><\/li>\n<\/ul>\n\n\n\n<p><span style=\"font-weight: 400;\">&#8211; DataType: ki\u1ec3u d\u1eef li\u1ec7u tr\u1ea3 v\u1ec1 (text, script, xml, html,&#8230;).<\/span><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-cac-cau-h\u1ecfi-ajax-th\u01b0\u1eddng-g\u1eb7p\"><span class=\"ez-toc-section\" id=\"Cac_cau_hoi_AJAX_thuong_gap\"><\/span><b>C\u00e1c c\u00e2u h\u1ecfi AJAX th\u01b0\u1eddng g\u1eb7p<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-1-b\u1ea1n-co-th\u1ec3-ki\u1ec3m-tra-ma-ajax-nh\u01b0-th\u1ebf-nao\"><b>1. B\u1ea1n c\u00f3 th\u1ec3 ki\u1ec3m tra m\u00e3 AJAX nh\u01b0 th\u1ebf n\u00e0o?<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">M\u00e3 AJAX c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c ki\u1ec3m tra v\u1edbi s\u1ef1 tr\u1ee3 gi\u00fap c\u1ee7a JUnit, \u0111\u00e2y l\u00e0 m\u1ed9t khung ki\u1ec3m tra m\u00e3 ngu\u1ed3n m\u1edf. Tr\u01b0\u1edbc khi ki\u1ec3m tra m\u00e3 AJAX, b\u1ea1n c\u1ea7n t\u1ea1o c\u00e1c tr\u01b0\u1eddng h\u1ee3p ki\u1ec3m tra.<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-2-ajax-datatype-la-gi\"><b>2. AJAX dataType l\u00e0 g\u00ec?<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">AJAX dataType l\u00e0 lo\u1ea1i d\u1eef li\u1ec7u m\u00e0 b\u1ea1n mong nh\u1eadn \u0111\u01b0\u1ee3c t\u1eeb m\u00e1y ch\u1ee7.&nbsp;<\/span> <span style=\"font-weight: 400;\">C\u00e1c lo\u1ea1i d\u1eef li\u1ec7u c\u00f3 s\u1eb5n l\u00e0 text, html, xml, json, jsonp v\u00e0 script.<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><span style=\"font-weight: 400;\">N\u1ebfu <\/span><b>text <\/b><span style=\"font-weight: 400;\">ho\u1eb7c <\/span><b>html <\/b><span style=\"font-weight: 400;\">\u0111\u01b0\u1ee3c ch\u1ec9 \u0111\u1ecbnh: D\u1eef li\u1ec7u \u0111\u01b0\u1ee3c chuy\u1ec3n \u0111\u1ebfn tr\u00ecnh x\u1eed l\u00fd th\u00e0nh c\u00f4ng v\u00e0 \u0111\u01b0\u1ee3c cung c\u1ea5p th\u00f4ng qua thu\u1ed9c t\u00ednh responseText c\u1ee7a \u0111\u1ed1i t\u01b0\u1ee3ng jqXHR.<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">N\u1ebfu <\/span><b>xml <\/b><span style=\"font-weight: 400;\">\u0111\u01b0\u1ee3c ch\u1ec9 \u0111\u1ecbnh: Ph\u1ea3n h\u1ed3i \u0111\u01b0\u1ee3c ph\u00e2n t\u00edch c\u00fa ph\u00e1p b\u1eb1ng jQuery.parseXML, sau \u0111\u00f3 chuy\u1ec3n t\u1edbi tr\u00ecnh x\u1eed l\u00fd th\u00e0nh c\u00f4ng d\u01b0\u1edbi d\u1ea1ng XMLDocument. T\u00e0i li\u1ec7u XML \u0111\u01b0\u1ee3c cung c\u1ea5p th\u00f4ng qua thu\u1ed9c t\u00ednh responseXML c\u1ee7a \u0111\u1ed1i t\u01b0\u1ee3ng jqXHR.<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">N\u1ebfu<\/span><b> json<\/b><span style=\"font-weight: 400;\"> \u0111\u01b0\u1ee3c ch\u1ec9 \u0111\u1ecbnh: Ph\u1ea3n h\u1ed3i \u0111\u01b0\u1ee3c ph\u00e2n t\u00edch c\u00fa ph\u00e1p b\u1eb1ng jQuery.parseJSON, sau \u0111\u00f3 \u0111\u01b0\u1ee3c chuy\u1ec3n t\u1edbi tr\u00ecnh x\u1eed l\u00fd th\u00e0nh c\u00f4ng d\u01b0\u1edbi d\u1ea1ng object. T\u00e0i li\u1ec7u JSON \u0111\u01b0\u1ee3c cung c\u1ea5p th\u00f4ng qua thu\u1ed9c t\u00ednh responseJSON c\u1ee7a \u0111\u1ed1i t\u01b0\u1ee3ng jqXHR.<\/span><\/li>\n<\/ul>\n\n\n\n<p><span style=\"font-weight: 400;\">N\u1ebfu kh\u00f4ng \u0111\u01b0\u1ee3c ch\u1ec9 \u0111\u1ecbnh, jQuery s\u1ebd c\u1ed1 g\u1eafng suy lu\u1eadn AJAX dataType d\u1ef1a tr\u00ean MIME type c\u1ee7a ph\u1ea3n h\u1ed3i.<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-3-s\u1ef1-khac-bi\u1ec7t-gi\u1eefa-cac-th\u01b0-vi\u1ec7n-javascript-va-ajax-la-gi\"><b>3. S\u1ef1 kh\u00e1c bi\u1ec7t gi\u1eefa c\u00e1c th\u01b0 vi\u1ec7n JavaScript v\u00e0 AJAX l\u00e0 g\u00ec?<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">C\u00e1c th\u01b0 vi\u1ec7n JavaScript v\u00e0 AJAX \u0111\u1ec1u l\u00e0 nh\u1eefng c\u00f4ng c\u1ee5 \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 ph\u00e1t tri\u1ec3n web, nh\u01b0ng ch\u00fang c\u00f3 c\u00e1c ch\u1ee9c n\u0103ng v\u00e0 c\u00e1ch s\u1eed d\u1ee5ng kh\u00e1c nhau.<\/span><\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td>&nbsp;<\/td><td><strong>AJAX&nbsp;<\/strong><\/td><td><strong>C\u00e1c th\u01b0 vi\u1ec7n JavaScript&nbsp;<\/strong><\/td><\/tr><tr><td>\n<p style=\"text-align: left;\"><strong>Ch\u1ee9c n\u0103ng<\/strong><\/p>\n<\/td><td><span style=\"font-weight: 400;\">L\u00e0 m\u1ed9t k\u1ef9 thu\u1eadt ph\u00e1t tri\u1ec3n web.<\/span><\/td><td>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">L\u00e0 t\u1eadp h\u1ee3p c\u00e1c m\u00e3 vi\u1ebft s\u1eb5n, c\u00f3 th\u1ec3 d\u1ec5 d\u00e0ng t\u00edch h\u1ee3p v\u00e0o m\u1ed9t d\u1ef1 \u00e1n web.<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">V\u00ed d\u1ee5: jQuery, React v\u00e0 AngularJS<\/span><\/p>\n<\/td><\/tr><tr><td>\n<p style=\"text-align: left;\"><strong>C\u00e1ch s\u1eed d\u1ee5ng<\/strong><\/p>\n<\/td><td><span style=\"font-weight: 400;\">S\u1eed d\u1ee5ng \u0111\u1ec3 t\u1ea1o c\u00e1c \u1ee9ng d\u1ee5ng web \u0111\u1ed9ng nhanh h\u01a1n v\u00e0 m\u01b0\u1ee3t m\u00e0 h\u01a1n, ch\u1eb3ng h\u1ea1n nh\u01b0 c\u1eadp nh\u1eadt n\u1ed9i dung, g\u1eedi bi\u1ec3u m\u1eabu v\u00e0 truy xu\u1ea5t d\u1eef li\u1ec7u.<\/span><\/td><td>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">S\u1eed d\u1ee5ng \u0111\u1ec3 \u0111\u01a1n gi\u1ea3n h\u00f3a v\u00e0 t\u0103ng t\u1ed1c qu\u00e1 tr\u00ecnh ph\u00e1t tri\u1ec3n web.<\/span><\/p>\n<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<h3 class=\"wp-block-heading\" id=\"h-co-th\u1ec3-b\u1ea1n-c\u1ea7n\"><i style=\"font-size: 16px;\"><span style=\"font-weight: 400;\">C\u00f3 th\u1ec3 b\u1ea1n c\u1ea7n:<\/span><\/i><\/h3>\n\n\n\n<p><a href=\"https:\/\/itviec.com\/viec-lam-it\/javascript\/ho-chi-minh-hcm?utm_medium=anchor_text_mid&amp;utm_source=blog&amp;utm_campaign=viec_lam_javascript_tai_hcm&amp;utm_content=aja_la_gi\" target=\"_blank\" rel=\"noopener\"><i><span style=\"font-weight: 400;\">Vi\u1ec7c l\u00e0m JavaScript t\u1ea1i TP.HCM<\/span><\/i><\/a> <a href=\"https:\/\/itviec.com\/viec-lam-it\/javascript\/ha-noi?utm_medium=anchor_text_mid&amp;utm_source=blog&amp;utm_campaign=viec_lam_javascript_tai_ha_noi&amp;utm_content=aja_la_gi\" target=\"_blank\" rel=\"noopener\"><i><span style=\"font-weight: 400;\">Vi\u1ec7c l\u00e0m JavaScript t\u1ea1i H\u00e0 N\u1ed9i<\/span><\/i><\/a><\/p>\n<\/blockquote>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-4-javascript-fetch-la-gi\"><b>4. JavaScript Fetch l\u00e0 g\u00ec?<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">JavaScript Fetch l\u00e0 m\u1ed9t API \u0111\u01b0\u1ee3c xem nh\u01b0 gi\u1ea3i ph\u00e1p thay th\u1ebf hi\u1ec7n \u0111\u1ea1i cho XMLHttpRequest \u0111\u1ec3 truy xu\u1ea5t t\u00e0i nguy\u00ean t\u1eeb m\u00e1y ch\u1ee7. So v\u1edbi XMLHttpRequest, Fetch API c\u00f3 c\u00e1c \u01b0u \u0111i\u1ec3m:<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><span style=\"font-weight: 400;\">C\u00f3 m\u1ed9t b\u1ed9 t\u00ednh n\u0103ng m\u1ea1nh m\u1ebd h\u01a1n, linh ho\u1ea1t v\u00e0 d\u1ec5 s\u1eed d\u1ee5ng nh\u1edd c\u00fa ph\u00e1p v\u00e0 c\u1ea5u tr\u00fac c\u1ee7a n\u00f3.\u00a0<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">\u0110\u01b0\u1ee3c h\u1ed7 tr\u1ee3 b\u1edfi t\u1ea5t c\u1ea3 c\u00e1c tr\u00ecnh duy\u1ec7t web hi\u1ec7n \u0111\u1ea1i.\u00a0<\/span><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-h\u1ecdc-ajax-nh\u01b0-th\u1ebf-nao\"><span class=\"ez-toc-section\" id=\"Hoc_AJAX_nhu_the_nao\"><\/span><b>H\u1ecdc AJAX nh\u01b0 th\u1ebf n\u00e0o?<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">B\u1ea1n n\u00ean b\u1eaft \u0111\u1ea7u h\u1ecdc AJAX n\u1ebfu b\u1ea1n c\u00f3 hi\u1ec3u bi\u1ebft c\u01a1 b\u1ea3n v\u1ec1 ph\u00e1t tri\u1ec3n web v\u00e0 mu\u1ed1n m\u1edf r\u1ed9ng hi\u1ec3u bi\u1ebft \u0111\u00f3. Vi\u1ec7c h\u1ecdc AJAX s\u1ebd nhanh v\u00e0 d\u1ec5 d\u00e0ng h\u01a1n n\u1ebfu b\u1ea1n \u0111\u00e3 c\u00f3 ki\u1ebfn \u200b\u200bth\u1ee9c t\u1eeb tr\u01b0\u1edbc v\u1ec1 HTML, XML, JavaScript v\u00e0 CSS.<\/span><\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em><span style=\"font-weight: 400;\">Xem th\u00eam: <\/span><a href=\"https:\/\/itviec.com\/blog\/web-developer\" target=\"_blank\" rel=\"noreferrer noopener\"><span style=\"font-weight: 400;\">T\u1ea5t c\u1ea3 nh\u1eefng th\u1ee9 c\u1ea7n h\u1ecdc \u0111\u1ec3 tr\u1edf th\u00e0nh Web Developer<\/span><\/a><\/em><\/p>\n<\/blockquote>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-1-4-b\u01b0\u1edbc-d\u1ec3-b\u1eaft-d\u1ea7u-h\u1ecdc-ajax\"><b>1. 4 b\u01b0\u1edbc \u0111\u1ec3 b\u1eaft \u0111\u1ea7u h\u1ecdc AJAX:<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">G\u1ee3i \u00fd l\u1ed9 tr\u00ecnh 4 b\u01b0\u1edbc \u0111\u1ec3 h\u1ecdc AJAX:<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><span style=\"font-weight: 400;\"><strong>L\u00e0m quen v\u1edbi JavaScript, HTML, XML v\u00e0 CS<\/strong>S \u2013 hi\u1ec3u r\u00f5 v\u1ec1 ba ng\u00f4n ng\u1eef n\u00e0y v\u00e0 c\u00e1ch ch\u00fang ho\u1ea1t \u0111\u1ed9ng c\u00f9ng nhau l\u00e0 ki\u1ebfn th\u1ee9c n\u1ec1n t\u1ea3ng \u0111\u1ec3 h\u1ecdc AJAX.<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\"><strong>Nghi\u00ean c\u1ee9u c\u00e1ch AJAX \u0111\u01b0\u1ee3c \u1ee9ng d\u1ee5ng<\/strong> \u2013 t\u00ecm hi\u1ec3u c\u00e1ch AJAX \u0111\u01b0\u1ee3c \u00e1p d\u1ee5ng cho c\u00e1c \u1ee9ng d\u1ee5ng web v\u00e0 c\u00e1c k\u1ef9 thu\u1eadt \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 ph\u00e1t tri\u1ec3n ch\u00fang. V\u00ed d\u1ee5: nghi\u00ean c\u1ee9u Google Maps, ch\u1ea1y AJAX \u0111\u1ec3 truy xu\u1ea5t d\u1eef li\u1ec7u b\u1ea3n \u0111\u1ed3 m\u1edbi.<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\"><strong>Nghi\u00ean c\u1ee9u jQuery<\/strong> \u2013 nhi\u1ec1u \u1ee9ng d\u1ee5ng web s\u1eed d\u1ee5ng AJAX c\u0169ng ch\u1ea1y jQuery. Do \u0111\u00f3, b\u1ea1n n\u00ean t\u00ecm hi\u1ec3u ki\u1ebfn \u200b\u200bth\u1ee9c c\u01a1 b\u1ea3n v\u1ec1 jQuery \u0111\u1ec3 vi\u1ebft c\u00e1c \u1ee9ng d\u1ee5ng AJAX n\u00e2ng cao.<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\"><strong>T\u1ea1o d\u1ef1 \u00e1n b\u1eb1ng AJAX<\/strong> \u2013 \u00e1p d\u1ee5ng ki\u1ebfn \u200b\u200bth\u1ee9c v\u00e0 k\u1ef9 n\u0103ng ph\u00e1t tri\u1ec3n c\u1ee7a b\u1ea1n v\u00e0o th\u1ef1c t\u1ebf l\u00e0 c\u00e1ch t\u1ed1t nh\u1ea5t \u0111\u1ec3 th\u00e0nh th\u1ea1o m\u1ed9t k\u1ef9 thu\u1eadt m\u1edbi.<\/span><\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-2-cac-khoa-h\u1ecdc-ajax-t\u1ed1t-nh\u1ea5t\"><b>2. C\u00e1c kho\u00e1 h\u1ecdc AJAX t\u1ed1t nh\u1ea5t:<\/b><\/h3>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td><strong>T\u00ean kho\u00e1 h\u1ecdc<\/strong><\/td><td><strong>N\u1ed9i dung<\/strong><\/td><td><strong>C\u1ea5p \u0111\u1ed9<\/strong><\/td><td><strong>Chi ph\u00ed<\/strong><\/td><\/tr><tr><td><a href=\"https:\/\/www.udemy.com\/course\/learn-javascript-ajax\/\" target=\"_blank\" rel=\"noopener\"><b>Learn JavaScript AJAX in 1 hour by Udemy<\/b><\/a><\/td><td><span style=\"font-weight: 400;\">H\u01b0\u1edbng d\u1eabn b\u1ea1n c\u00e1ch s\u1eed d\u1ee5ng AJAX \u0111\u1ec3 ch\u1ea1y c\u00e1c y\u00eau c\u1ea7u GET v\u00e0 POST, t\u1ea1o tr\u1ea3i nghi\u1ec7m t\u01b0\u01a1ng t\u00e1c v\u00e0 x\u00e2y d\u1ef1ng n\u1ed9i dung \u0111\u1ed9ng.&nbsp;<\/span><\/td><td><span style=\"font-weight: 400;\">S\u01a1 c\u1ea5p<\/span><\/td><td><span style=\"font-weight: 400;\">Kho\u1ea3ng 16-18 USD<\/span><\/td><\/tr><tr><td><a href=\"https:\/\/www.w3schools.com\/xml\/ajax_intro.asp\" target=\"_blank\" rel=\"noopener\"><b>AJAX Introduction by W3Schools<\/b><\/a><\/td><td><span style=\"font-weight: 400;\">T\u00ecm hi\u1ec3u nh\u1eefng \u0111i\u1ec1u c\u01a1 b\u1ea3n c\u1ee7a AJAX, ki\u1ec3m tra ki\u1ebfn th\u1ee9c v\u1edbi c\u00e1c c\u00e2u \u0111\u1ed1 v\u00e0 b\u00e0i th\u1ef1c h\u00e0nh.<\/span><\/td><td><span style=\"font-weight: 400;\">S\u01a1 c\u1ea5p<\/span><\/td><td><span style=\"font-weight: 400;\">Mi\u1ec5n ph\u00ed<\/span><\/td><\/tr><tr><td><a href=\"https:\/\/www.tutorialspoint.com\/ajax\/index.htm\" target=\"_blank\" rel=\"noopener\"><b>AJAX Tutorial by Tutorials Point<\/b><\/a><b>&nbsp;<\/b><\/td><td><span style=\"font-weight: 400;\">C\u00e1c nguy\u00ean t\u1eafc c\u01a1 b\u1ea3n c\u1ee7a AJAX v\u00e0 c\u00e1ch \u00e1p d\u1ee5ng n\u00f3.<\/span><\/td><td><span style=\"font-weight: 400;\">S\u01a1 c\u1ea5p<\/span><\/td><td><span style=\"font-weight: 400;\">Mi\u1ec5n ph\u00ed<\/span><\/td><\/tr><tr><td><a href=\"https:\/\/www.linkedin.com\/learning\/javascript-and-ajax-integration-techniques\" target=\"_blank\" rel=\"noopener\"><b>JavaScript and AJAX: Integration Techniques by LinkedIn Learning<\/b><\/a><b>&nbsp;<\/b><\/td><td><span style=\"font-weight: 400;\">T\u00ecm hi\u1ec3u c\u00e1c nguy\u00ean t\u1eafc c\u01a1 b\u1ea3n c\u1ee7a AJAX v\u00e0 c\u00e1ch k\u1ebft h\u1ee3p XML, jQuery v\u00e0 JSON.<\/span><\/td><td><span style=\"font-weight: 400;\">Trung c\u1ea5p<\/span><\/td><td><span style=\"font-weight: 400;\">Kho\u1ea3ng 35 &#8211; 40 USD<\/span><\/td><\/tr><tr><td><a href=\"https:\/\/www.udacity.com\/course\/intro-to-ajax--ud110\" target=\"_blank\" rel=\"noopener\"><b>Intro to AJAX by Udacity<\/b><\/a><b>&nbsp;<\/b><\/td><td><span style=\"font-weight: 400;\">&#8211; H\u01b0\u1edbng d\u1eabn c\u00e1ch th\u1ef1c hi\u1ec7n c\u00e1c y\u00eau c\u1ea7u kh\u00f4ng \u0111\u1ed3ng b\u1ed9 b\u1eb1ng ch\u1ee9c n\u0103ng AJAX c\u1ee7a jQuery v\u00e0 API d\u1eef li\u1ec7u ng\u01b0\u1eddi d\u00f9ng.&nbsp;<\/span> <span style=\"font-weight: 400;\">&#8211; Th\u1ef1c h\u00e0nh x\u00e2y d\u1ef1ng m\u1ed9t \u1ee9ng d\u1ee5ng web \u0111\u1ec3 \u00e1p d\u1ee5ng c\u00e1c k\u1ef9 n\u0103ng c\u1ee7a m\u00ecnh.<\/span><\/td><td><span style=\"font-weight: 400;\">Trung c\u1ea5p<\/span><\/td><td><span style=\"font-weight: 400;\">Mi\u1ec5n ph\u00ed<\/span><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-3-sach-v\u1ec1-ajax-t\u1ed1t-nh\u1ea5t\"><b>3. S\u00e1ch v\u1ec1 AJAX t\u1ed1t nh\u1ea5t:<\/b><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.amazon.co.uk\/Head-First-Ajax-Rebecca-Riordan\/dp\/0596515782\" target=\"_blank\" rel=\"noopener\"><b>Head First AJAX<\/b><\/a><b> c\u1ee7a Rebecca M. Riordan<\/b><\/li>\n<\/ul>\n\n\n\n<p><span style=\"font-weight: 400;\">&#8211; M\u1ecdi th\u1ee9 b\u1ea1n c\u1ea7n bi\u1ebft \u0111\u1ec3 s\u1eed d\u1ee5ng AJAX, t\u1eeb vi\u1ec7c s\u1eed d\u1ee5ng m\u00f4 h\u00ecnh s\u1ef1 ki\u1ec7n JavaScript \u0111\u1ebfn thao t\u00e1c DOM trong JavaScript.&nbsp;<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">&#8211; Ngo\u00e0i ra c\u00f2n c\u00f3 c\u00e1c ch\u1ee7 \u0111\u1ec1 li\u00ean quan m\u00e0 b\u1ea1n c\u1ea7n bi\u1ebft \u0111\u1ec3 s\u1eed d\u1ee5ng th\u00e0nh c\u00f4ng AJAX nh\u01b0 JSON v\u00e0 XHTML.<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.amazon.co.uk\/Ajax-Definitive-Anthony-Holdener-III\/dp\/0596528388\" target=\"_blank\" rel=\"noopener\"><b>AJAX: The Definitive Guide<\/b><\/a><b> c\u1ee7a Anthony T. Holdner III<\/b><\/li>\n<\/ul>\n\n\n\n<p><span style=\"font-weight: 400;\">&#8211; B\u1eaft \u0111\u1ea7u b\u1eb1ng gi\u1ea3i th\u00edch c\u00e1ch c\u00e1c \u1ee9ng d\u1ee5ng web \u0111\u01b0\u1ee3c x\u00e2y d\u1ef1ng.<\/span> <span style=\"font-weight: 400;\">&#8211; C\u00e1ch XML, JavaScript v\u00e0 XMLHttpRequest k\u1ebft h\u1ee3p v\u1edbi nhau \u0111\u1ec3 t\u1ea1o ra AJAX.<\/span> <span style=\"font-weight: 400;\">&#8211; C\u00e1ch \u0111i\u1ec1u khi\u1ec3n DOM v\u00e0 th\u00eam c\u00e1c t\u00ednh n\u0103ng t\u01b0\u01a1ng t\u00e1c v\u00e0o c\u00e1c trang web.<\/span> <span style=\"font-weight: 400;\">&#8211; C\u00e1ch \u00e1p d\u1ee5ng c\u00e1c nguy\u00ean t\u1eafc AJAX cho c\u00e1c \u1ee9ng d\u1ee5ng kinh doanh.<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.amazon.co.uk\/Ajax-Dummies-Steve-Holzner\/dp\/0471785970\"><b>AJAX for Dummies<\/b><\/a><b> c\u1ee7a Steve Holzner<\/b><\/li>\n<\/ul>\n\n\n\n<p><span style=\"font-weight: 400;\">Ki\u1ebfn \u200b\u200bth\u1ee9c c\u01a1 b\u1ea3n v\u1ec1 AJAX, ph\u00f9 h\u1ee3p cho nh\u1eefng ai ch\u01b0a t\u1eebng s\u1eed d\u1ee5ng AJAX tr\u01b0\u1edbc \u0111\u00e2y ho\u1eb7c ch\u1ec9 c\u00f3 hi\u1ec3u bi\u1ebft r\u1ea5t h\u1ea1n ch\u1ebf v\u1ec1 AJAX, bao g\u1ed3m:&nbsp;<\/span> <span style=\"font-weight: 400;\">&#8211; C\u00e1c <a href=\"https:\/\/itviec.com\/blog\/framework-la-gi-top-framework-pho-bien-nhat\/\" target=\"_blank\" rel=\"noopener\">framework<\/a> AJAX ph\u1ed5 bi\u1ebfn<\/span> <span style=\"font-weight: 400;\">&#8211; C\u00e1ch x\u1eed l\u00fd XML v\u00e0 <a href=\"https:\/\/itviec.com\/blog\/11-sach-hoc-lap-trinh-php\/\" target=\"_blank\" rel=\"noopener\">PHP<\/a> b\u1eb1ng c\u00e1c \u1ee9ng d\u1ee5ng AJAX.<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-4-tai-li\u1ec7u-ajax-tr\u1ef1c-tuy\u1ebfn-t\u1ed1t-nh\u1ea5t\"><b>4. T\u00e0i li\u1ec7u AJAX tr\u1ef1c tuy\u1ebfn t\u1ed1t nh\u1ea5t:<\/b><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.w3schools.com\/js\/js_ajax_intro.asp\" target=\"_blank\" rel=\"noopener\"><b>W3Schools AJAX Guide<\/b><\/a><\/li>\n<\/ul>\n\n\n\n<p><span style=\"font-weight: 400;\">H\u01b0\u1edbng d\u1eabn ng\u1eafn v\u1ec1 AJAX thu\u1ed9c t\u00e0i li\u1ec7u h\u01b0\u1edbng d\u1eabn v\u1ec1 JavaScript c\u1ee7a W3SChools, bao g\u1ed3m c\u00e1c y\u00eau c\u1ea7u, ph\u1ea3n h\u1ed3i, c\u00e1ch s\u1eed d\u1ee5ng AJAX v\u1edbi c\u01a1 s\u1edf d\u1eef li\u1ec7u,&#8230; k\u00e8m theo c\u00e1c \u0111o\u1ea1n code \u0111\u1ec3 th\u1ef1c h\u00e0nh.<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Guide\/AJAX\" target=\"_blank\" rel=\"noopener\"><b>AJAX Guide by Mozilla<\/b><\/a><\/li>\n<\/ul>\n\n\n\n<p><span style=\"font-weight: 400;\">H\u01b0\u1edbng d\u1eabn chi ti\u1ebft v\u1ec1 AJAX c\u1ee7a Mozilla Developer Network, bao g\u1ed3m nh\u1eefng ki\u1ebfn \u200b\u200bth\u1ee9c c\u01a1 b\u1ea3n v\u1ec1 AJAX v\u00e0 c\u00e1c c\u00f4ng ngh\u1ec7 kh\u00e1c th\u01b0\u1eddng \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng c\u00f9ng v\u1edbi AJAX.<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/learn.jquery.com\/ajax\/\" target=\"_blank\" rel=\"noopener\"><b>jQuery AJAX Documentation<\/b><\/a><\/li>\n<\/ul>\n\n\n\n<p><span style=\"font-weight: 400;\">M\u1ed9t ch\u01b0\u01a1ng v\u1ec1 AJAX trong t\u00e0i li\u1ec7u jQuery, h\u01b0\u1edbng d\u1eabn b\u1ea1n nh\u1eefng ki\u1ebfn \u200b\u200bth\u1ee9c c\u01a1 b\u1ea3n v\u1ec1 AJAX v\u00e0 c\u00e1ch n\u00f3 \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng v\u1edbi jQuery.&nbsp;<\/span><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-cac-thao-tac-c\u01a1-b\u1ea3n-v\u1edbi-ajax\"><span class=\"ez-toc-section\" id=\"Cac_thao_tac_co_ban_voi_AJAX\"><\/span><b>C\u00e1c thao t\u00e1c c\u01a1 b\u1ea3n v\u1edbi AJAX<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">Trang <\/span><a href=\"https:\/\/developer.mozilla.org\/en-US\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">MDN Web Docs<\/span><\/a><span style=\"font-weight: 400;\"> (tr\u01b0\u1edbc \u0111\u00e2y l\u00e0 Mozilla Developer Network) cung c\u1ea5p m\u1ed9t s\u1ed1 b\u01b0\u1edbc th\u1ef1c h\u00e0nh \u0111\u01a1n gi\u1ea3n \u0111\u1ec3 b\u1ea1n b\u1eaft \u0111\u1ea7u l\u00e0m vi\u1ec7c v\u1edbi AJAX.<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-1-b\u01b0\u1edbc-1-t\u1ea1o-m\u1ed9t-yeu-c\u1ea7u-http-th\u1ebf-nao\"><b>1. B\u01b0\u1edbc 1: T\u1ea1o m\u1ed9t y\u00eau c\u1ea7u <\/b><b>HTTP<\/b><b> th\u1ebf n\u00e0o?<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">\u0110\u1ec3 g\u1eedi y\u00eau c\u1ea7u HTTP, tr\u01b0\u1edbc h\u1ebft b\u1ea1n c\u1ea7n m\u1ed9t instance c\u1ee7a m\u1ed9t \u0111\u1ed1i t\u01b0\u1ee3ng c\u00f3 ch\u1ee9c n\u0103ng c\u1ea7n thi\u1ebft. \u0110\u1ed1i t\u01b0\u1ee3ng \u1edf \u0111\u00e2y l\u00e0 <\/span><b>XMLHttpRequest<\/b><span style=\"font-weight: 400;\">.<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><pre>const httpRequest = new XMLHttpRequest();<\/pre><\/code><\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">Sau khi th\u1ef1c hi\u1ec7n m\u1ed9t y\u00eau c\u1ea7u, b\u1ea1n s\u1ebd nh\u1eadn \u0111\u01b0\u1ee3c ph\u1ea3n h\u1ed3i tr\u1edf l\u1ea1i. \u1ede giai \u0111o\u1ea1n n\u00e0y, b\u1ea1n c\u1ea7n cho \u0111\u1ed1i t\u01b0\u1ee3ng XMLHttpRequest bi\u1ebft h\u00e0m JavaScript n\u00e0o s\u1ebd x\u1eed l\u00fd ph\u1ea3n h\u1ed3i, b\u1eb1ng c\u00e1ch \u0111\u1eb7t thu\u1ed9c t\u00ednh <\/span><b>onreadystatechange <\/b><span style=\"font-weight: 400;\">c\u1ee7a \u0111\u1ed1i t\u01b0\u1ee3ng th\u00e0nh h\u00e0m \u0111\u01b0\u1ee3c g\u1ecdi khi y\u00eau c\u1ea7u thay \u0111\u1ed5i tr\u1ea1ng th\u00e1i, nh\u01b0 sau:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><pre><span style=\"font-weight: 400;\">function handler() {<\/span>\n\n<span style=\"font-weight: 400;\">\u00a0\u00a0\/\/ Process the server response here.<\/span>\n\n<span style=\"font-weight: 400;\">}<\/span>\n\n<span style=\"font-weight: 400;\">httpRequest.onreadystatechange = handler;<\/span><\/pre><\/code><\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">L\u01b0u \u00fd r\u1eb1ng kh\u00f4ng c\u00f3 d\u1ea5u ngo\u1eb7c \u0111\u01a1n ho\u1eb7c tham s\u1ed1 sau t\u00ean h\u00e0m, b\u1edfi v\u00ec b\u1ea1n \u0111ang g\u00e1n m\u1ed9t tham chi\u1ebfu cho h\u00e0m ch\u1ee9 kh\u00f4ng th\u1ef1c s\u1ef1 g\u1ecdi h\u00e0m \u0111\u00f3. Ngo\u00e0i ra, thay v\u00ec \u0111\u1eb7t t\u00ean h\u00e0m, b\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng k\u1ef9 thu\u1eadt x\u00e1c \u0111\u1ecbnh h\u00e0m nhanh ch\u00f3ng c\u1ee7a JavaScript (\u0111\u01b0\u1ee3c g\u1ecdi l\u00e0 &#8220;h\u00e0m \u1ea9n danh&#8221;) \u0111\u1ec3 x\u00e1c \u0111\u1ecbnh c\u00e1c h\u00e0nh \u0111\u1ed9ng s\u1ebd x\u1eed l\u00fd ph\u1ea3n h\u1ed3i, nh\u01b0 sau:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><pre><span style=\"font-weight: 400;\">httpRequest.onreadystatechange = () => {<\/span>\n\n<span style=\"font-weight: 400;\">\u00a0\u00a0\/\/ Process the server response here.<\/span>\n\n<span style=\"font-weight: 400;\">};<\/span><\/pre><\/code><\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">Sau khi khai b\u00e1o \u0111i\u1ec1u g\u00ec s\u1ebd x\u1ea3y ra khi nh\u1eadn \u0111\u01b0\u1ee3c ph\u1ea3n h\u1ed3i, b\u1ea1n m\u1edbi th\u1ef1c s\u1ef1 th\u1ef1c hi\u1ec7n y\u00eau c\u1ea7u, b\u1eb1ng c\u00e1ch g\u1ecdi c\u00e1c ph\u01b0\u01a1ng th\u1ee9c <\/span><b>open() <\/b><span style=\"font-weight: 400;\">v\u00e0 <\/span><b>send() <\/b><span style=\"font-weight: 400;\">c\u1ee7a \u0111\u1ed1i t\u01b0\u1ee3ng HTTP Request, nh\u01b0 sau:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><pre><span style=\"font-weight: 400;\">httpRequest.open(\"GET\", \"http:\/\/www.example.org\/some.file\", true);<\/span>\n\n<span style=\"font-weight: 400;\">httpRequest.send();<\/span><\/pre><\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li><span style=\"font-weight: 400;\">Tham s\u1ed1 \u0111\u1ea7u ti\u00ean c\u1ee7a l\u1ec7nh g\u1ecdi <\/span><b>open() <\/b><span style=\"font-weight: 400;\">l\u00e0 <strong>ph\u01b0\u01a1ng th\u1ee9c HTTP Request \u2013 GET, POST, HEAD<\/strong> ho\u1eb7c b\u1ea5t c\u1ee9 ph\u01b0\u01a1ng th\u1ee9c n\u00e0o kh\u00e1c m\u00e0 m\u00e1y ch\u1ee7 h\u1ed7 tr\u1ee3. H\u00e3y vi\u1ebft hoa to\u00e0n b\u1ed9 ph\u01b0\u01a1ng th\u1ee9c theo ti\u00eau chu\u1ea9n HTTP, n\u1ebfu kh\u00f4ng m\u1ed9t s\u1ed1 tr\u00ecnh duy\u1ec7t (nh\u01b0 Firefox) kh\u00f4ng th\u1ec3 x\u1eed l\u00fd y\u00eau c\u1ea7u.\u00a0<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">Tham s\u1ed1 th\u1ee9 hai l\u00e0 <strong>URL m\u00e0 b\u1ea1n \u0111ang g\u1eedi y\u00eau c\u1ea7u<\/strong>. V\u00ec t\u00ednh n\u0103ng b\u1ea3o m\u1eadt, theo m\u1eb7c \u0111\u1ecbnh, b\u1ea1n kh\u00f4ng th\u1ec3 g\u1ecdi URL tr\u00ean mi\u1ec1n c\u1ee7a b\u00ean th\u1ee9 ba. \u0110\u1ea3m b\u1ea3o s\u1eed d\u1ee5ng t\u00ean mi\u1ec1n ch\u00ednh x\u00e1c tr\u00ean t\u1ea5t c\u1ea3 c\u00e1c trang c\u1ee7a b\u1ea1n, n\u1ebfu kh\u00f4ng b\u1ea1n s\u1ebd g\u1eb7p l\u1ed7i &#8220;quy\u1ec1n b\u1ecb t\u1eeb ch\u1ed1i&#8221; khi g\u1ecdi open().\u00a0<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">Tham s\u1ed1 th\u1ee9 ba l\u00e0 tu\u1ef3 ch\u1ecdn, gi\u00fap c\u00e0i \u0111\u1eb7t xem y\u00eau c\u1ea7u c\u1ee7a b\u1ea1n c\u00f3 c\u1ea7n \u201ckh\u00f4ng \u0111\u1ed3ng b\u1ed9\u201d kh\u00f4ng (ch\u00ednh l\u00e0 ch\u1eef A \u0111\u1ea7u ti\u00ean trong AJAX). N\u1ebfu<\/span><b> true<\/b><span style=\"font-weight: 400;\"> (m\u1eb7c \u0111\u1ecbnh) th\u00ec qu\u00e1 tr\u00ecnh th\u1ef1c thi JavaScript s\u1ebd ti\u1ebfp t\u1ee5c v\u00e0 ng\u01b0\u1eddi d\u00f9ng c\u00f3 th\u1ec3 t\u01b0\u01a1ng t\u00e1c v\u1edbi trang trong khi ph\u1ea3n h\u1ed3i c\u1ee7a m\u00e1y ch\u1ee7 v\u1eabn ch\u01b0a \u0111\u1ebfn.\u00a0<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">Tham s\u1ed1 cho ph\u01b0\u01a1ng th\u1ee9c <\/span><b>send() <\/b><span style=\"font-weight: 400;\">c\u00f3 th\u1ec3 l\u00e0 b\u1ea5t k\u1ef3 d\u1eef li\u1ec7u n\u00e0o b\u1ea1n mu\u1ed1n g\u1eedi \u0111\u1ebfn m\u00e1y ch\u1ee7 n\u1ebfu POST g\u1eedi y\u00eau c\u1ea7u. D\u1eef li\u1ec7u bi\u1ec3u m\u1eabu ph\u1ea3i \u0111\u01b0\u1ee3c g\u1eedi \u1edf \u0111\u1ecbnh d\u1ea1ng m\u00e0 m\u00e1y ch\u1ee7 c\u00f3 th\u1ec3 ph\u00e2n t\u00edch c\u00fa ph\u00e1p, ch\u1eb3ng h\u1ea1n nh\u01b0 chu\u1ed7i truy v\u1ea5n:<\/span><\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code><pre><span style=\"font-weight: 400;\">\"name=value&amp;anothername=\"+encodeURIComponent(myVar)+\"&amp;so=on\"<\/span><\/pre><\/code><\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">\u2026ho\u1eb7c c\u00e1c \u0111\u1ecbnh d\u1ea1ng kh\u00e1c, nh\u01b0 d\u1eef li\u1ec7u nhi\u1ec1u ph\u1ea7n\/bi\u1ec3u m\u1eabu <\/span><span style=\"font-weight: 400;\">multipart\/form-data<\/span><span style=\"font-weight: 400;\">, JSON, XML,&#8230;<\/span> <span style=\"font-weight: 400;\">L\u01b0u \u00fd r\u1eb1ng n\u1ebfu b\u1ea1n mu\u1ed1n <\/span><b>POST<\/b><span style=\"font-weight: 400;\"> d\u1eef li\u1ec7u, b\u1ea1n c\u00f3 th\u1ec3 ph\u1ea3i \u0111\u1eb7t <strong>MIME type<\/strong> (chu\u1ed7i v\u0103n b\u1ea3n x\u00e1c \u0111\u1ecbnh \u0111\u1ecbnh d\u1ea1ng t\u1eadp tin) c\u1ee7a y\u00eau c\u1ea7u. <\/span> <span style=\"font-weight: 400;\">V\u00ed d\u1ee5 v\u1ec1 MIME type: text\/html, text\/css, text\/JavaScript, ho\u1eb7c MIME type c\u1ee7a d\u1eef li\u1ec7u bi\u1ec3u m\u1eabu \u0111\u01b0\u1ee3c g\u1eedi d\u01b0\u1edbi d\u1ea1ng chu\u1ed7i truy v\u1ea5n s\u1ebd nh\u01b0 sau:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><pre><span style=\"font-weight: 400;\">httpRequest.setRequestHeader(<\/span>\n\n<span style=\"font-weight: 400;\">\u00a0\u00a0\"Content-Type\",<\/span>\n\n<span style=\"font-weight: 400;\">\u00a0\u00a0\"application\/x-www-form-urlencoded\"<\/span>\n\n<span style=\"font-weight: 400;\">);<\/span><\/pre><\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-2-b\u01b0\u1edbc-2-x\u1eed-ly-ph\u1ea3n-h\u1ed3i-c\u1ee7a-may-ch\u1ee7-th\u1ebf-nao\"><b>2. B\u01b0\u1edbc 2: X\u1eed l\u00fd ph\u1ea3n h\u1ed3i c\u1ee7a m\u00e1y ch\u1ee7 th\u1ebf n\u00e0o?<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">Khi g\u1eedi y\u00eau c\u1ea7u, b\u1ea1n \u0111\u1eb7t t\u00ean c\u1ee7a m\u1ed9t h\u00e0m JavaScript \u0111\u1ec3 x\u1eed l\u00fd ph\u1ea3n h\u1ed3i:<\/span> <span style=\"font-weight: 400;\">\u0110\u1ea7u ti\u00ean, h\u00e0m n\u00e0y c\u1ea7n ki\u1ec3m tra tr\u1ea1ng th\u00e1i c\u1ee7a y\u00eau c\u1ea7u (<strong>readyState<\/strong>).<\/span><\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><b>readyState trong AJAX l\u00e0 g\u00ec?&nbsp;<\/b> <span style=\"font-weight: 400;\">readyState l\u00e0 tr\u1ea1ng th\u00e1i c\u1ee7a \u0111\u1ed1i t\u01b0\u1ee3ng XMLHttpRequest. Tr\u1ea1ng th\u00e1i t\u01b0\u01a1ng \u1ee9ng v\u1edbi c\u00e1c gi\u00e1 tr\u1ecb nh\u01b0 sau:&nbsp; &nbsp; &nbsp; <\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>0 &#8211; (ch\u01b0a \u0111\u01b0\u1ee3c kh\u1edfi t\u1ea1o) ho\u1eb7c (y\u00eau c\u1ea7u ch\u01b0a \u0111\u01b0\u1ee3c kh\u1edfi t\u1ea1o)<\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">1 &#8211; (\u0111ang t\u1ea3i) ho\u1eb7c (\u0111\u00e3 thi\u1ebft l\u1eadp k\u1ebft n\u1ed1i m\u00e1y ch\u1ee7)<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">2 &#8211; (\u0111\u00e3 t\u1ea3i) ho\u1eb7c (\u0111\u00e3 nh\u1eadn y\u00eau c\u1ea7u)<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">3 &#8211; (t\u01b0\u01a1ng t\u00e1c) ho\u1eb7c (\u0111ang x\u1eed l\u00fd y\u00eau c\u1ea7u)<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">4 &#8211; (ho\u00e0n th\u00e0nh) ho\u1eb7c (y\u00eau c\u1ea7u \u0111\u00e3 ho\u00e0n th\u00e0nh v\u00e0 s\u1eb5n s\u00e0ng ph\u1ea3n h\u1ed3i)<\/span><\/li>\n<\/ul>\n<\/blockquote>\n\n\n\n<p><span style=\"font-weight: 400;\">N\u1ebfu readystate c\u00f3 gi\u00e1 tr\u1ecb l\u00e0 XMLHttpRequest.DONE (t\u01b0\u01a1ng \u1ee9ng v\u1edbi 4), \u0111i\u1ec1u \u0111\u00f3 c\u00f3 ngh\u0129a l\u00e0 to\u00e0n b\u1ed9 ph\u1ea3n h\u1ed3i c\u1ee7a m\u00e1y ch\u1ee7 \u0111\u00e3 \u0111\u01b0\u1ee3c nh\u1eadn v\u00e0 b\u1ea1n c\u00f3 th\u1ec3 ti\u1ebfp t\u1ee5c x\u1eed l\u00fd.<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><pre><span style=\"font-weight: 400;\">if (httpRequest.readyState === XMLHttpRequest.DONE) {<\/span>\n\n<span style=\"font-weight: 400;\">\u00a0\u00a0\/\/ Everything is good, the response was received.<\/span>\n\n<span style=\"font-weight: 400;\">} else {<\/span>\n\n<span style=\"font-weight: 400;\">\u00a0\u00a0\/\/ Not ready yet.<\/span>\n\n<span style=\"font-weight: 400;\">}<\/span><\/pre><\/code><\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">Ti\u1ebfp theo, h\u00e3y ki\u1ec3m tra m\u00e3 tr\u1ea1ng th\u00e1i c\u1ee7a ph\u1ea3n h\u1ed3i HTTP (<strong>httpRequest.status)<\/strong>. Trong v\u00ed d\u1ee5 sau, ch\u00fang t\u00f4i ph\u00e2n bi\u1ec7t gi\u1eefa l\u1ec7nh g\u1ecdi AJAX th\u00e0nh c\u00f4ng v\u00e0 kh\u00f4ng th\u00e0nh c\u00f4ng b\u1eb1ng c\u00e1ch ki\u1ec3m tra m\u00e3 tr\u1ea1ng th\u00e1i ph\u1ea3n h\u1ed3i 200 &#8211; OK.<\/span><\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"has-text-align-left\"><strong>C\u00e1c m\u00e3 tr\u1ea1ng th\u00e1i ph\u1ea3n h\u1ed3i HTTP trong AJAX l\u00e0 g\u00ec?<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><span style=\"font-weight: 400;\">200 &#8211; OK: M\u00e1y ch\u1ee7 \u0111\u00e3 x\u1eed l\u00fd y\u00eau c\u1ea7u th\u00e0nh c\u00f4ng.<\/span><\/li>\n\n\n\n<li>404 &#8211; Not Found: M\u00e1y ch\u1ee7 kh\u00f4ng th\u1ec3 t\u00ecm th\u1ea5y trang \u0111\u01b0\u1ee3c y\u00eau c\u1ea7u.<\/li>\n\n\n\n<li>503 &#8211; Service Unavailable: M\u00e1y ch\u1ee7 t\u1ea1m th\u1eddi kh\u00f4ng kh\u1ea3 d\u1ee5ng<\/li>\n<\/ul>\n<\/blockquote>\n\n\n\n<pre class=\"wp-block-code\"><code><pre><span style=\"font-weight: 400;\">if (httpRequest.status === 200) {<\/span>\n\n<span style=\"font-weight: 400;\">\u00a0\u00a0\/\/ Perfect!<\/span>\n\n<span style=\"font-weight: 400;\">} else {<\/span>\n\n<span style=\"font-weight: 400;\">\u00a0\u00a0\/\/ There was a problem with the request.<\/span>\n\n<span style=\"font-weight: 400;\">\u00a0\u00a0\/\/ For example, the response may have a 404 (Not Found)<\/span>\n\n<span style=\"font-weight: 400;\">\u00a0\u00a0\/\/ or 500 (Internal Server Error) response code.<\/span>\n\n<span style=\"font-weight: 400;\">}<\/span><\/pre><\/code><\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">Sau khi ki\u1ec3m tra readyState v\u00e0 m\u00e3 httpRequest.status, b\u1ea1n c\u00f3 th\u1ec3 l\u00e0m b\u1ea5t c\u1ee9 \u0111i\u1ec1u g\u00ec m\u00ecnh mu\u1ed1n v\u1edbi d\u1eef li\u1ec7u m\u00e0 m\u00e1y ch\u1ee7 \u0111\u00e3 g\u1eedi. B\u1ea1n c\u00f3 hai t\u00f9y ch\u1ecdn \u0111\u1ec3 truy c\u1eadp d\u1eef li\u1ec7u n\u00e0y:<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><span style=\"font-weight: 400;\">httpRequest.responseText \u2013 tr\u1ea3 v\u1ec1 ph\u1ea3n h\u1ed3i c\u1ee7a m\u00e1y ch\u1ee7 d\u01b0\u1edbi d\u1ea1ng m\u1ed9t chu\u1ed7i v\u0103n b\u1ea3n<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">httpRequest.responseXML \u2013 tr\u1ea3 v\u1ec1 ph\u1ea3n h\u1ed3i d\u01b0\u1edbi d\u1ea1ng m\u1ed9t \u0111\u1ed1i t\u01b0\u1ee3ng XMLDocument m\u00e0 b\u1ea1n c\u00f3 th\u1ec3 duy\u1ec7t b\u1eb1ng c\u00e1c h\u00e0m JavaScript DOM<\/span><\/li>\n<\/ul>\n\n\n\n<p><span style=\"font-weight: 400;\">L\u01b0u \u00fd r\u1eb1ng c\u00e1c b\u01b0\u1edbc tr\u00ean ch\u1ec9 h\u1ee3p l\u1ec7 n\u1ebfu b\u1ea1n s\u1eed d\u1ee5ng y\u00eau c\u1ea7u kh\u00f4ng \u0111\u1ed3ng b\u1ed9 (tham s\u1ed1 th\u1ee9 ba c\u1ee7a open() kh\u00f4ng \u0111\u01b0\u1ee3c ch\u1ec9 \u0111\u1ecbnh ho\u1eb7c \u0111\u01b0\u1ee3c \u0111\u1eb7t th\u00e0nh true). N\u1ebfu b\u1ea1n s\u1eed d\u1ee5ng m\u1ed9t y\u00eau c\u1ea7u \u0111\u1ed3ng b\u1ed9, b\u1ea1n kh\u00f4ng c\u1ea7n ch\u1ec9 r\u00f5 h\u00e0m, nh\u01b0ng \u0111i\u1ec1u n\u00e0y kh\u00f4ng \u0111\u01b0\u1ee3c khuy\u1ebfn kh\u00edch v\u00ec n\u00f3 s\u1ebd t\u1ea1o ra tr\u1ea3i nghi\u1ec7m ng\u01b0\u1eddi d\u00f9ng r\u1ea5t t\u1ec7.<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-3-b\u01b0\u1edbc-3-th\u1ef1c-hanh-m\u1ed9t-vi-d\u1ee5-d\u01a1n-gi\u1ea3n\"><b>3. B\u01b0\u1edbc 3: Th\u1ef1c h\u00e0nh m\u1ed9t v\u00ed d\u1ee5 \u0111\u01a1n gi\u1ea3n<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">H\u00e3y k\u1ebft h\u1ee3p t\u1ea5t c\u1ea3 l\u1ea1i v\u1edbi m\u1ed9t y\u00eau c\u1ea7u HTTP \u0111\u01a1n gi\u1ea3n. JavaScript s\u1ebd y\u00eau c\u1ea7u m\u1ed9t t\u00e0i li\u1ec7u HTML, test.html, ch\u1ee9a d\u00f2ng text &#8220;I\u2019m a test&#8221;. Sau \u0111\u00f3, ch\u00fang t\u00f4i s\u1ebd \u0111\u1eb7t <strong>alert()<\/strong> n\u1ed9i dung c\u1ee7a ph\u1ea3n h\u1ed3i. L\u01b0u \u00fd r\u1eb1ng v\u00ed d\u1ee5 n\u00e0y s\u1eed d\u1ee5ng vanilla JavaScript \u2014 kh\u00f4ng li\u00ean quan \u0111\u1ebfn jQuery. Ngo\u00e0i ra, c\u00e1c t\u1ec7p HTML, XML v\u00e0 PHP ph\u1ea3i \u0111\u01b0\u1ee3c \u0111\u1eb7t trong c\u00f9ng m\u1ed9t th\u01b0 m\u1ee5c.<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><pre><span style=\"font-weight: 400;\">&lt;button id=\"AJAXButton\" type=\"button\">Make a request&lt;\/button><\/span>\n\n<span style=\"font-weight: 400;\">&lt;script><\/span>\n\n<span style=\"font-weight: 400;\">\u00a0\u00a0(() => {<\/span>\n\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0let httpRequest;<\/span>\n\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0document<\/span>\n\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.getElementById(\"AJAXButton\")<\/span>\n\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.addEventListener(\"click\", makeRequest);<\/span>\n\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0function makeRequest() {<\/span>\n\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0httpRequest = new XMLHttpRequest();<\/span>\n\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if (!httpRequest) {<\/span>\n\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0alert(\"Giving up :( Cannot create an XMLHTTP instance\");<\/span>\n\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return false;<\/span>\n\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}<\/span>\n\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0httpRequest.onreadystatechange = alertContents;<\/span>\n\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0httpRequest.open(\"GET\", \"test.html\");<\/span>\n\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0httpRequest.send();<\/span>\n\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0}<\/span>\n\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0function alertContents() {<\/span>\n\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if (httpRequest.readyState === XMLHttpRequest.DONE) {<\/span>\n\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if (httpRequest.status === 200) {<\/span>\n\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0alert(httpRequest.responseText);<\/span>\n\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0} else {<\/span>\n\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0alert(\"There was a problem with the request.\");<\/span>\n\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}<\/span>\n\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}<\/span>\n\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0}<\/span>\n\n<span style=\"font-weight: 400;\">\u00a0\u00a0})();<\/span>\n\n<span style=\"font-weight: 400;\">&lt;\/script><\/span><\/pre><\/code><\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">Trong v\u00ed d\u1ee5 n\u00e0y:<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><span style=\"font-weight: 400;\">Ng\u01b0\u1eddi d\u00f9ng nh\u1ea5p v\u00e0o n\u00fat &#8220;Th\u1ef1c hi\u1ec7n y\u00eau c\u1ea7u&#8221;;<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">Tr\u00ecnh x\u1eed l\u00fd s\u1ef1 ki\u1ec7n s\u1ebd g\u1ecdi h\u00e0m makeRequest();<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">Y\u00eau c\u1ea7u \u0111\u01b0\u1ee3c th\u1ef1c hi\u1ec7n v\u00e0 sau \u0111\u00f3 (onreadystatechange) vi\u1ec7c th\u1ef1c thi \u0111\u01b0\u1ee3c chuy\u1ec3n \u0111\u1ebfn alertContents();<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">alertContents() ki\u1ec3m tra xem \u0111\u00e3 nh\u1eadn \u0111\u01b0\u1ee3c ph\u1ea3n h\u1ed3i v\u00e0 OK ch\u01b0a, sau \u0111\u00f3 alert() n\u1ed9i dung c\u1ee7a t\u1ec7p test.html.<\/span><\/li>\n<\/ul>\n\n\n\n<p><span style=\"font-weight: 400;\">Trong tr\u01b0\u1eddng h\u1ee3p x\u1ea3y ra l\u1ed7i giao ti\u1ebfp (v\u00ed d\u1ee5 nh\u01b0 m\u00e1y ch\u1ee7 g\u1eb7p s\u1ef1 c\u1ed1), m\u1ed9t ngo\u1ea1i l\u1ec7 s\u1ebd \u0111\u01b0\u1ee3c \u0111\u01b0a ra trong ph\u01b0\u01a1ng th\u1ee9c onreadystatechange khi truy c\u1eadp tr\u1ea1ng th\u00e1i ph\u1ea3n h\u1ed3i. \u0110\u1ec3 gi\u1ea3m thi\u1ec3u v\u1ea5n \u0111\u1ec1 n\u00e0y, b\u1ea1n c\u00f3 th\u1ec3 \u0111\u00f3ng g\u00f3i c\u00e2u l\u1ec7nh if&#8230;else c\u1ee7a m\u00ecnh trong l\u1ec7nh try&#8230;catch:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><pre><span style=\"font-weight: 400;\">function alertContents() {<\/span>\n\n<span style=\"font-weight: 400;\">\u00a0\u00a0try {<\/span>\n\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0if (httpRequest.readyState === XMLHttpRequest.DONE) {<\/span>\n\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if (httpRequest.status === 200) {<\/span>\n\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0alert(httpRequest.responseText);<\/span>\n\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0} else {<\/span>\n\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0alert(\"There was a problem with the request.\");<\/span>\n\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}<\/span>\n\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0}<\/span>\n\n<span style=\"font-weight: 400;\">\u00a0\u00a0} catch (e) {<\/span>\n\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0alert(`Caught Exception: ${e.description}`);<\/span>\n\n<span style=\"font-weight: 400;\">\u00a0\u00a0}<\/span>\n\n<span style=\"font-weight: 400;\">}<\/span><\/pre><\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-4-b\u01b0\u1edbc-4-lam-vi\u1ec7c-v\u1edbi-ph\u1ea3n-h\u1ed3i-xml\"><b>4. B\u01b0\u1edbc 4: L\u00e0m vi\u1ec7c v\u1edbi ph\u1ea3n h\u1ed3i XML<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">Trong v\u00ed d\u1ee5 tr\u01b0\u1edbc, sau khi nh\u1eadn \u0111\u01b0\u1ee3c ph\u1ea3n h\u1ed3i cho y\u00eau c\u1ea7u HTTP, ch\u00fang ta \u0111\u00e3 s\u1eed d\u1ee5ng thu\u1ed9c t\u00ednh responseText c\u1ee7a \u0111\u1ed1i t\u01b0\u1ee3ng y\u00eau c\u1ea7u, thu\u1ed9c t\u00ednh n\u00e0y ch\u1ee9a n\u1ed9i dung c\u1ee7a t\u1ec7p test.html. B\u00e2y gi\u1edd, h\u00e3y th\u1eed thu\u1ed9c t\u00ednh responseXML.<\/span> <span style=\"font-weight: 400;\">Tr\u01b0\u1edbc h\u1ebft, h\u00e3y t\u1ea1o m\u1ed9t t\u00e0i li\u1ec7u XML h\u1ee3p l\u1ec7 m\u00e0 ch\u00fang ta s\u1ebd y\u00eau c\u1ea7u sau n\u00e0y. T\u00e0i li\u1ec7u (test.xml) ch\u1ee9a c\u00e1c n\u1ed9i dung sau:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><pre><span style=\"font-weight: 400;\">&lt;?xml version=\"1.0\" ?><\/span>\n\n<span style=\"font-weight: 400;\">&lt;root> I'm a test. &lt;\/root><\/span><\/pre><\/code><\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">Ti\u1ebfp theo, trong makeRequest(), ch\u00fang ta c\u1ea7n thay th\u1ebf test.html b\u1eb1ng t\u1ec7p XML m\u00e0 ch\u00fang ta v\u1eeba t\u1ea1o:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><pre><span style=\"font-weight: 400;\">httpRequest.open(\"GET\", \"test.xml\");<\/span><\/pre><\/code><\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">Sau \u0111\u00f3 trong alertContents(), ch\u00fang ta c\u1ea7n thay th\u1ebf d\u00f2ng alert(httpRequest.responseText); b\u1eb1ng:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><pre><span style=\"font-weight: 400;\">const xmldoc = httpRequest.responseXML;<\/span>\n\n<span style=\"font-weight: 400;\">const root_node = xmldoc.querySelector(\"root\");<\/span>\n\n<span style=\"font-weight: 400;\">alert(root_node.firstChild.data);<\/span><\/pre><\/code><\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">\u0110o\u1ea1n code n\u00e0y l\u1ea5y \u0111\u1ed1i t\u01b0\u1ee3ng XMLDocument do responseXML cung c\u1ea5p v\u00e0 s\u1eed d\u1ee5ng c\u00e1c ph\u01b0\u01a1ng th\u1ee9c DOM \u0111\u1ec3 truy c\u1eadp m\u1ed9t s\u1ed1 d\u1eef li\u1ec7u c\u00f3 trong t\u00e0i li\u1ec7u XML.<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-5-b\u01b0\u1edbc-5-lam-vi\u1ec7c-v\u1edbi-data\"><b>5. B\u01b0\u1edbc 5: L\u00e0m vi\u1ec7c v\u1edbi data:<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">Cu\u1ed1i c\u00f9ng, h\u00e3y th\u1ef1c h\u00e0nh g\u1eedi m\u1ed9t s\u1ed1 d\u1eef li\u1ec7u \u0111\u1ebfn m\u00e1y ch\u1ee7 v\u00e0 nh\u1eadn ph\u1ea3n h\u1ed3i. L\u1ea7n n\u00e0y, JavaScript s\u1ebd y\u00eau c\u1ea7u m\u1ed9t trang \u0111\u1ed9ng (VD: test.php) l\u1ea5y d\u1eef li\u1ec7u m\u00e0 ch\u00fang ta \u0111\u00e3 g\u1eedi v\u00e0 tr\u1ea3 v\u1ec1 m\u1ed9t chu\u1ed7i c\u00f3 n\u1ed9i dung: &#8220;Xin ch\u00e0o, [d\u1eef li\u1ec7u ng\u01b0\u1eddi d\u00f9ng]!&#8221; &#8211; \u0111\u00e2y l\u00e0 th\u1ee9 m\u00e0 ch\u00fang ta s\u1ebd alert().<\/span> <span style=\"font-weight: 400;\">Tr\u01b0\u1edbc ti\u00ean, ch\u00fang ta s\u1ebd th\u00eam m\u1ed9t text box v\u00e0o HTML \u0111\u1ec3 ng\u01b0\u1eddi d\u00f9ng c\u00f3 th\u1ec3 nh\u1eadp t\u00ean c\u1ee7a h\u1ecd:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><pre><span style=\"font-weight: 400;\">&lt;label><\/span>\n\n<span style=\"font-weight: 400;\">\u00a0\u00a0Your name:<\/span>\n\n<span style=\"font-weight: 400;\">\u00a0\u00a0&lt;input type=\"text\" id=\"AJAXTextbox\" \/><\/span>\n\n<span style=\"font-weight: 400;\">&lt;\/label><\/span>\n\n<span style=\"font-weight: 400;\">&lt;span id=\"AJAXButton\" style=\"cursor: pointer; text-decoration: underline\"><\/span>\n\n<span style=\"font-weight: 400;\">\u00a0\u00a0Make a request<\/span>\n\n<span style=\"font-weight: 400;\">&lt;\/span><\/span><\/pre><\/code><\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">Ch\u00fang ta c\u0169ng s\u1ebd th\u00eam m\u1ed9t line v\u00e0o tr\u00ecnh x\u1eed l\u00fd s\u1ef1 ki\u1ec7n \u0111\u1ec3 l\u1ea5y d\u1eef li\u1ec7u c\u1ee7a ng\u01b0\u1eddi d\u00f9ng t\u1eeb text box v\u00e0 g\u1eedi n\u00f3 t\u1edbi h\u00e0m makeRequest() c\u00f9ng v\u1edbi URL c\u1ee7a t\u1eadp l\u1ec7nh ph\u00eda m\u00e1y ch\u1ee7:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><pre><span style=\"font-weight: 400;\">document.getElementById(\"AJAXButton\").onclick = () => {<\/span>\n\n<span style=\"font-weight: 400;\">\u00a0\u00a0const userName = document.getElementById(\"AJAXTextbox\").value;<\/span>\n\n<span style=\"font-weight: 400;\">\u00a0\u00a0makeRequest(\"test.php\", userName);<\/span>\n\n<span style=\"font-weight: 400;\">};<\/span><\/pre><\/code><\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">Ch\u00fang ta c\u1ea7n s\u1eeda \u0111\u1ed5i makeRequest() \u0111\u1ec3 ch\u1ea5p nh\u1eadn d\u1eef li\u1ec7u ng\u01b0\u1eddi d\u00f9ng v\u00e0 chuy\u1ec3n d\u1eef li\u1ec7u \u0111\u00f3 \u0111\u1ebfn m\u00e1y ch\u1ee7. Ch\u00fang ta s\u1ebd thay \u0111\u1ed5i ph\u01b0\u01a1ng th\u1ee9c y\u00eau c\u1ea7u t\u1eeb GET th\u00e0nh POST, \u0111\u1ed3ng th\u1eddi th\u00eam d\u1eef li\u1ec7u d\u01b0\u1edbi d\u1ea1ng tham s\u1ed1 trong l\u1ec7nh g\u1ecdi t\u1edbi httpRequest.send():<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><pre><span style=\"font-weight: 400;\">function makeRequest(url, userName) {<\/span>\n\n<span style=\"font-weight: 400;\">\u00a0\u00a0\/\/ \u2026<\/span>\n\n<span style=\"font-weight: 400;\">\u00a0\u00a0httpRequest.onreadystatechange = alertContents;<\/span>\n\n<span style=\"font-weight: 400;\">\u00a0\u00a0httpRequest.open(\"POST\", url);<\/span>\n\n<span style=\"font-weight: 400;\">\u00a0\u00a0httpRequest.setRequestHeader(<\/span>\n\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\"Content-Type\",<\/span>\n\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\"application\/x-www-form-urlencoded\"<\/span>\n\n<span style=\"font-weight: 400;\">\u00a0\u00a0);<\/span>\n\n<span style=\"font-weight: 400;\">\u00a0\u00a0httpRequest.send(`userName=${encodeURIComponent(userName)}`);<\/span>\n\n<span style=\"font-weight: 400;\">}<\/span><\/pre><\/code><\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">H\u00e0m alertContents() c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c vi\u1ebft gi\u1ed1ng nh\u01b0 trong B\u01b0\u1edbc 3 \u0111\u1ec3 c\u1ea3nh b\u00e1o chu\u1ed7i \u0111\u00e3 t\u00ednh to\u00e1n c\u1ee7a ch\u00fang ta, n\u1ebfu \u0111\u00f3 l\u00e0 t\u1ea5t c\u1ea3 nh\u1eefng g\u00ec m\u00e1y ch\u1ee7 tr\u1ea3 v\u1ec1. Tuy nhi\u00ean, gi\u1ea3 s\u1eed m\u00e1y ch\u1ee7 s\u1ebd tr\u1ea3 v\u1ec1 c\u1ea3 chu\u1ed7i \u0111\u01b0\u1ee3c t\u00ednh to\u00e1n v\u00e0 d\u1eef li\u1ec7u ng\u01b0\u1eddi d\u00f9ng ban \u0111\u1ea7u, khi \u0111\u00f3 n\u1ebfu ng\u01b0\u1eddi d\u00f9ng c\u1ee7a ch\u00fang t\u00f4i nh\u1eadp &#8220;Jane&#8221; v\u00e0o text box, ph\u1ea3n h\u1ed3i c\u1ee7a m\u00e1y ch\u1ee7 s\u1ebd nh\u01b0 th\u1ebf n\u00e0y:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><pre><span style=\"font-weight: 400;\">{ \"userData\": \"Jane\", \"computedString\": \"Hi, Jane!\" }<\/span><\/pre><\/code><\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">\u0110\u1ec3 s\u1eed d\u1ee5ng d\u1eef li\u1ec7u n\u00e0y trong alertContents(), ch\u00fang ta kh\u00f4ng th\u1ec3 ch\u1ec9 c\u1ea3nh b\u00e1o responseText, ch\u00fang ta ph\u1ea3i ph\u00e2n t\u00edch n\u00f3 v\u00e0 c\u1ea3nh b\u00e1o computedString, thu\u1ed9c t\u00ednh m\u00e0 ch\u00fang ta mu\u1ed1n:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><pre><span style=\"font-weight: 400;\">function alertContents() {<\/span>\n\n<span style=\"font-weight: 400;\">\u00a0\u00a0if (httpRequest.readyState === XMLHttpRequest.DONE) {<\/span>\n\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0if (httpRequest.status === 200) {<\/span>\n\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0const response = JSON.parse(httpRequest.responseText);<\/span>\n\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0alert(response.computedString);<\/span>\n\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0} else {<\/span>\n\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0alert(\"There was a problem with the request.\");<\/span>\n\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0}<\/span>\n\n<span style=\"font-weight: 400;\">\u00a0\u00a0}<\/span>\n\n<span style=\"font-weight: 400;\">}<\/span><\/pre><\/code><\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">T\u1ec7p test.php ph\u1ea3i ch\u1ee9a c\u00e1c th\u00f4ng tin sau:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><pre><span style=\"font-weight: 400;\">$name = $_POST&#91;'userName'] ?? 'no name';<\/span>\n\n<span style=\"font-weight: 400;\">$computedString = \"Hi, \" . $name . \"!\";<\/span>\n\n<span style=\"font-weight: 400;\">$array = &#91;'userName' => $name, 'computedString' => $computedString];<\/span>\n\n<span style=\"font-weight: 400;\">echo json_encode($array);<\/span><\/pre><\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-t\u1ed5ng-k\u1ebft\"><span class=\"ez-toc-section\" id=\"Tong_ket\"><\/span><b>T\u1ed5ng k\u1ebft<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">N\u1ebfu b\u1ea1n \u0111ang quan t\u00e2m \u0111\u1ebfn l\u0129nh v\u1ef1c ph\u00e1t tri\u1ec3n \u1ee9ng web, th\u00ec AJAX l\u00e0 k\u1ef9 thu\u1eadt r\u1ea5t c\u1ea7n thi\u1ebft \u0111\u1ec3 b\u1ea1n th\u00eam v\u00e0o skillset c\u1ee7a m\u00ecnh. Qua b\u00e0i vi\u1ebft tr\u00ean, ITviec \u0111\u00e3 gi\u00fap b\u1ea1n hi\u1ec3u \u0111\u01b0\u1ee3c AJAX l\u00e0 g\u00ec, c\u00e1ch AJAX ho\u1ea1t \u0111\u1ed9ng, c\u00e1c AJAX datatype,&#8230; \u0111\u1ec3 b\u1ea1n c\u00f3 th\u1ec3 d\u1ec5 d\u00e0ng th\u1ef1c h\u00e0nh h\u01a1n.<\/span> <span style=\"font-weight: 400;\">S\u1ebd kh\u00f4ng qu\u00e1 kh\u00f3 \u0111\u1ec3 h\u1ecdc c\u00e1ch s\u1eed d\u1ee5ng AJAX n\u1ebfu b\u1ea1n \u0111\u00e3 c\u00f3 hi\u1ec3u bi\u1ebft v\u1ec1 HTML, XML, JavaScript v\u00e0 CSS. Do v\u1eady, \u0111\u1ec3 tr\u1edf th\u00e0nh m\u1ed9t web developer tr\u00ecnh \u0111\u1ed9 cao v\u00e0 c\u00f3 th\u00eam nhi\u1ec1u c\u01a1 h\u1ed9i vi\u1ec7c l\u00e0m \u201cch\u1ea5t\u201d, h\u00e3y b\u1eaft \u0111\u1ea7u nghi\u00ean c\u1ee9u AJAX ngay v\u1edbi nh\u1eefng th\u00f4ng tin \u0111\u01b0\u1ee3c cung c\u1ea5p trong b\u00e0i vi\u1ebft n\u00e0y nh\u00e9.<\/span><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"300\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2015\/07\/Robby2.png\" alt=\"robby-2\" class=\"wp-image-5668\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2015\/07\/Robby2.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2015\/07\/Robby2-200x200.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2015\/07\/Robby2-60x60.png 60w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/figure>\n\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><\/figure>\n<\/div>\n\n\n\n<p class=\"has-text-align-center has-text-align-center\" id=\"block-bdf220a1-3635-4794-9101-81d879939b92\"><strong>B\u1ea1n th\u1ea5y b\u00e0i vi\u1ebft hay v\u00e0 h\u1eefu \u00edch? \u0110\u1eebng ng\u1ea1i Share v\u1edbi b\u1ea1n b\u00e8 v\u00e0 \u0111\u1ed3ng nghi\u1ec7p nh\u00e9.<\/strong><\/p>\n\n\n\n<p class=\"has-text-align-center has-text-align-center\" id=\"block-a1315aab-406f-48df-97fc-6b9584e6e134\"><strong>V\u00e0 nhanh tay tham kh\u1ea3o&nbsp;<a href=\"http:\/\/itviec.com\/?utm_medium=anchor_text_low&amp;utm_source=blog&amp;utm_campaign=viec_lam_it&amp;utm_content=aja_la_gi\" target=\"_blank\" rel=\"noreferrer noopener\">vi\u1ec7c l\u00e0m IT<\/a>&nbsp;\u201cch\u1ea5t\u201d tr\u00ean ITviec<\/strong>!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>AJAX l\u00e0 g\u00ec? AJAX l\u00e0 m\u1ed9t k\u1ef9 thu\u1eadt ph\u00e1t tri\u1ec3n web hi\u1ec7n \u0111\u1ea1i gi\u00fap \u1ee9ng d\u1ee5ng web ng\u00e0y c\u00e0ng nhanh v\u00e0 m\u01b0\u1ee3t nh\u01b0 c\u00e1c \u1ee9ng d\u1ee5ng desktop. B\u00e0i vi\u1ebft n\u00e0y cung c\u1ea5p m\u1ecdi th\u1ee9 b\u1ea1n c\u1ea7n \u0111\u1ec3 c\u00f3 th\u1ec3 b\u1eaft \u0111\u1ea7u s\u1eed d\u1ee5ng AJAX, bao g\u1ed3m ki\u1ebfn th\u1ee9c n\u1ec1n t\u1ea3ng, v\u00ed d\u1ee5 th\u1ef1c t\u1ebf v\u00e0 [&hellip;]<\/p>\n","protected":false},"author":114,"featured_media":27258,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_gspb_post_css":"","footnotes":""},"categories":[109],"tags":[],"class_list":["post-27227","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-chuyen-mon-it"],"blocksy_meta":[],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.8 (Yoast SEO v27.8) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>AJAX l\u00e0 g\u00ec? T\u1ea5t t\u1ea7n t\u1eadt nh\u1eefng g\u00ec b\u1ea1n c\u1ea7n bi\u1ebft v\u1ec1 AJAX - ITviec Blog<\/title>\n<meta name=\"description\" content=\"AJAX l\u00e0 g\u00ec? AJAX l\u00e0 k\u1ef9 thu\u1eadt l\u00e0m web hi\u1ec7n \u0111\u1ea1i m\u00e0 m\u1ecdi web developer \u0111\u1ec1u n\u00ean bi\u1ebft. \u0110\u1ecdc ngay \u0111\u1ec3 hi\u1ec3u c\u00e1ch ho\u1ea1t \u0111\u1ed9ng v\u00e0 th\u1ef1c h\u00e0nh AJAX d\u1ec5 d\u00e0ng.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/itviec.com\/blog\/ajax-la-gi\/\" \/>\n<meta property=\"og:locale\" content=\"vi_VN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"AJAX l\u00e0 g\u00ec? Quy tr\u00ecnh ho\u1ea1t \u0111\u1ed9ng v\u00e0 th\u1ef1c h\u00e0nh AJAX d\u1ec5 hi\u1ec3u cho Web Developer\" \/>\n<meta property=\"og:description\" content=\"AJAX l\u00e0 g\u00ec? AJAX l\u00e0 m\u1ed9t k\u1ef9 thu\u1eadt ph\u00e1t tri\u1ec3n web hi\u1ec7n \u0111\u1ea1i gi\u00fap \u1ee9ng d\u1ee5ng web ng\u00e0y c\u00e0ng nhanh v\u00e0 m\u01b0\u1ee3t nh\u01b0 c\u00e1c \u1ee9ng d\u1ee5ng desktop. B\u00e0i vi\u1ebft n\u00e0y cung c\u1ea5p m\u1ecdi th\u1ee9\" \/>\n<meta property=\"og:url\" content=\"https:\/\/itviec.com\/blog\/ajax-la-gi\/\" \/>\n<meta property=\"og:site_name\" content=\"ITviec Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/ITviec\" \/>\n<meta property=\"article:published_time\" content=\"2023-06-13T05:29:52+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-10-10T15:34:35+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2023\/05\/Ajax.png\" \/>\n\t<meta property=\"og:image:width\" content=\"640\" \/>\n\t<meta property=\"og:image:height\" content=\"337\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Linh Khanh\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@ITviec\" \/>\n<meta name=\"twitter:site\" content=\"@ITviec\" \/>\n<meta name=\"twitter:label1\" content=\"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi\" \/>\n\t<meta name=\"twitter:data1\" content=\"Linh Khanh\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc\" \/>\n\t<meta name=\"twitter:data2\" content=\"28 ph\u00fat\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"AJAX l\u00e0 g\u00ec? T\u1ea5t t\u1ea7n t\u1eadt nh\u1eefng g\u00ec b\u1ea1n c\u1ea7n bi\u1ebft v\u1ec1 AJAX - ITviec Blog","description":"AJAX l\u00e0 g\u00ec? AJAX l\u00e0 k\u1ef9 thu\u1eadt l\u00e0m web hi\u1ec7n \u0111\u1ea1i m\u00e0 m\u1ecdi web developer \u0111\u1ec1u n\u00ean bi\u1ebft. \u0110\u1ecdc ngay \u0111\u1ec3 hi\u1ec3u c\u00e1ch ho\u1ea1t \u0111\u1ed9ng v\u00e0 th\u1ef1c h\u00e0nh AJAX d\u1ec5 d\u00e0ng.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/itviec.com\/blog\/ajax-la-gi\/","og_locale":"vi_VN","og_type":"article","og_title":"AJAX l\u00e0 g\u00ec? Quy tr\u00ecnh ho\u1ea1t \u0111\u1ed9ng v\u00e0 th\u1ef1c h\u00e0nh AJAX d\u1ec5 hi\u1ec3u cho Web Developer","og_description":"AJAX l\u00e0 g\u00ec? AJAX l\u00e0 m\u1ed9t k\u1ef9 thu\u1eadt ph\u00e1t tri\u1ec3n web hi\u1ec7n \u0111\u1ea1i gi\u00fap \u1ee9ng d\u1ee5ng web ng\u00e0y c\u00e0ng nhanh v\u00e0 m\u01b0\u1ee3t nh\u01b0 c\u00e1c \u1ee9ng d\u1ee5ng desktop. B\u00e0i vi\u1ebft n\u00e0y cung c\u1ea5p m\u1ecdi th\u1ee9","og_url":"https:\/\/itviec.com\/blog\/ajax-la-gi\/","og_site_name":"ITviec Blog","article_publisher":"https:\/\/www.facebook.com\/ITviec","article_published_time":"2023-06-13T05:29:52+00:00","article_modified_time":"2025-10-10T15:34:35+00:00","og_image":[{"width":640,"height":337,"url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2023\/05\/Ajax.png","type":"image\/png"}],"author":"Linh Khanh","twitter_card":"summary_large_image","twitter_creator":"@ITviec","twitter_site":"@ITviec","twitter_misc":{"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi":"Linh Khanh","\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc":"28 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/itviec.com\/blog\/ajax-la-gi\/#article","isPartOf":{"@id":"https:\/\/itviec.com\/blog\/ajax-la-gi\/"},"author":{"name":"Linh Khanh","@id":"https:\/\/itviec.com\/blog\/#\/schema\/person\/594512af658d9faba8a7c046a5d8589b"},"headline":"AJAX l\u00e0 g\u00ec? Quy tr\u00ecnh ho\u1ea1t \u0111\u1ed9ng v\u00e0 th\u1ef1c h\u00e0nh AJAX d\u1ec5 hi\u1ec3u cho Web Developer","datePublished":"2023-06-13T05:29:52+00:00","dateModified":"2025-10-10T15:34:35+00:00","mainEntityOfPage":{"@id":"https:\/\/itviec.com\/blog\/ajax-la-gi\/"},"wordCount":7576,"publisher":{"@id":"https:\/\/itviec.com\/blog\/#organization"},"image":{"@id":"https:\/\/itviec.com\/blog\/ajax-la-gi\/#primaryimage"},"thumbnailUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2023\/05\/Ajax.png","articleSection":["Chuy\u00ean m\u00f4n IT"],"inLanguage":"vi"},{"@type":"WebPage","@id":"https:\/\/itviec.com\/blog\/ajax-la-gi\/","url":"https:\/\/itviec.com\/blog\/ajax-la-gi\/","name":"AJAX l\u00e0 g\u00ec? T\u1ea5t t\u1ea7n t\u1eadt nh\u1eefng g\u00ec b\u1ea1n c\u1ea7n bi\u1ebft v\u1ec1 AJAX - ITviec Blog","isPartOf":{"@id":"https:\/\/itviec.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/itviec.com\/blog\/ajax-la-gi\/#primaryimage"},"image":{"@id":"https:\/\/itviec.com\/blog\/ajax-la-gi\/#primaryimage"},"thumbnailUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2023\/05\/Ajax.png","datePublished":"2023-06-13T05:29:52+00:00","dateModified":"2025-10-10T15:34:35+00:00","description":"AJAX l\u00e0 g\u00ec? AJAX l\u00e0 k\u1ef9 thu\u1eadt l\u00e0m web hi\u1ec7n \u0111\u1ea1i m\u00e0 m\u1ecdi web developer \u0111\u1ec1u n\u00ean bi\u1ebft. \u0110\u1ecdc ngay \u0111\u1ec3 hi\u1ec3u c\u00e1ch ho\u1ea1t \u0111\u1ed9ng v\u00e0 th\u1ef1c h\u00e0nh AJAX d\u1ec5 d\u00e0ng.","breadcrumb":{"@id":"https:\/\/itviec.com\/blog\/ajax-la-gi\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/itviec.com\/blog\/ajax-la-gi\/"]}]},{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/itviec.com\/blog\/ajax-la-gi\/#primaryimage","url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2023\/05\/Ajax.png","contentUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2023\/05\/Ajax.png","width":640,"height":337,"caption":"ajax-la-gi"},{"@type":"BreadcrumbList","@id":"https:\/\/itviec.com\/blog\/ajax-la-gi\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Chuy\u00ean m\u00f4n IT","item":"https:\/\/itviec.com\/blog\/chuyen-mon-it\/"},{"@type":"ListItem","position":2,"name":"AJAX l\u00e0 g\u00ec? Quy tr\u00ecnh ho\u1ea1t \u0111\u1ed9ng v\u00e0 th\u1ef1c h\u00e0nh AJAX d\u1ec5 hi\u1ec3u cho Web Developer"}]},{"@type":"WebSite","@id":"https:\/\/itviec.com\/blog\/#website","url":"https:\/\/itviec.com\/blog\/","name":"ITviec Blog","description":"IT Jobs &amp; People in Vietnam","publisher":{"@id":"https:\/\/itviec.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/itviec.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"vi"},{"@type":"Organization","@id":"https:\/\/itviec.com\/blog\/#organization","name":"ITviec","url":"https:\/\/itviec.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/itviec.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2018\/12\/itviec-black-square-facebook.png","contentUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2018\/12\/itviec-black-square-facebook.png","width":1800,"height":1800,"caption":"ITviec"},"image":{"@id":"https:\/\/itviec.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/ITviec","https:\/\/x.com\/ITviec","https:\/\/www.linkedin.com\/company\/itviec","https:\/\/www.youtube.com\/channel\/UCYthAQ3bcGr57M_ag5gHDvQ"]},{"@type":"Person","@id":"https:\/\/itviec.com\/blog\/#\/schema\/person\/594512af658d9faba8a7c046a5d8589b","name":"Linh Khanh","image":{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2022\/08\/IMG_2677-120x120.jpg","url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2022\/08\/IMG_2677-120x120.jpg","contentUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2022\/08\/IMG_2677-120x120.jpg","caption":"Linh Khanh"},"url":"https:\/\/itviec.com\/blog\/author\/linh-khanh\/"}]}},"_links":{"self":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts\/27227","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/users\/114"}],"replies":[{"embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/comments?post=27227"}],"version-history":[{"count":1,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts\/27227\/revisions"}],"predecessor-version":[{"id":92151,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts\/27227\/revisions\/92151"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/media\/27258"}],"wp:attachment":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/media?parent=27227"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/categories?post=27227"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/tags?post=27227"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}