How to make php/ajax req into OOP

Question

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

tjati · Accepted Answer · 2015-06-27 13:59:30Z

1

I would use $.ajax to wrap the xmlHttpRequest.
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);

edited Jun 27, 2015 at 13:59

tjati

6,1166 gold badges47 silver badges62 bronze badges

answered Jun 27, 2015 at 13:52

rgruenke

852 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

112233 Over a year ago

@omeinusch, thank you for the idea..you have any reference link to suggest please?

tjati Over a year ago

@Vani I just edited the answer. Please refer to eimfach

rgruenke Over a year ago

You should just get the basics first in javascript oop, it's prototype based

Collectives™ on Stack Overflow

How to make php/ajax req into OOP

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related