0

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();
}

2 Answers 2

1

Thanks for the question. That short is no longer relevant to the lecture so we've removed it.

0

So if you read more carefully in the notes, in the top example of code you provided you omitted the python + flask backend that is powering the AJAX; basically the call to the search route is done asynchronously which is the "AJAX" of the page.

In the second case from the shorts instead of using python + flask backend they are just using JavaScript to provide the AJAX functionality. I can't view the video from where I am currently so I don't know where you got the outermost wrapping of calling the function cs50Info, or see the context what what HTML they provided to go with this, as it is not included in the slides, but I presume they show it in the video?

The general idea here is that they are showing you two completely different ways to do AJAX. Why they don't follow up with an exercise that uses it is beyond me and I think somewhat detrimental. Particularly in regard to how they demonstrate the JavaScript AJAX.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .