ในช่วงไม่กี่ปีที่ผ่านมาฉันได้เขียน jquery มากเกินไป ความจริงนี่คือสาระสำคัญของ Ajax ใน jQuery และความคิดเห็นที่เขียนอย่างละเอียดดังนั้นทุกคนควรจะเข้าใจ:
การคัดลอกรหัสมีดังนี้:
<script type = "text/javascript">
// (a) ①วิธีการรับไฟล์ข้อความ (JavaScript แบบดั้งเดิมใช้วิธีการเขียน AJAX)
ฟังก์ชั่น loadxmldoc1 ()
-
var xmlhttp;
if (window.xmlhttprequest)
-
// รหัสสำหรับ IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = ใหม่ xmlhttprequest ();
-
อื่น
-
// รหัสสำหรับ IE6, IE5
xmlhttp = new ActiveXObject ("Microsoft.xmlhttp");
-
// OnReadyStateChange จัดเก็บฟังก์ชั่น (หรือชื่อฟังก์ชั่น) ซึ่งจะถูกเรียกเมื่อใดก็ตามที่คุณสมบัติ ReadyState เปลี่ยนไป
xmlhttp.onreadystatechange = function ()
-
// ReadyState
// สถานะของ xmlhttprequest มีอยู่ เปลี่ยนจาก 0 เป็น 4
// 0: คำขอไม่ได้เริ่มต้น
// 1: การเชื่อมต่อเซิร์ฟเวอร์ได้รับการจัดตั้งขึ้น
// 2: ได้รับคำขอ
// 3: กำลังดำเนินการตามคำขอกำลังดำเนินการ
// 4: คำขอเสร็จสมบูรณ์และการตอบกลับพร้อม
//สถานะ
// 200: "ตกลง"
// 404: ไม่พบหน้าเว็บ
if (xmlhttp.readystate == 4 && xmlhttp.status == 200)
-
document.getElementById ("myDIV1"). innerHtml = xmlhttp.responsetext;
-
-
xmlhttp.open ("รับ", "doc/test1.txt", จริง);
xmlhttp.send ();
-
รหัสหน้า HTML:
การคัดลอกรหัสมีดังนี้:
<body>
<form id = "form1" runat = "เซิร์ฟเวอร์">
<%-รับไฟล์ข้อความบนเซิร์ฟเวอร์และแสดง-%>
<div id = "mydiv1"> <h2> เปลี่ยนเนื้อหาผ่าน ajax </h2> </div>
<button id = "btnchange1" type = "ปุ่ม" onclick = "loadxmldoc1 ()"> เปลี่ยนเนื้อหาผ่าน ajax (รับข้อความด้านบน test1.txt) </kout>
</form>
</body>
ผลการสาธิต: