Rumah > hujung hadapan web > tutorial js > js melaksanakan enkapsulasi berorientasikan objek bagi kemahiran requests_javascript ajax

js melaksanakan enkapsulasi berorientasikan objek bagi kemahiran requests_javascript ajax

WBOY
Lepaskan: 2016-05-16 15:20:52
asal
1571 orang telah melayarinya

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> 
Salin selepas log masuk

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); 
  } 
};
Salin selepas log masuk
Kod di atas melaksanakan operasi ajax yang serupa dengan jquery saya harap ia akan membantu pembelajaran semua orang.

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan