\n \n<\/p>\n
\r\n\r\n<script>\r\n\/\/Setup to make an HTTP POST Ajax request\r\nAjaxRequest1Parameters = "request_type=get_xml_values";\t\t\t\/\/<<<<<SET PARAMETER TO POST (id1=val1&id2=val2 for multiple parameters)\r\nAjaxRequest1 = new ajaxRequest();\r\nAjaxRequest1.open("POST", "ajax.php", true);\t\t\t\t\t\t\t\t\t\t\/\/<<<<<SET THE FILE TO POST THE REQUEST TO\r\nAjaxRequest1.setRequestHeader("Content-type", "application\/x-www-form-urlencoded; charset=UTF-8");\r\nAjaxRequest1.setRequestHeader("Content-length", AjaxRequest1Parameters.length);\r\nAjaxRequest1.setRequestHeader("Connection", "close");\r\nAjaxRequest1.onreadystatechange = function()\r\n{\r\n\t\/\/-----------------------------------------------\r\n\t\/\/----- RESPONSE RECEIVED FROM AJAX REQUEST -----\r\n\t\/\/-----------------------------------------------\r\n\tif (this.readyState == 4)\t\t\t\t\/\/4=Completed Ajax request\r\n\t{\r\n\t\tif (this.status == 200)\t\t\t\t\/\/200=Call succeeded\r\n\t\t{\r\n\t\t\tif (this.responseXML != null)\t\/\/Check we got some response data (this.responseText or this.responseXML)\r\n\t\t\t{\r\n\t\t\t\t\/\/----- PROCESS THE RESPONSE -----\r\n\t\t\t\tvar xmlDoc = AjaxRequest1.responseXML.documentElement;\r\n\t\t\t\tdocument.getElementById("ajax_area1").innerHTML = xmlDoc.getElementsByTagName("ajax_area1")[0].childNodes[0].nodeValue;\r\n\t\t\t\tdocument.getElementById("ajax_area2").innerHTML = xmlDoc.getElementsByTagName("ajax_area2")[0].childNodes[0].nodeValue;\r\n\t\t\t}\r\n\t\t\telse\r\n\t\t\t{\r\n\t\t\t\talert("Ajax error: No data received");\r\n\t\t\t}\r\n\t\t}\r\n\t\telse\r\n\t\t{\r\n\t\t\talert( "Ajax error: " + this.statusText);\r\n\t\t}\r\n\t}\r\n}\r\n\r\n\/\/SEND THE AJAX REQUEST\r\nAjaxRequest1.send(AjaxRequest1Parameters);\t\t\t\/\/Use (null) if there are no parameters to send\r\n\r\n<\/script>\r\n\r\n<div id='ajax_area1'>THIS WILL BE REPLACED<\/div><br \/>\r\n<div id='ajax_area2'>THIS WILL ALSO BE REPLACED<\/div><br \/>\r\n<\/code><\/pre>\n\n \n<\/p>\n
\nThe PHP File
\n<\/h5>\n\r\n\r\n<?php\r\nheader('Content-Type: text\/xml');\t\t\t\t\t\t\t\t\t\t\t\/\/Include these headers at the very start - they are essential to stop some browsers caching the ajax response\r\nheader("Cache-Control: no-cache, must-revalidate");\r\nheader("Expires: Mon, 26 Jul 1997 05:00:00 GMT");\t\t\t\/\/A date in the past\r\n\r\n\r\nif (isset($_POST['request_type']))\r\n{\r\n\tif ($_POST['request_type'] == "get_xml_values")\r\n\t{\r\n\t\t\/\/-----------------------------------------\r\n\t\t\/\/----- AJAX REQUEST - GET XML VALUES -----\r\n\t\t\/\/-----------------------------------------\r\n\t\t\/\/echo "<img src=\\"images\/slider_led_red.png\\" width=\\"22\\" height=\\"8\\">";\r\n\t\t\/\/echo "WITH THIS!";\r\n\t\t\r\n\t\techo "<?xml version='1.0' encoding='ISO-8859-1'?>";\r\n\t\techo "<group>";\r\n\t\techo "\t<ajax_area1>WITH THIS<\/ajax_area1> ";\r\n\t\techo "\t<ajax_area2>AND THIS<\/ajax_area2> ";\r\n\t\techo "<\/group>";\r\n\t}\r\n}\r\n\r\n?>\r\n<\/code><\/pre>\n\nNote <\/strong><\/em>– you can't just use "AjaxRequest1.send(AjaxRequest1Parameters);" again after first setting it up, but you can put the whole thing (including the onreadystatechange function) inside a function and call it whenever you want to send the same ajax request.<\/p>\n","protected":false},"excerpt":{"rendered":" A Working AJAX Request The HTML \/ Javascript <script> \/\/Setup to make an HTTP POST Ajax request AjaxRequest1Parameters = "request_type=get_xml_values"; \/\/<<<<<SET PARAMETER TO POST (id1=val1&id2=val2 for multiple parameters) AjaxRequest1 = new ajaxRequest(); AjaxRequest1.open("POST", "ajax.php", true); \/\/<<<<<SET THE FILE TO POST THE REQUEST TO AjaxRequest1.setRequestHeader("Content-type", "application\/x-www-form-urlencoded; charset=UTF-8"); AjaxRequest1.setRequestHeader("Content-length", AjaxRequest1Parameters.length); AjaxRequest1.setRequestHeader("Connection", "close"); AjaxRequest1.onreadystatechange = function() { \/\/———————————————– […]<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[100],"tags":[],"class_list":["post-966","post","type-post","status-publish","format-standard","hentry","category-ajax-javascript"],"_links":{"self":[{"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/posts\/966","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/comments?post=966"}],"version-history":[{"count":13,"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/posts\/966\/revisions"}],"predecessor-version":[{"id":1344,"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/posts\/966\/revisions\/1344"}],"wp:attachment":[{"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/media?parent=966"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/categories?post=966"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/tags?post=966"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}