Examples of Ajax loading static pages

When the mobile Web page is too long, you can block the content and load it with Ajax.

The main ideas are as follows: Store the pages that need to be loaded in a new page, main code:

header ("Access-control-allow-origin: *");
Header ("content-type:text/html; Charset=utf-8 ");
echo "";
echo inside is the HTML that needs to be loaded.

Then in the JS initialization, use the scroll function to monitor the scroll bar, to determine the distance from the top of the scroll bar, and then use the AJAX get data as needed in the appropriate location, the main code is as follows:

<pre>if (h>appheight) {//scroll bar height is greater than appbox height. Invoke Ajax to get the following data                 / /ajax get method                    if (flag==0) {                     $.get (' http://192.168.1.138/zmitphone/AjaxweChatBox.php ',  function   (response)  {//              

          $ (". Wechatbox"). Remove (". Loading");                   

      $ (". Loadingwechat"). Hide ();                          $ (". Wechatbox"). Append (response)           

              console.log ("Success");                   

      flag=1;                    &NBSP;&NBSP})                  }                 else{//                    

 console.log (flag);                      if (h>appheight+wechatheight) {&NBSP;&Nbsp;                       if (flag==1) {                             $.get (' http://192.168.1.138/zmitphone/ajaxWebBox.php ', function  (response)  {                       

          $ (". Loadingweb"). Hide ();                                  $ (". WebBox"). Append ( Response)                          &nbsP;       console.log ("Success");                   

              flag=2;                    &NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP})                          }                           else{             

               console.log (flag);                             if (h> Appheight+wechatheight+webheight) {                                  if (flag==2) {                                      $.get (' http://192.168.1.138/zmitphone/ajaxSoftwareBox.php ', function  ( Response)  {                                  

       $ (". Loadingsoft"). Hide ();                                          $ (". Softwarebox"). Append (response)                                         

  console.log ("Success");                                      

    flag=3;                   

                  })                                  }                                   else{                                    

 console.log (flag);                                      if (H>appheight+wechatheight+webheight+softwareheight) {                           &nBsp;             if (flag==3) {                                               $.get (' http://192.168.1.138/zmitphone/ajaxSeoBox.php ', function  (response)  {                                                  $ (". Loadingseo").

Hide ();                                                    $ (". Seobox"). Append (response)                                           

        console.log ("Success");                                      

            flag=4;                                       &NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP})                                          }                                            else{                                  

           console.log ("Full load Complete");                                           }                                      }                                   }                               }                          }                      }                  }</pre> <pre>

Because the scroll bar is listening all the time, but at the specified location it is enough to load the data once, and here you can set up a flag, judging by the value of the flag. If you want to add a load hint, you can add to the location to write some hint text, after the successful loading, hide this div can be.