5.5 How to partially update - AJAX

• Can you explain how AJAX works?
• What technologies are used together with AJAX?

• How do you create an object in JavaScript?
• Which object is used for AJAX?
• How do you check if your browser supports AJAX?
• Trial 1: Let's check if your browser supports AJAX.
  <script> if (!???.???) alert('Your browser does not support AJAX.'); else alert('Your browser supports AJAX.'); </script> Submit

  
  
  
• Same-origin policy - What does "For security reasons, modern browsers do not allow access across domains." mean?

• Which method is used to open a channel to a server program?
• Which method is used to send a message to the server program?
• How to send GET data?
• How to send POST data?    xhttp.open("POST", url); xhttp.send("username=John&password=secretepassword");
• How to avoid using a cached data?    The post method
• When does 'readystatechange' event occur?
• How to know if there is a response message set from the server program?
• Trial 2: Let's to send a query information to TRUQA controller, using the GET method.
  <div id='tr2-result-pane'>Message here!</div> <script> var xhttp = ??? ???(); // create an AJAX object xhttp.??? = function() { // register an event handler for the onreadystatechange event if (this.??? == 4 && ???.??? == 200) { // check readyState and status alert(this.???); // text response $(???).???(???); // display the text response to the above <div> using jQuery } }; var controller = "//cs.tru.ca/~mlee/comp3540/Software/test_display_inputs.php"; var query="page=MainPage&command=PostQuestion&question=How big is the universe?"; xhttp.???(???, ???); // open the channel using the GET method xhttp.???(); // send the empty data for the query is attached at the end of URL </script> Submit

  
  
  
• Trial 3: Let's to send a query information to TRUQA controller, using the POST method.
  <div ???='tr3-result-pane'>Message here!</div> <script> var xhttp = ??? ???(); // create an AJAX object xhttp.??? = function() { // register an event handler for the onreadystatechange event if (????) { // check readyState and status alert(this.???); // text response ???(???).???(???); // display the text response to the above <div> using jQuery } }; var controller = "//cs.tru.ca/~mlee/comp3540/Software/test_display_inputs.php"; var query="page=MainPage&command=PostQuestion&question=How big is the universe?"; xhttp.???("???", ???); // open the channel to the controller using the post method //Send the proper header information along with the request xhttp.????("Content-type", "application/x-www-form-urlencoded"); // setRequestHeader() // send the query xhttp.???(???); </script> Submit

  
  
  
• For URL encoding, read HTML URL Encoding Reference.
• What if you try to retrieve data from another server?
  • Why is the same-origin policy important?

• When is this event triggered?
• What does the value 4 for readyState mean?
• What does the value 200 for status mean?
• What is a callback function?
• Read the last example carefully.
• List the two types of server response.
• How to use a text response?
• How to use an XML response?

• Read the first example carefully. 'Google Suggest' uses the same idea.
• Can you write your own 'TRU Suggest'? Do you think you will need to send only the new character or the whole string?
• Do you have to use only PHP for server-side programs?
• Do you have to use any special functions in PHP to respond to an AJAX request?
• $_REQUEST ???    = $_POST + $_GET + $_COOKIE
• strtolower(), strlen(), substr(), stristr(), strstr()

• Read the first example carefully.
• Trial 4: Let's to send the 'ListQuestions' command to TRUQA controller, using the POST method. After you complete the test, modify the code so that the GET method can be used.
  <button id='tr4-list-questions'>List Questions</button> <div ???='tr4-result-pane'>Message here!</div> <script> ????; // When the button is clicked, list_questions(). function tr4_list_questions() { var xhttp = ??? ???(); // create an AJAX object xhttp.??? = function() { // register an event handler for the onreadystatechange event if (this.??? == 4 && ???? == 200) { // check readyState and status ????(????); // display the text response to the above <div> using jQuery } }; var controller = "truqa_list_questions.php"; var query="page=MainPage&command=ListQuestions"; xhttp.???("???", controller); // open the channel to the controller using the post method //Send the proper header information along with the request xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); // send the query ???? } </script> Submit

  
  
  
• Can you write the table in the client, not the server-side? Then how to send data to the client from the server?

• Events on an XMLHttpRequest object - ..., 'load' and 'error'
• Trial 4.5 The same as Trial 4, except events. Let's use the load event.
  <button id='tr4-5-list-questions'>List Questions</button> <div id='tr4-5-result-pane'>Message here!</div> <script> ????; // When the button is clicked, list_questions(). function tr4_5_list_questions() { var xhttp = ??? ???(); // create an AJAX object xhttp.addEventListener(???, function() { // register an event handler for the load event ????(????); // display the text response to the above <div> }); var controller = "truqa_list_questions.php"; xhttp.???("???", controller); // open the channel to the controller using the post method //Send the proper header information along with the request xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); var query=????; // page=MainPage, and command=ListQuestions // send the query ???? } </script> Submit

  
  
  
• Can you write the table in the client, not the server-side? Then how to send data to the client from the server?

• Trial 5: Let's use .load() to display a table sent from TRUQA. (Note that the 'GET' method is assumed when there is no 2nd argument. When the 2nd argument, i.e., query data, is an object, the 'POST' method is used.)
  <button id='tr5-list-questions'>List Questions</button> <div ???='tr5-result-pane'>Message here!</div> <script> ????; // When the button is clicked, list_questions(). function tr5_list_questions() { var controller = "truqa_list_questions.php"; var query="page=MainPage&command=ListQuestions"; $(???).???(????); // jQuery load() } </script> Submit

  
  
  

• Trial 6: Let's use .post() to display a table sent from TRUQA. After you complete the test, modify the code so that the GET method can be used.
  <button type='button' id='tr6-list-questions'>List Questions</button> <div id='tr6-result-pane'>Message here!</div> <script> function tr6_query() { var controller = "truqa_list_questions.php"; ????(???, // jQuery post() to the above controller { ???: 'MainPage', command: 'ListQuestions' ???, // page and command in an object ???(data) { // a callback function ????; // display it into '#tr6-result-pane' } ); } ???? // when the above button is clicked, call the above function </script> Submit

  
  
  

• $.ajax({url:..., type:..., data:..., success: function(data) { ... }})
• Trial 6.5: Let's use .ajax() to display a table sent from TRUQA.
  <button type='button' id='tr6-5-list-questions'>List Questions</button> <div id='tr6-5-result-pane'>Message here!</div> <script> function tr6_5_query() { var controller = "truqa_list_questions.php"; ????({ ???: controller, // jQuery ajax() to the above controller ???: { ???: 'MainPage', command: 'ListQuestions' ???, // page and command in an object ????, // the method type ???: ???(data) { // a callback function ????; // display it into '#tr6-5-result-pane' } }); } ???? // when the above button is clicked, call the above function </script> Submit

  
  
  

var command = {
    page: 'MainPage',
    command: 'SearchQuestions',
    term: search_terms
};
$('#button-search-questions').click(function() {
    var search_terms = ...;
    $('#result-pane').load('controller.php', command);  // when the second arg is object, POST is used. Otherwise, GET is used.
});

$('#button-search-questions').click(function() {
    var search_terms = ...;
    $.post('controller.php',
        {
            ????
        },
        function(result) {
            ????
        }
    );
});

$('#button-search-questions').click(function() {
    var search_terms = ...;
    $.ajax({
        url: 'controller.php',
        type: 'POST',
        data: {
            ????
        },
        success: function(result) {
            ????
        }
    });
});

• FormData can be sent with $.ajax(). For example, $.ajax({..., data: new FormData(formDomObject), processData: false, ...});.
• Trial 7: Let's to send a form for the 'ListQuestions' command to TRUQA controller, using the jQuery ajax() method.
  <form id='tr7-list-questions'> <input type='text' name='page' value='MainPage'> <input type='text' name='command' value='ListQuestions'> <input type='submit' value='Submit'> </form> <div id='tr7-result-pane'>Message here!</div> <script> // When the above form is submitted, // get the response from the server, "truqa_list_questions.php", using the jQuiry ajax(), and // display it into the above div. // One thing to be careful. The button type of "Submit" is "submit". // You need to capture the "submit" event, and suppress the default action of submit button // so that the form is not submitted and your code submit the form using AJAX. // eventObj.preventDefault(); ???? </script> Submit