我如何创建一个使用ajax，js和php异步加载的小部件

Question

Now this widget has items that should be provided by a php file.

For example the javascript should write a table in this div.

<div id="widget"></>

It should dynamically replace the content with the html provided through ajax. Does anyone know how to do this.

Also, can it be possible to create an anchor, like <a href="onclick:reload();"></a> to reload the article without loading the whole page. Thanks.

I would like to learn ajax, but for now this is a one off thing for now and I don't want to learn whole ajax just to create this widget, although I would like to learn it. So please provide me with sites that have tutorials on this with code or possible me help me a little with the code(that will be really very helpful :D )

Answer 1

Create the ajax call and use the onreadystatechange callback to use the response:

<script type="text/javascript>
xhr = new XMLHttpRequest();
xhr.open("GET", "/yourpage.php?get=widget", true);
xhr.send(null);
xhr.onreadystatechange = function() { 
    if (this.readyState == 4 && this.status==200) {
        var widget = document.getElementById ("widget");
                widget.innerHTML = response.xhr.responseText;
    }
};
</script>