Asynchronous JavaScript and XML (AJAX) is a format for better and faster response that is more user-friendly. AJAX can be used for interactive communication with a database. Ajax is for browser-based applications. Independent platform applications are used by Ajax. AJAX is used to transfer data between the browser and the web server. The following are methods that use Ajax.
beforeSend: When we send a request to the server then before that the beforeSend function will excute.
  1. <script type="text/javascript" language="javascript">
  3. $("#btn").live("click",function(){
  4. var fname = $("#fname").val();
  5. var lname = $("#lname").val();
  6. $.ajax({
  7. type:"POST",
  8. url:"demo.php",
  9. data:"fname="+fname+'&lname='+lname,
  10. beforeSend: function(data){
  11. alert("this test");
  12. }
  13. });
  14. });
  16. </script>
Complete: If the request successfully executed when the request finishes.
  1. <script type="text/javascript" language="javascript">
  3. $("#btn").live("click",function(){
  4. var fname = $("#fname").val();
  5. var lname = $("#lname").val();
  6. $.ajax({
  7. type:"POST",
  8. url:"demo.php",
  9. data:"fname="+fname+'&lname='+lname,
  10. complete:function(data){
  11. alert(data);
  12. }
  13. });
  14. });
  16. </script>
Data: Which data (string) value will be sent to the server.
  1. <script type="text/javascript" language="javascript">
  3. $("#btn").live("click",function(){
  4. var fname = $("#fname").val();
  5. var lname = $("#lname").val();
  6. $.ajax({
  7. type:"POST",
  8. url:"demo.php",
  9. data:"fname="+fname+'&lname='+lname,
  10. });
  11. });
  13. </script>
Success: When this function is executed if the request succeeds.
  1. <script type="text/javascript" language="javascript">
  3. $("#btn").live("click",function(){
  4. var fname = $("#fname").val();
  5. var lname = $("#lname").val();
  6. $.ajax({
  7. type:"POST",
  8. url:"demo.php",
  9. data:"fname="+fname+'&lname='+lname,
  10. success:function(data){
  11. alert(data);
  12. }
  13. });
  14. });
  16. </script>
type This is used to send data to a GET or POST method. The default value is GET.

POST method
  1. <script type="text/javascript" language="javascript">
  3. $("#btn").live("click",function(){
  4. var fname = $("#fname").val();
  5. var lname = $("#lname").val();
  6. $.ajax({
  7. type:"POST",
  8. url:"demo.php",
  9. data:"fname="+fname+'&lname='+lname,
  10. success:function(data){
  11. alert(data);
  12. }
  13. });
  14. });
  16. </script>
GET method
  1. <script type="text/javascript" language="javascript">
  3. $("#btn").live("click",function(){
  4. var fname = $("#fname").val();
  5. var lname = $("#lname").val();
  6. $.ajax({
  7. type:"GET",
  8. url:"demo.php",
  9. data:"fname="+fname+'&lname='+lname,
  10. success:function(data){
  11. alert(data);
  12. }
  13. });
  14. });
  16. </script>
url: Which the request is sent.
  1. <script type="text/javascript" language="javascript">
  3. $("#btn").live("click",function(){
  4. var fname = $("#fname").val();
  5. var lname = $("#lname").val();
  6. $.ajax({
  7. type:"POST",
  8. url:"demo.php",
  9. data:"fname="+fname+'&lname='+lname,
  10. success:function(data){
  11. alert(data);
  12. }
  13. });
  14. });
  16. </script>

Step 1: Create a two file index.php

/ajax code
  1. <script type="text/javascript" language="javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
  2. <script type="text/javascript" language="javascript">
  4. $("#btn").live("click",function(){
  7. var fname = $("#fname").val();
  8. var lname = $("#lname").val();
  10. $.ajax({
  12. type:"POST",
  13. url:"demo.php",
  14. data:"fname="+fname+'&lname='+lname,
  15. success:function(data){
  16. alert(data);
  18. }
  20. });
  22. });
  24. </script>
  26. First name: <input type="text" name="fname" id="fname"><br>
  27. Last name: <input type="text" name="lname" id="lname"><br>
  28. <input type="button" value="Submit" id="btn">
Step 2: Create a Demo.php file

ajax
  1. <?php
  3. echo $_POST["fname"]."---".$_POST["lname"];
  5. ?>
Output

program output