Put your name in the form below and click to witness the magic of Ajax.

Client Side Code:
Note that the Ajax call is expecting the return data to be text. When it comes back, the function runs eval() on it, causing the returned text to be run as JavaScript.

$(document).ready(function(){
	
	$('#btn1').click(function(e) {
        
		e.preventDefault();
		
		$.ajax({
 		type: "POST",
  		url: "test1.php",
  		cache: false,
  		data: "inputName="+$("#inputName").val(),
  		dataType: "text",
  		success: function(text){
    		eval(text);
			$("#main p:first").append("
This is what came back from the server: "+text);
  }
});
		
    });



});

Server Side Code:
Note the header telling the browser this content is text. You can see the JavaScript code piece being built from the form input and static string contents. It is good practice to have the Content-type header matching the data type the Ajax call is told to expect in line 12 above.

<?php header("Content-type: text/plain"); echo "alert('".$_POST['inputName']."');"; ?>