Advertisement
Guest User

Untitled

a guest
May 21st, 2019
94
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 3.23 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8">
  5.     <title>
  6.       Lines
  7.     </title>
  8.   </head>
  9.   <body>
  10.     <main>
  11.         <form method="get"
  12.              action="/submit">
  13.           <input type="text" name="lines" id="lines"></input>
  14.           <label>Perform a query to the web server</label>
  15.           <input type="button"
  16.                value="Using AJAX"
  17.                onclick="requestAJAXInterval()">
  18.         </form>
  19.         <canvas width="200" height="200" id="canvas"></canvas>
  20.     </main>
  21.   </body>
  22.  
  23.   <script>
  24.       const canvasElem = document.getElementById('canvas');
  25.       const ctx = canvasElem.getContext('2d');
  26.  
  27.       function requestAJAXInterval() {
  28.       let input = document.getElementById("lines");
  29.         for(let i=0; i<input.value; ++i) {
  30.          setTimeout(requestAJAX, 1000 * i);
  31.        }
  32.      }
  33.    /*****************************************************************/
  34.    /* Function that performs (asynchronous) query to the web server */
  35.    /*****************************************************************/
  36.    function requestAJAX() {
  37.      // Create an object representing the request to the web server - see https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest
  38.      var xhr = new XMLHttpRequest();
  39.  
  40.      // Registration of a (user) function that will process the response received from the server
  41.      xhr.onreadystatechange = () => response(xhr);
  42.  
  43.       // Execution of the (asynchronous) query to the web server
  44.       let input = document.getElementById("lines");
  45.       xhr.open('GET', '/submit?lines=' + input.value, true);
  46.       xhr.send(null);
  47.       // Examples of the use of the above methods - see https://www.w3schools.com/xml/ajax_xmlhttprequest_send.asp
  48.     }
  49.  
  50.     /************************************************************/
  51.     /* The function that processes the response from the server */
  52.     /************************************************************/
  53.     function response(xhr) {
  54.       try {
  55.         if (xhr.readyState == XMLHttpRequest.DONE) { // If the response is ready
  56.           if (xhr.status == 200) {                    // If requst was correct
  57.            
  58.             // If the data you receive is a plain text or a JSON document, use the following code
  59.             var received_data = xhr.responseText; // Get a response in the form of a string
  60.          
  61.             let arr = received_data.split(" ");
  62.             draw(arr[0], arr[1], arr[2], arr[3], arr[4], arr[5], arr[6]);
  63.  
  64.             // If the data you receive is an HTML or XML document, use the following code
  65.             //var xmlDoc = xhr.responseXML; //Receive the answer in the form of object 'XmlDocument', which can be accessed using DOM methods - see https://www.w3.org/TR/domcore/
  66.           }
  67.           else
  68.             window.alert('There was a problem with this request.');
  69.         }
  70.       }
  71.       catch (e) {
  72.         window.alert('Exception caught: ' + e.description);
  73.       }
  74.     }
  75.  
  76.     function draw(startX, startY, endX, endY, r, g, b) {
  77.       ctx.beginPath();
  78.       ctx.strokeStyle = "rgb(" + r + ", " + g + ", " + b + ")";
  79.       ctx.moveTo(startX, startY);
  80.       ctx.lineTo(endX, endY);
  81.       ctx.stroke();
  82.     }
  83.    
  84.     </script>
  85. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement