AJAX and PHP

Client-Side Techniques with Smarter JavaScriptWhat Just Happened?The code is pretty simple. In the HTML code, the important details are highlighted in thefollowing code snippet:AJAX Foundations: More JavaScript and DOMHello Dude! Here's a cool list of colors for you:Everything starts by referencing the JavaScript source file using the element. TheJavaScript file contains a function called process(), which is used as an event-handler functionfor the body's onload event. The onload event fires after the HTML file is fully loaded, so whenthe process() function executes, it has access to the whole HTML structure. Your process()function starts by creating the HTML code you want to add to the div element:function process(){// Create the HTML codevar string;string = ""+ "Black"+ "Orange"+ "Pink"+ "";Next, you obtain a reference to myDivElement, using the getElementById function of thedocument object. Remember that document is a default object in JavaScript, referencing the bodyof your HTML document.// obtain a reference to the element on the pagemyDiv = document.getElementById("myDivElement");Note that JavaScript allows you to use either single quotes or double quotes for stringvariables. The previous line of code can be successfully written like this:myDiv = document.getElementById('myDivElement');In the case of JavaScript, both choices are equally good, as long as you are consistentabout using only one of them. If you use both notations in the same script you risk endingup with parse errors. In this book, we will use double quotes in JavaScript programs.Finally, you populate myDivElement by adding the HTML code you built in the string variable:36}// add content to the elementmyDiv.innerHTML = string;In this example, you have used the innerHTML property of the DOM to add the composed HTMLto your document.