Как я могу создать виджет, который загружается асинхронно, используя ajax, js и php

Question

Теперь у этого виджета есть элементы, которые должны быть предоставлены php-файлом.

Например, javascript должен написать таблицу в этом div.

<div id="widget"></>

Он должен динамически заменять контент на HTML, предоставляемый через ajax. Кто-нибудь знает, как это сделать.

Кроме того, возможно ли создать якорь, например <a href="onclick:reload();"></a>, для перезагрузки статьи без загрузки всей страницы. Спасибо.

Я хотел бы выучить ajax, но сейчас это пока одно, и я не хочу изучать весь ajax просто для создания этого виджета, хотя я бы хотел его изучить. Поэтому, пожалуйста, предоставьте мне сайты, на которых есть учебники по этому коду или, возможно, я немного помогу с кодом (это будет очень полезно: D)

Answer 1

Ниже приведен стандартный шаблон ajax для чего-то подобного.Вы можете привязать функцию к своей ссылке, как вы указали в вопросе, для простоты я назвал функцию reload.Теперь у вас должен быть бэкэнд-скрипт, который получит запрос, обработает его и ответит.У меня обычно есть скрипт programname_process.php, и я отправляю ему переменные после действия в зависимости от того, что он пытается сделать.Например, чтобы перезагрузить определенный раздел, пусть переменные записи должны быть что-то вроде «action = reload & экстент = минимум» или что-то еще, что вам может понадобиться.Затем проверьте переменную action в конструкции класса вашего процесса, в зависимости от значения, отправьте ее в функцию для обработки, а затем, когда вы получите HTML в большой строке, которая должна заменить содержимое div, просто отобразите его, и он закончится.вверх в переменной responseText и poof, затем появитесь в вашем div.

Я прошел все заглавные буквы в местах, которые вам нужно отредактировать для ваших нужд:

<script type="text/javascript">
var xmlhttp;
function reload() {
    if (window.XMLHttpRequest) {
        xmlhttp=new XMLHttpRequest();
        }
    else {
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
    xmlhttp.open("POST","YOUR PROCESSING SCRIPT",true);
    xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    xmlhttp.send("POST VARIABLES");
    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4 && xmlhttp.status==200) {
            document.getElementById('widget').innerHTML=xmlhttp.responseText;
            }
        }
    };
</script>

Answer 2

Создайте вызов ajax и используйте обратный вызов onreadystatechange для использования ответа:

<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>

Answer 3

Вы можете сделать что-то вроде этого (используя jQuery):

function callWidget(){
  $.ajax({
    url: "script.php",
    success: function(data){
      $("#widget").html(data);
    }
  });
}

А в своем якоре вы можете использовать:

<a href="#" onClick="callWidget();">Reload</a>