js melaksanakan enkapsulasi berorientasikan objek bagi kemahiran requests_javascript ajax

AJAX ialah teknologi untuk mencipta halaman web yang pantas dan dinamik. AJAX membolehkan halaman web mengemas kini secara tak segerak dengan menukar sejumlah kecil data dengan pelayan di latar belakang. Ini bermakna bahagian halaman web boleh dikemas kini tanpa memuatkan semula keseluruhan halaman.
Menggunakan permintaan ajax dalam js biasanya melibatkan tiga langkah:

• 1. Cipta objek XMLHttp
  
• 2. Hantar permintaan: termasuk membuka pautan dan menghantar permintaan
  
• 3. Proseskan respons
  

Jika anda mahu menggunakan ajax tanpa menggunakan sebarang rangka kerja js, anda mungkin perlu menulis kod seperti berikut

<span style="font-size:14px;">var xmlHttp = xmlHttpCreate();//创建对象 
xmlHttp.onreadystatechange = function(){//响应处理 
  if(xmlHttp.readyState == 4){ 
    console.info("response finish"); 
    if(xmlHttp.status == 200){ 
       console.info("reponse success"); 
      console.info(xmlHttp.responseText); 
    } 
  } 
} 
xmlHttp.open("get","TestServlet",true);//打开链接 
 
xmlHttp.send(null);//发送请求 
 
function xmlHttpCreate() { 
  var xmlHttp; 
  try { 
    xmlHttp = new XMLHttpRequest;// ff opera 
  } catch (e) { 
    try { 
      xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");// ie 
    } catch (e) { 
      try { 
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 
      } catch (e) { 
 
      } 
    } 
  } 
  return xmlHttp; 
} 
 
console.info(xmlHttpCreate());</span> 

Jika anda menggunakan permintaan ajax seperti ini dalam logik perniagaan yang lebih kompleks, kod tersebut akan menjadi kembung dan menyusahkan untuk digunakan semula Dan anda boleh melihat bahawa operasi logik perniagaan mungkin perlu diproses selepas pelayan bertindak balas dengan jayanya , anda perlu Operasi ditulis dalam kaedah onreadystatechage.
Untuk memudahkan penggunaan semula kod kita boleh melakukan perkara berikut;

• 1. Selepas pelayan bertindak balas dengan jayanya, logik perniagaan yang akan diproses diserahkan kepada pembangun sendiri
• 2. Enkapsulasi permintaan berorientasikan objek

Selepas diproses ia sepatutnya kelihatan seperti ini:

<pre code_snippet_id="342814" snippet_file_name="blog_20140513_2_2489549" name="code" class="javascript">window.onload = function() { 
  document.getElementById("hit").onclick = function() { 
    console.info("开始请求"); 
    ajax.post({ 
        data : 'a=n', 
        url : 'TestServlet', 
        success : function(reponseText) { 
          console.info("success : "+reponseText); 
        }, 
        error : function(reponseText) { 
          console.info("error : "+reponseText); 
        } 
    }); 
  } 
} 
 
var ajax = { 
  xmlHttp : '', 
  url:'', 
  data:'', 
  xmlHttpCreate : function() { 
    var xmlHttp; 
    try { 
      xmlHttp = new XMLHttpRequest;// ff opera 
    } catch (e) { 
      try { 
        xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");// ie 
      } catch (e) { 
        try { 
          xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 
        } catch (e) { 
 
        } 
      } 
    } 
    return xmlHttp; 
  }, 
  post:function(jsonObj){ 
    ajax.data = jsonObj.data; 
    ajax.url = jsonObj.url; 
    //创建XMLHttp对象，打开链接、请求、响应 
    ajax.xmlHttp = ajax.xmlHttpCreate(); 
    ajax.xmlHttp.open("post",ajax.url,true); 
    ajax.xmlHttp.onreadystatechange = function(){ 
      if(ajax.xmlHttp.readyState == 4){ 
        if(ajax.xmlHttp.status == 200){ 
          jsonObj.success(ajax.xmlHttp.responseText); 
        }else{ 
          jsonObj.error(ajax.xmlHttp.responseText); 
        } 
      } 
    } 
    ajax.xmlHttp.send(ajax.data); 
  } 
};

Kod di atas melaksanakan operasi ajax yang serupa dengan jquery saya harap ia akan membantu pembelajaran semua orang.