The lectures on the AJAX is confusing since usually, the shorts just elaborates what is on the lecture. But this time, they looks very different.
The short video is easier to understand as it gives you a templates and show you how to use AJAX. It says to use AJAX you need to first create AJAX object: var ajax= new XMLHttpRequest()
then apply ajax.onreadystatechange
and etccc. Need to end with ajax.open('GET', name + '.html', true);
ajax.send();
But the codes from lecture never applies any of these elements.
The only difference is that the lecture shows 'autocomplete' while the shorts only changes portion of the content on the webpage.
I am just confuse on when the short teaches you that you need to use a certain format to use AJAX, while in lecture you dont use that format and it is completely different
week9 lecture code snippets from the part AJAX
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="initial-scale=1, width=device-width">
<title>shows</title>
</head>
<body>
<input autocomplete="off" autofocus placeholder="Query" type="search">
<ul></ul>
<script>
let input = document.querySelector('input');
input.addEventListener('input', async function() {
let response = await fetch('/search?q=' + input.value);
let shows = await response.text();
document.querySelector('ul').innerHTML = shows;
});
</script>
</body>
</html>
short: https://cs50.harvard.edu/x/2024/shorts/ajax/
function cs50Info(name)
{
//deal with the situation where nothing is chosen
if (name === "")
return;
// create a new AJAX object
var ajax= new XMLHttpRequest();
// change content inside the infodiv
ajax.onreadystatechange = function() {
if (ajax.readyState === 4 && ajax.status === 200) {
$('#infodiv').html(ajax.responseText);
}
};
//open the requested file and going to update just the infodiv
ajax.open('GET', name + '.html', true);
ajax.send();
}