javascript - 如何将 php/ajax 请求转为 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”的方法，我建议您定义某种请求包装对象，然后在事件绑定(bind)时创建它，简单的示例:

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

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