Petua cepat: xmlhttprequest dan innerHtml

petua cepat untuk xmlhttprequest dan innerhtml

xmlhttprequest adalah salah satu petua terbaik untuk DHTML moden. Sekiranya anda tidak pernah menemuinya sebelum ini, ia adalah satu cara untuk mengeluarkan panggilan HTTP ke pelayan web yang dihoskan tanpa menyegarkan seluruh halaman -skrip jauh yang dipertingkatkan. Ia pada asalnya merupakan lanjutan Microsoft dan telah diterima pakai oleh siri pelayar Mozilla dan (bermula dengan versi 1.2) Safari. Perpustakaan Sarissa yang dibincangkan sebelum ini menyediakan lapisan abstraksi untuk pelayar yang berbeza, atau untuk pendekatan yang lebih ringan, kod ini dari Jibbering.com (yang disusun menggunakan IE's JScript Conditional) berfungsi dengan sempurna.

Mendapatkan yang paling banyak daripada XMLHTTPREQUEST sering melibatkan menggunakan XML yang dihasilkan oleh pelayan yang aplikasi JavaScript anda boleh mengambil, menghuraikan, dan menggunakan logik yang lebih kompleks. Walau bagaimanapun, untuk membetulkan cepat, kod berikut akan memuatkan coretan HTML dari URL dan masukkannya terus ke halaman:

function loadFragmentInToElement(fragment_url, element_id) {
    var element = document.getElementById(element_id);
    element.innerHTML = '<p><em>Loading ...</em></p>';
    xmlhttp.open("GET", fragment_url);
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            element.innerHTML = xmlhttp.responseText;
        }
    }
    xmlhttp.send(null);
}

mengira fungsi di atas menggunakan URL serpihan HTML untuk dimasukkan dan ID elemen yang harus memaparkan serpihan. Ia bergantung pada kod Jibbering.com untuk menetapkan pembolehubah XMLHTTP.

Ia benar -benar cepat dan rendah hati, tetapi ia juga merupakan demo cepat yang hebat dari lanjutan XMLHTTPREQUEST.

xmlhttprequest dan faq innerhtml (FAQ)

Apakah perbezaan antara innerHTML dan oUterhtml?

InnerHTML dan OUTHTML adalah kedua -dua atribut elemen dalam model objek dokumen (DOM). Perbezaan utama di antara mereka adalah apa yang mereka kembali dan mengubah suai. InnerHTML mendapat atau menetapkan kandungan HTML (HTML dalaman) elemen, manakala OUTHTML mendapat atau menetapkan kandungan HTML, termasuk pembungkus luaran elemen. Dalam erti kata lain, InnerHTML mengendalikan kandungan di dalam elemen, manakala OUTHTML mengendalikan seluruh elemen, termasuk tag.

Adakah selamat menggunakan innerHTML?

Walaupun InnerHTML adalah cara yang mudah untuk menyuntik HTML ke laman web, ia boleh menimbulkan risiko keselamatan jika digunakan secara tidak wajar. Jika anda memasukkan kandungan yang dihasilkan oleh pengguna ke dalam halaman dan gunakan innerHTML, anda mungkin menghadapi serangan skrip lintas tapak (XSS) di mana skrip jahat disuntik ke dalam halaman web anda. Untuk mengelakkan ini, sentiasa membersihkan kandungan yang dihasilkan oleh pengguna atau menggunakan kaedah yang lebih selamat seperti TextContent atau Createelement.

Bagaimana untuk menambah pelbagai elemen menggunakan innerHTML?

Anda boleh menambah pelbagai elemen menggunakan innerHTML dengan menggabungkan rentetan HTML untuk setiap elemen. Sebagai contoh, jika anda ingin menambah dua perenggan, anda boleh melakukan perkara berikut: element.innerHtml = '<p> perenggan pertama. <code>element.innerHTML = '<p>第一段。</p>' '<p>第二段。</p>'; ''

perenggan kedua.

';

Ini menambah dua perenggan ke elemen.

Bolehkah saya memasukkan elemen SVG menggunakan innerHTML?

Ya, anda boleh memasukkan elemen SVG menggunakan innerHTML. Walau bagaimanapun, terdapat beberapa perkara yang perlu diperhatikan. Ruang nama SVG tidak dipelihara apabila menggunakan innerHTML, yang boleh menyebabkan masalah di beberapa pelayar. Sekiranya anda mempunyai masalah, pertimbangkan untuk menggunakan kaedah CreateElementns dan Appendchild.

Mengapa innerHTML saya tidak berfungsi?

InnerHTML anda mungkin tidak berfungsi untuk beberapa sebab. Sebab yang sama adalah bahawa elemen yang anda cuba mengubah suai tidak wujud apabila skrip berjalan. Ini boleh berlaku jika skrip anda dimuatkan sebelum badan halaman. Untuk menyelesaikan masalah ini, anda boleh memindahkan skrip ke bahagian bawah label badan, atau bungkus kod dalam fungsi Window.onload.

Bolehkah saya menggunakan innerHTML dalam dokumen XML saya?

Tidak, InnerHTML tidak menyokong dokumen XML. Ia adalah harta antara muka HTMLElement dalam HTML DOM dan tidak terdapat dalam XML DOM. Jika anda menggunakan XML, anda perlu menggunakan kaedah seperti Createelement dan Appendchild sebaliknya.

Bagaimana untuk memadam semua elemen kanak -kanak nod?

anda boleh memadam semua elemen kanak -kanak nod dengan menetapkan harta innerHTML ke rentetan kosong. Contohnya: element.innerHTML = ''; Ini akan memadam semua elemen kanak -kanak elemen.

Bolehkah saya memasukkan teks ke dalam nod teks menggunakan innerHTML?

tidak, innerHTML hanya boleh digunakan dengan nod elemen. Jika anda ingin memasukkan teks ke dalam nod teks, anda harus menggunakan harta Nodevalue atau TextContent.

Bagaimana untuk menggantikan elemen dengan innerHTML?

Anda boleh menggantikan elemen dengan innerHTML dengan menetapkan harta innerhtml elemen induk. Ini akan menggantikan semua elemen kanak -kanak elemen induk, termasuk yang anda ingin cari. Contohnya: parentelement.innerHtml = '<code>parentElement.innerHTML = '<p>新段落。</p>'; perenggan baru.

'; Ini akan menggantikan semua elemen kanak -kanak parentelement dengan perenggan baru.

Bolehkah saya menggunakan InnerHTML di Internet Explorer?

Ya, InnerHTML disokong dalam semua pelayar utama, termasuk Internet Explorer. Walau bagaimanapun, penyemak imbas mengendalikan aspek tertentu innerHTML secara berbeza, jadi lebih baik untuk menguji kod anda dalam pelbagai pelayar.

Atas ialah kandungan terperinci Petua cepat: xmlhttprequest dan innerHtml. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!