如何使php / ajax req成为OOP

Currently, when a div is clicked, jQuery detects it sends request to fetch data from mysql via Ajax.

What I'm actually fetching is, sub categories for the item clicked and display them in html page.

Now all is done in procedural way, so when another sub level needed to be displayed, I have to copy paste the ajax function. But how do make it into objects so that I don't have to repeat myself?

I just need to know how to bring in OOP into this context..Any help will be greatly appreciated. Thank you.

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();
}

1. I would use $.ajax to wrap the xmlHttpRequest.
2. If you want a more "OOP" like approach, I would suggest you define some kind of Request Wrapper Objects which you then create upon event binding, naive example:

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

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