Category: ajax

Stream API – Basics ”; Previous Next Stream API allows developers to access the streams of data received over the network and process them bit-by-bit according to their needs with the help of JavaScript programming language. Where the streams are the sequence of data that we want to receive over the network in small chunks and then we process that small chunks in bit-by-bit. Before streaming, if we want to process a video, audio, or text file we need to download that complete file from the network and wait for it to be deserialized into a specified format and then process the complete downloaded file. After the introduction of streams, the whole working culture is changed now we can start processing data bit-by-bit as soon as the data is received on the client side using JavaScript without creating any extra buffer or blob. Using streams we can perform various tasks like can find the start and end of the stream or can chain streams together or can easily handle errors, can cancel the streams, and much more. Streaming is used to create real-world applications like video streaming applications like Netflix, Amazon Prime Videos, Zee5, Voot, YouTube, etc. So that users can easily watch movies, TV shows, etc. online without downloading them. Stream API provides various features like ReadableStream, Teeing, WritableStream, Pipe Chains, Backpressure, internal queue, and queueing strategies. Let”s discuss them one by one in detail. Readable Stream The readable stream allows you to read data/chunks from the source in JavaScript using the ReadableStream object. The chunks are small pieces of data that are going to be read by the reader sequentially. It can be of a single bit or can be of a large size like a typed array, etc. To read a readable stream API provide a reader. It reads chunks from the stream and then processes the data of the chunk. Only one reader can read a stream at a time, no other reader is allowed to read that stream. Writable Stream The writable stream allows you to write data in JavaScript using the Writable Stream object. The data is written by the writer to the stream. The writer writes data in the form of chunks(one chunk at a time). When the writer is created and starts writing to the stream for that time the stream is locked for that writer, and no other writer is allowed to access that stream and an inter queue is used to keep track of the chunks written by the writer. Teeing Teeing is a process in which a stream is split into two identical copies of the stream so that two separate readers can read the stream at the same time. We can achieve teeing with the help of the ReableStream.tee() method. This method returns an array that contains two identical copies of the specified stream and can be read by two readers. Pipe Chains Pipe Chain is a process in which multiple streams are connected together to create a data processing flow. In Stream API, we can pipe one stream into another with the help of a pipe chain structure. The starting point of the pipe chain is known as the original source and the last point of the pipe chain is known as the ultimate sink. To pipe streams we can use the following methods − ReadableStream.pipeThrough() − This method is used to pipe the current stream through a transform stream. Transform stream contains a pair of readable and writable streams. ReadableStream.pipeTo() − This method is used to pipe the current ReadableStream to the specified WritableStream and will return a promise which resolves when the piping process is successfully completed or rejected due to some error. Backpressure Backpressure is a special concept in Stream API. In this process, a single stream or pipe chain controls the speed of read/write. Suppose we have a stream, this stream is busy and does not able to take new chunks of data, so it sends a backward message through the chain to tell the transform stream to slow down the delivery of chunks so that we can save from bottleneck. We can use backpressure in the ReadableStream, so we need to find the chunk size required by the consumer with the help of the ReadableStreamDefaultContriller.desiredSize property. If the chunk size is very low, then the ReadableStream can indicate it”s an underlying source so stop sending more data and send backpressure along with the stream chain. When the consumer again wants the received data then we use the pull method to tell the underlying source to send data to the stream. Internal queues and queuing Strategies Internal queues are the queues that keep track of those chunks that have not been processed or finished. For example, in a readable stream, the internal queue keeps track of those chunks that are present on the enqueue but not read yet. Internal queues use a queueing strategy representing how the backpressure signal sends according to the internal queue state. Conclusion So these are the basic concept of Stream API. It is generally used in online streaming. When you watch a video online the browser or the application receives continuous streams of data chunks in the background and then they are processed by that browser or the application to display the video. Now in the next article, we will learn about the Readable stream of Stream API. Print Page Previous Next Advertisements ”;

AJAX – Quick Guide ”; Previous Next What is AJAX? AJAX stands for asynchronous Javascript and XML. AJAX is not a programming language or technology, but it is a combination of multiple web-related technologies like HTML, XHTML, CSS, JavaScript, DOM, XML, XSLT and XMLHttpRequest object. The AJAX model allows web developers to create web applications that are able to dynamically interact with the user. It will also be able to quickly make a background call to web servers to retrieve the required application data. Then update the small portion of the web page without refreshing the whole web page. AJAX applications are much more faster and responsive as compared to traditional web applications. It creates a great balance between the client and the server by allowing them to communicate in the background while the user is working in the foreground. In the AJAX applications, the exchange of data between a web browser and the server is asynchronous means AJAX applications submit requests to the web server without pausing the execution of the application and can also process the requested data whenever it is returned. For example, Facebook uses the AJAX model so whenever we like any post the count of the like button increase instead of refreshing the whole page. Working of AJAX Traditional web applications are created by adding loosely web pages through links in a predefined order. Where the user can move from one page to another page to interact with the different portions of the applications. Also, HTTP requests are used to submit the web server in response to the user action. After receiving the request the web server fulfills the request by returning a new webpage which, then displays on the web browser. This process includes lots of pages refreshing and waiting. AJAX change this whole working model by sharing the minimum amount of data between the web browser and server asynchronously. It speedup up the working of the web applications. It provides a desktop-like feel by passing the data on the web pages or by allowing the data to be displayed inside the existing web application. It will replace loosely integrated web pages with tightly integrated web pages. AJAX application uses the resources very well. It creates an additional layer known as AJAX engine in between the web application and web server due to which we can make background server calls using JavaScript and retrieve the required data, can update the requested portion of a web page without casing full reload of the page. It reduces the page refresh timing and provides a fast and responsive experience to the user. Asynchronous processes reduce the workload of the web server by dividing the work with the client computer. Due to the reduced workload web servers become more responsive and fast. AJAX Technologies The technologies that are used by AJAX are already implemented in all the Morden browsers. So the client does not require any extra module to run the AJAX application.The technologies used by AJAX are − Javascript − It is an important part of AJAX. It allows you to create client-side functionality. Or we can say that it is used to create AJAX applications. XML − It is used to exchange data between web server and client. The XMLHttpRequest − It is used to perform asynchronous data exchange between a web browser and a web server. HTML and CSS − It is used to provide markup and style to the webpage text. DOM − It is used to interact with and alter the webpage layout and content dynamically. Advantages of AJAX The following are the advantages of AJAX − It creates responsive and interactive web applications. It supports the development of patterns and frameworks that decrease the development time. It makes the best use of existing technology and feature instead of using some new technology. It makes an asynchronous call to the web server which means the client doesn”t have to wait for the data to arrive before starting rendering. Disadvantages of AJAX The following are the disadvantages of AJAX − AJAX is fully dependent on Javascript. So if anything happens with javascript in the browser AJAX will not support. The debugging of AJAX applications is difficult. Bookmarking of AJAX-enabled pages required pre-planning. If one request can fail then it can fail the load of the whole webpage. If JavaScript is disabled in your web browser then you are not able to run the AJAX webpage. Conclusion So to create dynamic web pages or applications AJAX is the best choice. It is faster and more responsive and provides asynchronous interaction between the client and server without refreshing the whole page. Now in the next article, we will see the history of AJAX. Ajax – History Before the introduction of AJAX, websites are developed by adding multiple loose web pages together, which are further displayed in a predefined order with the help of links embedded inside the HTML pages. So to use these web application user needs to move from one web page to another web page. So whenever the user clicks on a link to the next page he/she should wait for some seconds for a page to be loaded. Traditional web applications use HTTP requests to submit user action to the server. After receiving the request from the user the web server completes the request by returning a new web page which will further display on the web browser. Hence traditional web applications required lots of page refreshes and waiting. Due to this, it is very hard to develop new-generation applications like google maps, real-time chatting environment, Gmail, etc. So on 18 February 2005 for the first time, Jesse James Garrett introduce AJAX to the world by writing an AJAX article named “A New Approach to Web Application”. And on 5th April 2006, the W3C(world wide web consortium) release the first draft which contains the specifications for the XMLHttpRequest object. After that AJAX will be popular among web developers. The

Stream API – Readable Streams ”; Previous Next In Stream API, a readable stream is a data source from where we can read data in a sequential and asynchronous way. It is a standardized way to get data from the underlying sources. Underlying sources is the resource which present on the network. They are of following two types − Push source − In which the data is pushed to you when you access them. You can have control of the stream like when to start or when to pause or even when to terminate the current stream. For example, video game streaming. Pull source − In which you need to explicitly request the data from them. For example access files with the help of Fetch or XHR call. In a Readable Stream, the data is in the form of small chunks so it is read sequentially, one chunk at a time. A chunk can be a single byte or can be of a larger size. Hence the size of the chunks can be different in a stream. Now lets us understand how readable stream works. Working of Readable Stream The working of the Readable stream is quite straightforward. In a readable stream, the chunks of data are placed in enqueue. It means the chunks are waiting in the queue to read. Here we have another queue that is an internal queue which keeps track of unread chunks. The chunks are read by the reader. It processes the data of one chunk at a time and allows you to perform operations on the data. One reader can read only a single stream at a time. When the reader starts reading the stream at that time the stream is locked for that reader means no other reader is allowed to read that stream. If you want another reader to read that stream, then you have to terminate the first reader or can create a tee stream. Also, each reader has its own controller which allows you to control the stream such as start, close, or pause. It also has a consumer who is responsible for handling the received data from the readable stream and processing it and can able to perform operations on it. Readable Stream Interfaces Stream API supports three types of readable stream interfaces − ReableStream Interface ReableStreamDefaultReader Interface ReadableStreamDefaultController Interface ReadableStream Interface The ReadableStream Interface is used to represent a readable stream of data. It is generally used with Fetch API to handle the response stream. It can also handle the response stream of developer-defined streams. Constructor To create a readable stream object for the given handlers ReadableStream interface provides a ReadableStream() constructor. Syntax const newRead = new ReadableStream() Or const newRead = new ReadableStream(UnderlyingSource) Or const newRead = new ReadableStream(UnderlyingSource, QueuingStrategy) Following are the optional parameters of the ReadableStream() constructor − UnderlyingSource − This object provide various methods and properties that define the behaviour of the stream instance. The methods are: start(), pull(), and cancel() whereas the properties are: type and autoAllocateChunkSize. QueuingStrategy − This object is used to define the queuing strategy for the given streams. It takes two parameters: highWaterMark, and size(chunk). Instance Properties The properties provided by the ReadableStream interface are read-only properties. So the properties provided by ReadableStream are − Sr.No. Property & Description 1 ReadableStream.locked This property is used to check whether the readable stream is locked to a reader or not. Methods The following are the commonly used method of the ReadableStream interface − Sr.No. Method & Description 1 ReadableStream.cancel() This method returns a promise which will resolve when the stream is cancelled. 2 ReadableStream.getReader() This method is used to create a reader and locks the stream to it. No other reader is allowed until this reader is released. 3 ReadableStream.pipeThrough() This method is used to create a chainable way of piping the current stream through a transform stream. 4 ReadableStream.pipeTo() This method is used to pipe the current ReadableStream to the given WriteableStream. It will return a promise when the piping process completes successfully or reject due to some error. 5 ReadableStream.tee() This method is used to get a two-element array which includes two resulting branches as new ReadableStream objects. ReadableStreamDefaultReader Interface The ReadableStreamDefaultReader interface is used to represent a default reader which will read stream data from the network. It can also be read from ReadableStream. Constructor To create a readableStreamDefualtReader object ReadableStreamDefaultReader interface provides a ReadableStreamDefaultReader() constructor. Syntax const newRead = new ReadableStreamDefaultReader(myStream) This constructor contains only one parameter which is myStream. It will read ReadableStream. Instance Properties The properties provided by the ReadableStreamDefaultReader interface are read-only properties. So the properties provided by ReadableStreamDefaultReader are − Sr.No. Property & Description 1 ReadableStreamDefaultReader.closed This property returns a promise which will resolve when the stream is closed or rejected due to some error. It allows you to write a program which will respond at the end of the streaming process. Methods The following are the commonly used method of the ReadableStream interface − Sr.No. Method & Description 1 ReadableStreamDefaultReader.cancel() This method returns a promise which will resolve when the stream is cancelled. 2 ReadableStreamDefaultReader.read() This method returns a promise which will give access to the next chunk or piece in the stream”s queue. 3 ReadableStreamDefaultReader.releaseLock() This method is used to remove the lock of the reader on the stream.

Discuss AJAX ”; Previous Next AJAX is a web development technique for creating interactive web applications. If you know JavaScript, HTML, CSS, and XML, then you need to spend just one hour to start with AJAX. Print Page Previous Next Advertisements ”;

Stream API – Request Object ”; Previous Next The request object is used to fetch resources from the server. A request object is created by using Resquest() constructor provided by the Resquest interface. So when the new Request object is created we are allowed to pass a ReadableStream to the body of the Request object such types of requests are known as streaming requests. This request object is then passed to the fetch() function to fetch the resources. Syntax const myobject = new Request(URL, { method: ”POST”, body: Stream, headers: {”Content-Type”}, duplex: ”half”, }); Here the Request() constructor contains the following parameters − URL − Address of the resource. method − It represents the HTTP request method like GET, POST, etc. body − Contains the ReadableStream object. headers − Contains the suitable headers for the body. duplex − Set to half to make duplex stream. Example In the following program, we create a streaming request. So for that first we create a readable stream with the help of the ReadableStream() constructor along with the start() function which implements the ReadableStream logic and other operations. Then we create a request object using the Request() constructor along with the options: the method option contains the POST request to send the request, the body option contains the stream, the headers option contains the appropriate header, and the duplex option is set to half to make it a duplex stream. After creating a request object now we pass the object in the fetch() function to make a request and this function handles the response using then() and an error(if occurs) using the catch() function. Here in place of https://exampleApi.com/, you can use a valid API/URL which sends/receive data in the form of chunks. <script> // Create a readable stream using the ReadableStream constructor() const readStream = new ReadableStream({ start(controller) { // Here implement your ReadableStream // Also with the help of controller, you can enqueue data and // signal the end of the stream }, }); // Create a request objecct using Request() constructor const request = new Request(”https://exampleApi.com/”, { // Set the method method: ”POST”, // Passing the stream to the body of the request body: stream, // Setting suitable header headers: {”Content-Type”: ”application/octet-stream”}, duplex: ”half” }); // After creating a request object pass the object // to fetch() function make a request or perform operations fetch(request) .then(response => { // Handling the response }) .catch(error => { // Handling any errors if occur }); </script> Restrictions Streaming requests is a new feature so it has some restrictions and they are − Half duplex − To execute a streaming request we have to set the duplex option to half. If you do not set this option in your streaming request, then you will get an error. This option tells that the request body is a duplex stream, where the duplex stream is a stream which receives data(writeable) and sends data(readable) simultaneously. Required CORS and trigger a preflight − As we know that a streaming request contains a stream in the request body but does not have a “Content-Length” header. So for such type of request, CORS is required and they always trigger a preflight. Also, no-cors streaming requests are not allowed. Does not work on HTTP/1.x − If the connection is HTTP/1.x, then based on the HTTP/1.x rules it will reject fetch. According to the HTTP/1.x rules, the request and response bodies should need to send a Content-Length headers. So that the other party can keep a record of how much data is received or can change the format to use chunked encoding. Chunked encoding is common but for the requests, it is very rare. Server-side incompatibility − Some servers do not support streaming requests. So always use only those servers that support streaming requests like NodeJS, etc. Conclusion So this is how we can create a Request object for streams or we can say that this is how we can create a streaming request using the fetch() function. Streaming requests are useful for sending large files, real-time data processing, media streaming, continuous data feeds, etc. Now in the next article, we will learn about the response body in Stream API. Print Page Previous Next Advertisements ”;

Fetch API – Uploading Files ”; Previous Next Fetch API provides a flexible way to create an HTTP request which will upload files to the server. We can use the fetch() function along with the FormData object to send single or multiple files in the request. Let us discuss this concept with the help of the following examples − Example − Uploading a Single File In the following program, we upload one file at a time using fetch API. Here we use the FormData object to store the file and then send it using the fetch() function to the given URL including the POST request method and the FormData object. After sending the request to the server now we use the then() function to handle the response. If we encounter an error, then that error is handled by the catch() function. <!DOCTYPE html> <html> <body> <!– Creating a form to upload a file–> <form id = “myForm”> <input type=”file” id=”file”><br><br> <button type=”submit”>Upload File</button> </form> <script> document.getElementById(”myForm”).addEventListener(”submit”, function(x){ // Prevent from page refreshing x.preventDefault(); // Select the file from the system // Here we are going to upload one file at a time const myFile = document.getElementById(”file”).files[0]; // Create a FormData to store the file const myData = new FormData(); // Add file in the FormData myData.append(“newFiles”, myFile); // Send the file to the given URL fetch(“https://httpbin.org/post”, { // POST request with Fetch API method: “POST”, // Adding FormData to the request body: myData }) // Converting the response in JSON // using response.json() function .then(response => response.json()) .then(finalData => { // Handling the response console.log(“File has been uploaded successfully”); }) .catch(err=>{ // Handling the error console.log(“Error Found:”, err) }); }) </script> </body> </html> Output Example − Uploading Multiple Files for Single Input In the following program, we will upload multiple files from the single input using fetch API. Here we add a “multiple” property in the <input> tag to add multiple files. Then we use the FormData object to store multiple files and then send them using the fetch() function to the given URL including the POST request method and the FormData object. After sending the request to the server now we use the then() function to handle the response. If we encounter an error, then that error is handled by the catch() function. <!DOCTYPE html> <html> <body> <!– Creating a form to upload a file–> <h2> Uploading Multiple files</h2> <form id = “myForm”> <p>Maximum number of files should be 2</p> <input type=”file” id=”file” multiple><br><br> <button type=”submit”>Upload File</button> </form> <script> document.getElementById(”myForm”).addEventListener(”submit”, function(x){ // Prevent from page refreshing x.preventDefault(); // Select the file from the system // Here we are going to upload multiple files at a time const myFile = document.getElementById(”file”).files[0]; // Create a FormData to store the file const myData = new FormData(); // Add file in the FormData myData.append(“newFiles”, myFile); // Send the file to the given URL fetch(“https://httpbin.org/post”, { // POST request with Fetch API method: “POST”, // Adding FormData to the request body: myData }) // Converting the response in JSON // using response.json() function .then(response => response.json()) .then(finalData => { // Handling the response console.log(“Files has been uploaded successfully”); }) .catch(err=>{ // Handling the error console.log(“Error Found:”, err) }); }) </script> </body> </html> Output Example − Uploading Multiple Files In the following program, we will upload multiple files using fetch API. Here we select two files from the system in DOM with the attribute of file type. Then we add the input files in an array. Then we create a FormData object and append the input files to the object. Then we send them using the fetch() function to the given URL including the POST request method and the FormData object. After sending the request to the server now we use the then() function to handle the response. If we encounter an error, then that error is handled by the catch() function. <!DOCTYPE html> <html> <body> <!– Creating a form to upload multiple files–> <h2> Uploading Multiple files</h2> <input type=”file”> <input type=”file”> <button>Submit</button> <script> const myButton = document.querySelector(”button”); myButton.addEventListener(”click”, () => { // Get all the input files in DOM with attribute type “file”: const inputFiles = document.querySelectorAll(”input[type=”file”]”); // Add input files in the array const myfiles = []; inputFiles.forEach((inputFiles) => myfiles.push(inputFiles.files[0])); // Creating a FormData const myformdata = new FormData(); // Append files in the FormData object for (const [index, file] of myfiles.entries()){ // It contained reference name, file, set file name myformdata.append(`file${index}`, file, file.name); } // Upload the FormData object fetch(”https://httpbin.org/post”, { method: “POST”, body: myformdata, }) // Handle the response .then(response => response.json()) .then(response => console.log(response)) // Handle the error .catch(err => console.log(“Error Found:”, err)) }) </script> </body> </html> Output Conclusion So this is how we can upload files to the given URL with the help of fetch() API. Here we can upload any type of file like jpg, pdf, word, etc and upload any number of files like one file at a time or multiple files at a time. Now in the next article, we will learn how the Fetch API handles responses. Print Page Previous Next Advertisements ”;

Fetch API – Credentials ”; Previous Next In Fetch API the cookies, authorization headers and TLS client certificates are known as the credentials. We can also say as credentials are the digital documents(like passwords, usernames, certificates, etc) that confirm the identity of the user or client while making a request to the server. Let”s understand these credentials in more detail below − Cookies − They are the small chunks of data stored by the web browser and sent with all the same origin requests. It is used to store session information, frequently used data, etc. They also control their session, scope and accessibility. Cookies are also sent by the server with the help of the Set-Cookie header. Authorization Headers − These include those HTTP headers that contain authentication information like password, username, key, etc. Authorization headers are used to implement various authentication schemas and are also validated by the server using various methods like hashing, encryption, etc. TLS Client Certificates − They are digital certificates that are provided by certified authorities and also installed on the client”s device. They are used to provide identity proof of the client while creating a secure connection with the server with the help of Transport layer security. Credentials Property The credentials property controls whether the cookies and other credential certificates will be sent in the cross-origin request or not. It is an optional property in the fetch() function. Syntax fetch(resourceURL, {credentials:”include”}) This property can have one value out of the following three values − omit − When the value of the credentials property is set to omit that means the browser will remove all the credentials from the request and also ignore the credentials sent in the response. same-origin − When the value of the credentials property is set to same-origin that means the browser will include credentials in those requests that are made to the same origin as the requesting page. And use only those credentials that are from the same origin URLs. It is the default value of this property. include − When the value of the credentials property is set to include that means the browser will include credentials in both same-origin and cross-origin requests and always use those credentials that are sent in the response. Example 1 In the following program, we use the fetch() function to make a request to the given URL. Here we set the credentials property to “include” value which represents both the cross-origin and same-origin credentials included in the request. After sending the request to the server now we use the then() function to handle the response. If we encounter an error, then that error is handled by the catch() function. <!DOCTYPE html> <html> <body> <script> // Retrieving data from the URL using a GET request fetch(“https://jsonplaceholder.typicode.com/todos/21”, { // Sending both same-origin and // cross-origin credentials credentials: “include” }) // Converting received data into text .then(response => response.text()) .then(myData => { // Display the retrieve Data console.log(myData); }) .catch(err=>{ // Cach error if occur console.log(“Found Error:”, err) }); </script> <h2>Fetch API Example</h2> </body> </html> Output Example 2 In the following program, we use the fetch() function to make a request to the given URL. Here we set the credentials property to the “same-oigin” value which means the credentials are only included in those requests that are made to the same origin or domain. After sending the request to the server now we use the then() function to handle the response. If we encounter an error, then that error is handled by the catch() function. <!DOCTYPE html> <html> <body> <script> // Retrieving data from the URL using a GET request fetch(“https://jsonplaceholder.typicode.com/todos/21”, { // Sending credentials only for the same domain request credentials: “same-origin” }) // Converting received data into text .then(response => response.text()) .then(myData => { // Display the retrieve Data console.log(myData); }) .catch(err=>{ // Cach error if occur console.log(“Found Error:”, err) }); </script> <h2>Fetch API Example</h2> </body> </html> Output Conclusion Hence using credentials we can control how the credentials are sent in the request or how to handle the credentials sent back in the response. The credentials property only affects cross-origin requests and for the same-origin request, the browser will automatically add credentials to the request. Now in the next article, we will learn how to send a GET request in Fetch API. Print Page Previous Next Advertisements ”;

AJAX – Database Operations ”; Previous Next To clearly illustrate how easy it is to access information from a database using AJAX, we are going to build MySQL queries on the fly and display the results on “ajax.html”. But before we proceed, let us do the ground work. Create a table using the following command. NOTE − We are assuming you have sufficient privilege to perform the following MySQL operations. CREATE TABLE ”ajax_example” ( ”name” varchar(50) NOT NULL, ”age” int(11) NOT NULL, ”sex” varchar(1) NOT NULL, ”wpm” int(11) NOT NULL, PRIMARY KEY (”name”) ) Now dump the following data into this table using the following SQL statements − INSERT INTO ”ajax_example” VALUES (”Jerry”, 120, ”m”, 20); INSERT INTO ”ajax_example” VALUES (”Regis”, 75, ”m”, 44); INSERT INTO ”ajax_example” VALUES (”Frank”, 45, ”m”, 87); INSERT INTO ”ajax_example” VALUES (”Jill”, 22, ”f”, 72); INSERT INTO ”ajax_example” VALUES (”Tracy”, 27, ”f”, 0); INSERT INTO ”ajax_example” VALUES (”Julie”, 35, ”f”, 90); Client Side HTML File Now let us have our client side HTML file, which is ajax.html, and it will have the following code − Example <html> <body> <script language = “javascript” type = “text/javascript”> <!– //Browser Support Code function ajaxFunction() { var ajaxRequest; // The variable that makes Ajax possible! try { // Opera 8.0+, Firefox, Safari ajaxRequest = new XMLHttpRequest(); } catch (e) { // Internet Explorer Browsers try { ajaxRequest = new ActiveXObject(“Msxml2.XMLHTTP”); } catch (e) { try { ajaxRequest = new ActiveXObject(“Microsoft.XMLHTTP”); } catch (e) { // Something went wrong alert(“Your browser broke!”); return false; } } } // Create a function that will receive data // sent from the server and will update // div section in the same page. ajaxRequest.onreadystatechange = function() { if(ajaxRequest.readyState == 4) { var ajaxDisplay = document.getElementById(”ajaxDiv”); ajaxDisplay.innerHTML = ajaxRequest.responseText; } } // Now get the value from user and pass it to // server script. var age = document.getElementById(”age”).value; var wpm = document.getElementById(”wpm”).value; var sex = document.getElementById(”sex”).value; var queryString = “?age = ” + age ; queryString += “&wpm = ” + wpm + “&sex = ” + sex; ajaxRequest.open(“GET”, “ajax-example.php” + queryString, true); ajaxRequest.send(null); } //–> </script> <form name = ”myForm”> Max Age: <input type = ”text” id = ”age” /> <br /> Max WPM: <input type = ”text” id = ”wpm” /> <br /> Sex: <select id = ”sex”> <option value = “m”>m</option> <option value = “f”>f</option> </select> <input type = ”button” onclick = ”ajaxFunction()” value = ”Query MySQL”/> </form> <div id = ”ajaxDiv”>Your result will display here</div> </body> </html> NOTE − The way of passing variables in the Query is according to HTTP standard and have formA. URL?variable1 = value1;&variable2 = value2; The above code will give you a screen as given below − Output Your result will display here in this section after you have made your entry. NOTE − This is a dummy screen. Server Side PHP File Your client-side script is ready. Now, we have to write our server-side script, which will fetch age, wpm, and sex from the database and will send it back to the client. Put the following code into the file “ajax-example.php”. <?php $dbhost = “localhost”; $dbuser = “dbusername”; $dbpass = “dbpassword”; $dbname = “dbname”; //Connect to MySQL Server mysql_connect($dbhost, $dbuser, $dbpass); //Select Database mysql_select_db($dbname) or die(mysql_error()); // Retrieve data from Query String $age = $_GET[”age”]; $sex = $_GET[”sex”]; $wpm = $_GET[”wpm”]; // Escape User Input to help prevent SQL Injection $age = mysql_real_escape_string($age); $sex = mysql_real_escape_string($sex); $wpm = mysql_real_escape_string($wpm); //build query $query = “SELECT * FROM ajax_example WHERE sex = ”$sex””; if(is_numeric($age)) $query .= ” AND age <= $age”; if(is_numeric($wpm)) $query .= ” AND wpm <= $wpm”; //Execute query $qry_result = mysql_query($query) or die(mysql_error()); //Build Result String $display_string = “<table>”; $display_string .= “<tr>”; $display_string .= “<th>Name</th>”; $display_string .= “<th>Age</th>”; $display_string .= “<th>Sex</th>”; $display_string .= “<th>WPM</th>”; $display_string .= “</tr>”; // Insert a new row in the table for each person returned while($row = mysql_fetch_array($qry_result)) { $display_string .= “<tr>”; $display_string .= “<td>$row[name]</td>”; $display_string .= “<td>$row[age]</td>”; $display_string .= “<td>$row[sex]</td>”; $display_string .= “<td>$row[wpm]</td>”; $display_string .= “</tr>”; } echo “Query: ” . $query . “<br />”; $display_string .= “</table>”; echo $display_string; ?> Now try by entering a valid value (e.g., 120) in Max Age or any other box and then click Query MySQL button. Your result will display here in this section after you have made your entry. If you have successfully completed this lesson, then you know how to use MySQL, PHP, HTML, and Javascript in tandem to write AJAX applications. Print Page Previous Next Advertisements ”;

AJAX – Examples ”; Previous Next Here is a list of some famous web applications that make use of AJAX. Google Maps A user can drag an entire map by using the mouse, rather than clicking on a button. https://maps.google.com/ Google Suggest As you type, Google offers suggestions. Use the arrow keys to navigate the results. https://www.google.com/webhp?complete=1&hl=en Gmail Gmail is a webmail built on the idea that emails can be more intuitive, efficient, and useful. https://gmail.com/ Yahoo Maps (new) Now it”s even easier and more fun to get where you”re going! https://maps.yahoo.com/ Difference between AJAX and Conventional CGI Program Try these two examples one by one and you will feel the difference. While trying AJAX example, there is no discontinuity and you get the response very quickly, but when you try the standard GCI example, you would have to wait for the response and your page also gets refreshed. AJAX Example * = Standard Example * = NOTE − We have given a more complex example in AJAX Database. Print Page Previous Next Advertisements ”;

Fetch API – Send PUT Requests ”; Previous Next In the Fetch API, a PUT request is used to update or replace the existing resource or data present on the server. Using the PUT request generally contains the data which you want to update in the body of the request. When the request is received by the server, the server uses that data to update the existing resource present in the given URL. If the server does not contain the resource then it creates a new resource using the given data. Syntax fetch(URL, { method: “PUT”, body: {//JSON Data}, headers:{“content-type”: “application/json; charset=UTF-8”}}) .then(info =>{ // Code }) .catch(error =>{ // catch error }); Here the fetch() function contains the following parameters − URL − It represents the resource which we want to fetch. method − It is an optional parameter. It is used to represent the request like, GET, POST, DELETE, and PUT. body − It is also an optional parameter. You can use this parameter when you want to add a body to your request. headers − It is also an optional parameter. It is used to specify the header. Example 1: Sending PUT Request Using fetch() In the following program, we create a simple script to update existing data in the given URL using the PUT request using the fetch() function. Here we send a JSON document in the given URL along with the header. So after receiving the response, check the status of the response. If the response status is 200, then that means the data is updated successfully. If an error occurred, then the catch function handles that error. <!DOCTYPE html> <html> <head> <title>Fetch API Example</title> </head> <body> <h1>Example of Fetch API</h1> <script> // Update data in the URL using the PUT request fetch(“https://jsonplaceholder.typicode.com/todos/21”, { // Using PUT request method: “PUT”, // Body contains replacement data body: JSON.stringify({ id: 22, title: “Hello! Mohina what are you doing?”, }), // Setting headers headers:{“Content-type”: “application/json; charset=UTF-8”} }) .then(response => { // Handle response if (response.status == 200){ console.log(“Data updated successfully”) } else { throw new error(“Error Found:”, response.status) } }) // Handle error .catch(err=>{ console.error(err) }); </script> </body> </html> Output Example 2: Sending PUT Request Using fetch() with async/await In the following program, we create a script to update existing data in the given URL using the PUT request with the fetch() function and async/await. Here we send a JSON document in the given URL along with the header. So we create an async function named modifyData(). Here we use await keyword with the fetch() function to pause the execution of the function until the returned promise is resolved. After receiving the response, check the status of the response if the response status is 200, then that means the data is updated successfully. If an error occurred, then the catch function handles that error. Note − Here async/ await is used together to handle asynchronous operations in a synchronous way. <!DOCTYPE html> <html> <head> <title>Fetch API Example</title> </head> <body> <h1>Example of Fetch API</h1> <script> async function modifyData(){ try{ const myRes = await fetch(“https://jsonplaceholder.typicode.com/todos/21”, { // Using PUT request method: “PUT”, // Body contains replacement data body: JSON.stringify({ id: 24, title: “Mina leaves in Delhi”, }) }); // Handling response if (myRes.status == 200){ console.log(“Data updated successfully”) } else { throw new error(“Error Found:”, myRess.status) } } catch(err){ console.error(err) } } // Calling the function modifyData(); </script> </body> </html> Output Conclusion So this is how we can use PUT requests to update the existing data in the given resource. Using this you can also add extra properties to the request with the help of the parameters provided by the fetch() function. Now in the next chapter, we will see how we will send JSON data. Print Page Previous Next Advertisements ”;