Scribd
Upload
16 views

ajax1

Uploaded by

3q8ax
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
16 views

ajax1

Uploaded by

3q8ax
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

Basic Example Using fetch:

html
Copier le code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AJAX Example with Fetch</title>
</head>
<body>
<h1>AJAX Example with Fetch</h1>
<button id="loadData">Load Data</button>
<div id="result"></div>

<script>
// Set up the button click event
document.getElementById("loadData").addEventListener("click", function() {
// Use the Fetch API to get data
fetch('data.txt')
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.text();
})
.then(data => {
document.getElementById("result").innerHTML = data;
})
.catch(error => {
document.getElementById("result").innerHTML = "Error: " +
error.message;
});
});
</script>
</body>
</html>
Explanation:

The fetch function is used to send a request to data.txt.


The .then() method is used to handle the response. If successful, the text content
from data.txt is displayed in the div with ID result.
If there's an error (like a network issue), the .catch() method catches it and
displays the error message.
3. Sending Data with AJAX (POST Request)
Sometimes, you may want to send data to the server, not just fetch it. Here's an
example of how to send data using the POST method:

POST Request with XMLHttpRequest:


html
Copier le code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AJAX POST Request</title>
</head>
<body>
<h1>AJAX POST Request Example</h1>
<form id="myForm">
<input type="text" id="name" placeholder="Enter your name">
<button type="submit">Submit</button>
</form>
<div id="result"></div>

<script>
document.getElementById('myForm').addEventListener('submit',
function(event) {
event.preventDefault(); // Prevent the form from submitting normally

var name = document.getElementById('name').value;


var xhr = new XMLHttpRequest();
xhr.open('POST', 'submit.php', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-
urlencoded');

xhr.onload = function() {
if (xhr.status == 200) {
document.getElementById('result').innerHTML = xhr.responseText;
} else {
document.getElementById('result').innerHTML = 'Error: ' +
xhr.status;
}
};

// Sending the form data


xhr.send('name=' + encodeURIComponent(name));
});
</script>
</body>
</html>
Explanation:

The form data is captured and sent via a POST request to submit.php.
The xhr.setRequestHeader method sets the correct content type for the request.
The data is encoded and sent using xhr.send().
The response is displayed in the div with ID result.
POST Request with fetch:
html
Copier le code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AJAX POST Request with Fetch</title>
</head>
<body>
<h1>AJAX POST Request with Fetch</h1>
<form id="myForm">
<input type="text" id="name" placeholder="Enter your name">
<button type="submit">Submit</button>
</form>
<div id="result"></div>

You might also like