\n \n<\/p>\n
\r\n\r\n<!DOCTYPE html> \r\n<html>\r\n<head>\r\n<meta charset="utf-8">\r\n\r\n<script>\r\n\/\/***********************************\r\n\/\/***********************************\r\n\/\/********** AJAX HANDLERS **********\r\n\/\/***********************************\r\n\/\/***********************************\r\n\r\n\/\/<div id='ajax_area1'>THIS WILL BE REPLACED<\/div>\r\n\r\n\/\/Setup to make an HTTP POST Ajax request\r\nAjaxRequest1Parameters = "request_type=get_image_to_show";\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.responseText != 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\tdocument.getElementById('ajax_area1').innerHTML = this.responseText\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\r\n\/\/************************************************\r\n\/\/************************************************\r\n\/\/********** CREATE AJAX REQUEST OBJECT **********\r\n\/\/************************************************\r\n\/\/************************************************\r\nfunction ajaxRequest()\r\n{\r\n\t\/\/Cross browser - deal with IE varients\r\n\ttry\r\n\t{\r\n\t\t\/\/Non IE Browser\r\n\t\tvar request = new XMLHttpRequest();\r\n\t}\r\n\tcatch(e1)\r\n\t{\r\n\t\ttry\r\n\t\t{\r\n\t\t\t\/\/IE6?\r\n\t\t\trequest = new ActiveXObject("Msxml2.XMLHTTP");\r\n\t\t}\r\n\t\tcatch(e2)\r\n\t\t{\r\n\t\t\ttry\r\n\t\t\t{\r\n\t\t\t\t\/\/IE5?\r\n\t\t\t\trequest = new ActiveXObject("Microsoft.XMLHTTP");\r\n\t\t\t}\r\n\t\t\tcatch(e3)\r\n\t\t\t{\r\n\t\t\t\t\/\/There is no Ajax support in this browser\r\n\t\t\t\trequest = false;\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\treturn request;\r\n}\r\n<\/script>\r\n\r\n\r\n<\/head> \r\n<body> \r\n<div id='ajax_area1'>THIS WILL BE REPLACED<\/div>\r\n<\/body>\r\n<\/html>\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\nif (isset($_POST['request_type']))\r\n{\r\n\tif ($_POST['request_type'] == "get_image_to_show")\r\n\t{\r\n\t\t\/\/--------------------------------------------\r\n\t\t\/\/----- AJAX REQUEST - GET IMAGE TO SHOW -----\r\n\t\t\/\/--------------------------------------------\r\n\t\techo "WITH THIS!";\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.\n<\/p>\n\n <\/p>\n","protected":false},"excerpt":{"rendered":"
A Working AJAX Request The HTML \/ Javascript <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script> \/\/*********************************** \/\/*********************************** \/\/********** AJAX HANDLERS ********** \/\/*********************************** \/\/*********************************** \/\/<div id='ajax_area1'>THIS WILL BE REPLACED<\/div> \/\/Setup to make an HTTP POST Ajax request AjaxRequest1Parameters = "request_type=get_image_to_show"; \/\/<<<<<SET PARAMETER TO POST (id1=val1&id2=val2 for multiple parameters) AjaxRequest1 = new ajaxRequest(); AjaxRequest1.open("POST", "ajax.php", true); \/\/<<<<<SET […]<\/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-953","post","type-post","status-publish","format-standard","hentry","category-ajax-javascript"],"_links":{"self":[{"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/posts\/953","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=953"}],"version-history":[{"count":11,"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/posts\/953\/revisions"}],"predecessor-version":[{"id":1348,"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/posts\/953\/revisions\/1348"}],"wp:attachment":[{"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/media?parent=953"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/categories?post=953"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/tags?post=953"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}