如何将 php/ajax req 变成 OOP

Question

目前，当一个 div 被点击时，jQuery 检测到它通过 Ajax 发送从 mysql 获取数据的请求。

我实际获取的是点击项目的子类别并将它们显示在 html 页面中。

现在一切都是以程序方式完成的，所以当需要显示另一个子级别时，我必须复制粘贴 ajax 函数。但是如何把它变成对象，这样我就不必重复自己了？

我只需要知道如何将 OOP 引入这种情况..任何帮助将不胜感激。谢谢。

HTML

 <!--append the default top level items starts-->
      <div id="default"></div>
    <!--append the default top level items ends-->  
    <hr>
     <!--append the default top level items starts-->
      <div id="sub"></div>
    <!--append the default top level items ends--> 

Jquery/AJax

<!--select top level items and append to default id starts-->
$("#clickme").on("click",function()
{
    var xmlhttp = getXmlHttp();
     xmlhttp.onreadystatechange = function () {
          if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
              if (this.responseText !== null) {

                 var data = JSON.parse(this.responseText);
                  //console.log(this.responseText);
                  //console.log(JSON.parse(this.responseText));
                 for (i = 0; i < data.length; i++)
                  {
                      var id=data[i].id;
                      var name=data[i].item_name;
                      /*check if sub item exist*/
                       checkSubExist(id);

                       /*append to div*/
                      $("#default").append("name= "+name+", ");
                  }
              }

          }
      }
       xmlhttp.open("GET", "selectTopLevel.php");
       xmlhttp.send();
});
<!--select top level items and append to default id ends-->

function checkSubExist(param)
{
    //alert(param);
    var xmlhttp = getXmlHttp();
     xmlhttp.onreadystatechange = function () {
          if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
              if (this.responseText !== null) {

                 var data = JSON.parse(this.responseText);
                  //console.log(this.responseText);
                  //console.log(JSON.parse(this.responseText));
                 for (i = 0; i < data.length; i++)
                  {
                      var id=data[i].id;
                      var name=data[i].item_name;
                      //alert(name);

                      $("#sub").append(name+", ");
                  }
              }

          }
      }
       xmlhttp.open("GET", "checkSubExist.php?sub="+param);
       xmlhttp.send();
}

Answer 1

1. 我会使用$.ajax 来包装xmlHttpRequest。
2. 如果您想要一种更像“OOP”的方法，我建议您定义某种请求包装器对象，然后在事件绑定时创建这些对象，简单示例：

var RequestWrapperProto = {
  getSubnodes: function(){
    //handle request
  }
  //etc
}
var requestWrapper = Object.create(RequestWrapperProto)

$('.sub').on('click', requestWrapper.getSubNodes);