如何创建使用ajax、js和php异步加载的小部件

现在这个小部件有了应该由php文件提供的项目

例如，javascript应该在这个div中编写一个表

<div id="widget"></>

它应该用ajax提供的html动态替换内容。有人知道怎么做吗

另外，可以创建一个锚，比如

，在不加载整个页面的情况下重新加载文章。谢谢

---

我很想学习ajax，但现在这是一件一次性的事情，我不想为了创建这个小部件而学习整个ajax，尽管我很想学习它。因此，请为我提供一些网站，这些网站上有关于这方面的教程和代码，或者可能会让我在代码方面帮我一点忙（这将非常有用：D）

您可以这样做（使用jQuery）：

在你的锚中，你可以使用：

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

---

您可以这样做（使用jQuery）：

在你的锚中，你可以使用：

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

---

以下是类似于此的标准ajax模板。您可以将函数锚定到您的链接，正如您在问题中所述，为了方便起见，我将函数命名为reload。现在，您必须有一个后端脚本，该脚本将获取请求并对其进行处理和响应。我通常有一个programname_process.php脚本，我会根据它要做的事情向它发送action post变量。例如，要重新加载某个部分，请将post变量设置为“action=reload&extent=minimum”或您可能需要的任何变量。然后，根据值检查process类构造中的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>

var-xmlhttp；
函数重载（）{
if（window.XMLHttpRequest）{
xmlhttp=新的XMLHttpRequest（）；
}
否则{
xmlhttp=新的ActiveXObject（“Microsoft.xmlhttp”）；
}
open（“POST”，“您的处理脚本”，true）；
setRequestHeader（“内容类型”，“应用程序/x-www-form-urlencoded”）；
发送（“POST变量”）；
xmlhttp.onreadystatechange=函数（）{
if（xmlhttp.readyState==4&&xmlhttp.status==200）{
document.getElementById（'widget'）.innerHTML=xmlhttp.responseText；
}
}
};

以下是类似于此的标准ajax模板。您可以将函数锚定到您的链接，正如您在问题中所述，为了方便起见，我将函数命名为reload。现在，您必须有一个后端脚本，该脚本将获取请求并对其进行处理和响应。我通常有一个programname_process.php脚本，我会根据它要做的事情向它发送action post变量。例如，要重新加载某个部分，请将post变量设置为“action=reload&extent=minimum”或您可能需要的任何变量。然后，根据值检查process类构造中的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>

var-xmlhttp；
函数重载（）{
if（window.XMLHttpRequest）{
xmlhttp=新的XMLHttpRequest（）；
}
否则{
xmlhttp=新的ActiveXObject（“Microsoft.xmlhttp”）；
}
open（“POST”，“您的处理脚本”，true）；
setRequestHeader（“内容类型”，“应用程序/x-www-form-urlencoded”）；
发送（“POST变量”）；
xmlhttp.onreadystatechange=函数（）{
if（xmlhttp.readyState==4&&xmlhttp.status==200）{
document.getElementById（'widget'）.innerHTML=xmlhttp.responseText；
}
}
};

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

---

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

---

Oh，如果使用我推荐的后端脚本类类型，请记住在最后在同一个文件中实例化类之外的对象，否则您将处理非对象并出错。示例：mon-frere不需要jquery。哦，如果您使用我推荐的后端脚本类类型，请记住在最后在同一文件中实例化类之外的对象，否则您将处理非对象并出错。示例：mon-frere不需要jquery。@user658911:当然可以。请参阅Aleadam或linus72982的答案。@user658911:当然可以。请参阅Aleadam或linus72982答案。这只需要纯文本。顺便说一句，linus的回答考虑了与IEF的兼容性问题。另外，我不是这方面的专家，但我相信这样使用它更像是学习ajax的起点。这样插入html文本是一个巨大的安全漏洞。我宁愿使用json对象作为响应，解析它并使用获得的json数据构建小部件。json的数据格式是什么。对不起，我不明白这个问题。JSON将是数据格式。请参阅：关于每种语言的实现（滚动到页面底部）。是的……我曾经在小部件文件中包含另一个js文件，使用包含数据的脚本标记……这更容易实现，并且更广泛可用。谢谢你的帮助。这只需要纯文本。顺便说一句，linus的回答考虑了与IEF的兼容性问题。另外，我不是这方面的专家，但我相信这样使用它更像是学习ajax的起点。这样插入html文本是一个巨大的安全漏洞。我宁愿使用json对象作为响应，parse I