Rumah > Artikel > hujung hadapan web > Bagaimana untuk melaksanakan Ajax dalam kemahiran JavaScript_javascript asli
Pertama sekali, saya berkongsi kod JavaScript Ajax asli untuk rujukan anda Kandungan khusus adalah seperti berikut
var getXmlHttpRequest = function() { if (window.XMLHttpRequest) { //主流浏览器提供了XMLHttpRequest对象 return new XMLHttpRequest(); } else if (window.ActiveXObject) { //低版本的IE浏览器没有提供XMLHttpRequest对象 //所以必须使用IE浏览器的特定实现ActiveXObject return new ActiveXObject("Microsoft.XMLHttpRequest"); } }; var xhr = getXmlHttpRequest(); xhr.onreadystatechange = function() { console.log(xhr.readyState); if (xhr.readyState === 3 && xhr.status === 200) { //获取成功后执行操作 //数据在xhr.responseText console.log(xhr.responseText); } }; xhr.open("get", "data.php", true); xhr.send("");
Izinkan saya berkongsi dengan anda beberapa cara untuk menggunakan javascript untuk melaksanakan ajax asli.
Sebelum melaksanakan ajax, anda mesti mencipta objek XMLHttpRequest. Jika penyemak imbas yang mencipta objek tidak menyokongnya, anda perlu mencipta ActiveXObject seperti berikut:
var xmlHttp; function createxmlHttpRequest() { if (window.ActiveXObject) { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } else if (window.XMLHttpRequest) { xmlHttp=new XMLHttpRequest(); }
(1) Gunakan xmlHttp yang dibuat di atas untuk melaksanakan permintaan ajax get yang paling mudah:
function doGet(url){ // 注意在传参数值的时候最好使用encodeURI处理一下,以防出现乱码 createxmlHttpRequest(); xmlHttp.open("GET",url); xmlHttp.send(null); xmlHttp.onreadystatechange = function() { if ((xmlHttp.readyState == 4) && (xmlHttp.status == 200)) { alert('success'); } else { alert('fail'); } } }
(2) Gunakan xmlHttp yang dibuat di atas untuk melaksanakan permintaan siaran ajax yang paling mudah:
function doPost(url,data){ // 注意在传参数值的时候最好使用encodeURI处理一下,以防出现乱码 createxmlHttpRequest(); xmlHttp.open("POST",url); xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); xmlHttp.send(data); xmlHttp.onreadystatechange = function() { if ((xmlHttp.readyState == 4) && (xmlHttp.status == 200)) { alert('success'); } else { alert('fail'); } } }
Di atas adalah keseluruhan kandungan artikel ini, saya harap ia akan membantu kajian semua orang.