1. บทนำสู่ AJAX
AJAX ถือเป็นตัวย่อของ (Asynchronous JavaScript และ XML) และเทคโนโลยีที่อนุญาตให้เบราว์เซอร์สื่อสารกับเซิร์ฟเวอร์โดยไม่ต้องรีเฟรชหน้าปัจจุบันเรียกว่า AJAX
เช่นการค้นหา Baidu, แผนที่เรียลไทม์ ฯลฯ ในโมเดล AJAX ข้อมูลจะถูกส่งอย่างอิสระระหว่างไคลเอนต์และเซิร์ฟเวอร์ เซิร์ฟเวอร์สามารถอัปเดตข้อมูลโดยไม่ต้องรีเฟรชทั้งหน้า
2. แผนภาพหลักการทำงาน AJAX
3. วิธีการที่สอดคล้องกันในการส่งและรับ Ajax
1. วิธีการที่สอดคล้องกันสำหรับการส่งคำขอ
1) ฟังก์ชั่นการจัดการเหตุการณ์ OnReadyStateChange: ฟังก์ชั่นนี้ถูกเรียกใช้โดยเซิร์ฟเวอร์มากกว่าผู้ใช้ ทุกครั้งที่คุณสมบัติ ReadyState เปลี่ยนแปลงเหตุการณ์ OnReadyStateChange จะถูกเรียกใช้
2) เปิด (วิธีการ, URL, asynchronized): open () ของวัตถุ XMLHTTPRequest อนุญาตให้โปรแกรมส่งคำขอด้วยเซิร์ฟเวอร์การโทร AJAX ประเภทคำขอวิธีการสามารถเป็น "รับ" หรือ "โพสต์" และ URL เป็นสตริงพา ธ Sysnchronized ระบุว่าคำขอจะถูกส่งแบบอะซิงโครนัสหรือไม่
3) ส่ง (ข้อมูล): ข้อมูลเป็นสตริงที่จะถูกส่งผ่านไปยังเซิร์ฟเวอร์ หากเลือกคำขอ "รับ" ข้อมูลจะเป็นโมฆะ
2. รับวิธีการที่สอดคล้องกัน
1) ReadyState: แสดงถึงสถานะปัจจุบันของ AJAX ซึ่งแสดงด้วยค่าตัวเลข 0 หมายถึงการเริ่มต้น 1 หมายถึงการโหลด 2 หมายถึงการโหลด 3 หมายถึงเซิร์ฟเวอร์กำลังส่งการตอบกลับ 4 หมายถึงการตอบกลับถูกส่งและเมื่อคำขอเสร็จสมบูรณ์
2) สถานะ: เช่นเดียวกับใน Javaweb, 404 ไม่พบหน้า, 403 ห้ามการเข้าถึง, ข้อผิดพลาดเซิร์ฟเวอร์ภายใน 500, 200 ทุกอย่างเป็นปกติ, 304 ยังไม่ได้รับการแก้ไขในวัตถุ XMLHTTPRequest รหัสสถานะที่ส่งโดยเซิร์ฟเวอร์จะถูกบันทึกไว้ในแอตทริบิวต์สถานะ ด้วยค่านี้เราสามารถมั่นใจได้ว่าเซิร์ฟเวอร์ได้ส่งการตอบกลับที่ประสบความสำเร็จ
3) ResponseText: มีข้อมูลที่ส่งจากเซิร์ฟเวอร์ซึ่งโดยทั่วไปคือ HTML, XML หรือข้อความธรรมดา เมื่อค่าของ ReadeState คือ 4 และสถานะคือ 200 แอตทริบิวต์ ResponseText สามารถใช้ได้เท่านั้น บนพื้นผิวคำขอ AJAX สิ้นสุดลงแล้ว หากเซิร์ฟเวอร์ส่งคืน XML ข้อมูลจะถูกเก็บไว้ใน Responsexml
4. การสาธิตรหัส (เลียนแบบกล่องค้นหา Baidu)
1. สร้างโครงการ Javaweb (โครงสร้างไดเรกทอรีโครงการมีดังนี้)
2. searchservlet.java
แพ็คเกจ cn.jon.ajax; นำเข้า java.io.ioException; นำเข้า java.util.list; นำเข้า javax.servlet.servletexception; นำเข้า Javax.servlet.http.httpservlet; นำเข้า javax.servlet.http.httpservletrequest; นำเข้า Javax.servlet.http.httpservletResponse; นำเข้า net.sf.json.jsonarray; นำเข้า cn.jon.ajax.data.datautils; SearchServlet ระดับสาธารณะขยาย httpservlet {ส่วนตัวคงที่สุดท้าย long serialVersionUid = 1l; โมฆะสาธารณะ DOGET (คำขอ HTTPSERVLETREQUEST, การตอบสนอง httpservletResponse) โยน servletexception, ioexception {// ตั้งค่ารูปแบบเอาต์พุตของคำขอและการตอบกลับไปยัง UTF-8 request.Setcharacterencoding ("UTF-8"); Response.Setcharacterencoding ("UTF-8"); สตริงคีย์เวิร์ด = request.getParameter ("คำหลัก"); if (คำหลัก! = null) {dataUtils dataResource = new dataUtils (); รายการ <string> list = dataResource.findDatalist (คำหลัก); //system.out.println (jsonarray.fromobject (รายการ) .toString ()); Response.getWriter (). เขียน (jsonArray.FromObject (รายการ) .toString ()); }} โมฆะสาธารณะ dopost (คำขอ httpservletrequest, การตอบสนอง httpservletResponse) พ่น servletexception, ioexception {doget (คำขอ, การตอบกลับ); - 3. dataUtils.java, อ่านข้อมูลภายใต้ไฟล์ทรัพยากร
แพ็คเกจ cn.jon.ajax.data; นำเข้า java.io.bufferedreader; นำเข้า java.io.ioException; นำเข้า Java.io.InputStream; นำเข้า Java.io.InputStreamReader; นำเข้า java.util.arraylist; นำเข้า java.util.list; คลาสสาธารณะ DataUtils {รายการคงที่ส่วนตัว <String> datalist = new ArrayList <String> (); public String url สุดท้าย url = "/test.txt"; คงที่ {readResource (URL); // datalist.add ("AA"); // datalist.add ("ajax"); // datalist.add ("afinal"); // datalist.add ("bb"); } // โมฆะคงที่สาธารณะ readResource (String url) {inputStream คือ = null; InputStreamReader ISR = NULL; bufferedReader br = null; สตริงบรรทัด = null; ลอง {is = dataUtils.class.getClassLoader (). getResourceasstream (URL); ISR = new InputStreamReader (IS); br = bufferedreader ใหม่ (ISR); line = br.readline (); ในขณะที่ (null! = line) {ถ้า (! line.isempty ()) {datalist.add (บรรทัด); } line = br.readline (); } // ในขณะที่} catch (ioexception e) {e.printstacktrace (); } ในที่สุด {ถ้า (null! = br) {ลอง {br.close (); } catch (ioexception e) {}} ถ้า (null! = isr) {ลอง {isr.close (); } catch (ioexception e) {}} ถ้า (null! = is) {ลอง {is.close (); } catch (ioexception e) {}}}} รายการสาธารณะ <String> findDatalist (string str) {list <string> data = new ArrayList <String> (); สำหรับ (String sdata: datalist) {if (sdata.contains (str)) {data.add (sdata); }} // สำหรับข้อมูลการส่งคืน; - 4. index.jsp, หน้าจอแสดงผล
<%@ page language = "java" import = "java.util.*" pageencoding = "utf-8"%> <html> <head> <link rel = "stylesheet" href = "css/my.css"> <img src = "img/baidu.png"> <!-กล่องอินพุต-> <อินพุต type = "text" size = "50" id = "คำหลัก" onkeyup = "getMorecontents ()" onblur = "keywordblur () พื้นที่-> <div id = "popdiv"> <table id = "content-table" bgcolor = "#fffafa" cellpacing = "0" cellpadding = "0"> <tbody id = "content_table_body"> <!
5. my.js ส่วนหลักของ Ajax
var xmlhttp; // 1. ฟังก์ชั่นฟังก์ชั่นเพื่อรับข้อมูลที่เกี่ยวข้องของฟังก์ชั่นเนื้อหาอินพุตผู้ใช้ getMorEcontents () {// ก่อนอื่นรับอินพุตของผู้ใช้ var var ental = document.getElementById ("คำหลัก"); if (content.value == "") {// เมื่อกล่องอินพุตว่างเปล่าให้ล้างข้อมูลก่อนหน้า ClearContent (); กลับ; } //alert(content.value); // 2. จากนั้นคุณต้องการส่งเนื้อหาอินพุตของผู้ใช้ไปยังเซิร์ฟเวอร์เนื่องจากเราใช้ AJAX เพื่อส่งข้อมูลแบบอะซิงโครนัสดังนั้นเราจึงต้องใช้วัตถุ XMLHTTT // XMLHTTP = รับวัตถุ XMLHTTP; xmlhttp = createxmlhttp (); // Alert (XMLHTTP); // 3. ในการส่งข้อมูลไปยังเซิร์ฟเวอร์ก่อนอื่นให้กำหนดที่อยู่ของเซิร์ฟเวอร์ Var url = "การค้นหา? keyword ="+escape (content.value); // จริงหมายความว่าสคริปต์ JavaScript จะดำเนินการต่อไปหลังจากวิธีการส่ง () โดยไม่ต้องรอการตอบกลับจากเซิร์ฟเวอร์ xmlhttp.open ("รับ", url, true); // XMLHTTP เชื่อมโยงวิธีการโทรกลับ วิธีการโทรกลับนี้จะถูกเรียกเมื่อสถานะ XMLHTTP เปลี่ยนแปลง // สถานะ XMLHTTP: 0-4 เราสนใจประมาณ 4 (เสร็จสมบูรณ์) ดังนั้นจึงมีความหมายเท่านั้นที่จะเรียกฟังก์ชันการโทรกลับหลังจากเสร็จสิ้น xmlhttp.onreadystatechange = การโทรกลับ; // พารามิเตอร์อยู่ใน URL อยู่แล้วดังนั้นคุณไม่จำเป็นต้องเพิ่มพารามิเตอร์ xmlhttp.send (null); } // รับฟังก์ชั่นวัตถุ xmlhttp createxmlhttp () {// var xmlhttp ที่เหมาะสำหรับเบราว์เซอร์ส่วนใหญ่; if (window.xmlhttprequest) {xmlhttp = ใหม่ xmlhttprequest (); } // พิจารณาความเข้ากันได้ของเบราว์เซอร์ถ้า (window.activexobject) {xmlhttp = new ActiveXObject ("Microsoft.xmlhttp"); // ถ้าเบราว์เซอร์มีวัตถุ ActiveXObject แต่ไม่มีพารามิเตอร์ microsoft.xmlhttp ถ้า (! xmlhttp) {xmlhttp = new ActiveXobject ("msxml2.xmlhttp"); }} ส่งคืน xmlhttp; } // ฟังก์ชั่นการเรียกกลับฟังก์ชั่นการโทรกลับ () {// 4 หมายถึงการเสร็จสิ้นถ้า (xmlhttp.readystate == 4) {// 200 หมายถึงการตอบสนองของเซิร์ฟเวอร์ที่ประสบความสำเร็จ 404 หมายถึงไม่พบ 500 หมายถึงข้อผิดพลาดภายในของเซิร์ฟเวอร์ถ้า (xmlhttp.status == 200) {// การโต้ตอบ var result = xmlhttp.responsetext; // การวิเคราะห์ข้อมูลที่ได้รับ var json = eval ("("+ผลลัพธ์+")"); // หลังจากได้รับข้อมูลเหล่านี้คุณสามารถแสดงข้อมูลแบบไดนามิก แสดงข้อมูลเหล่านี้ด้านล่างกล่องอินพุต // Alert (JSON); SetContent (JSON); }}} // ตั้งค่าการแสดงผลของข้อมูลที่เกี่ยวข้อง พารามิเตอร์แสดงฟังก์ชั่นข้อมูลที่เกี่ยวข้อง setContent (เนื้อหา) {// ล้างข้อมูลก่อนหน้า ClearContent (); // ตั้งค่าตำแหน่ง setLocaltion (); // ก่อนอื่นรับความยาวของข้อมูลที่เกี่ยวข้องเพื่อกำหนดจำนวน <tr> </tr> size var = contents.length; // ตั้งค่าเนื้อหาสำหรับ (var i = 0; i <size; i ++) {var nextNode = เนื้อหา [i]; // หมายถึงองค์ประกอบ i-th ของ JSON data var tr = document.createElement ("tr"); var td = document.createElement ("TD"); td.setAttribute ("Borde", "0"); td.setAttribute ("gbcolor", "#fffafa"); // ผูกสองสไตล์สำหรับ TD (เหตุการณ์เมื่อเมาส์เข้าและย้ายออก) td.onmouseover = function () {this.className = 'mouseOver'; - td.onmouseout = function () {this.className = 'mouseout'; - td.onclick = function () {// วิธีนี้ใช้วิธีการที่เมื่อมีการคลิกข้อมูลที่เกี่ยวข้องด้วยเมาส์ข้อมูลที่เกี่ยวข้องจะถูกกรอกลงในกล่องอินพุตโดยอัตโนมัติ - td.onMousedOwn = function () {// เมื่อเมาส์คลิกบนข้อมูลที่เกี่ยวข้องข้อมูลจะถูกเพิ่มลงใน Document.getElementById ("คำหลัก") โดยอัตโนมัติค่า = this.innerText; - // เมื่อเมาส์ถูกระงับในข้อมูลที่เกี่ยวข้องจะถูกเพิ่มลงในกล่องอินพุต/* td.onmouseover = function () {this.className = 'mouseover' โดยอัตโนมัติ; if (td.innerText! = null) document.getElementById ("คำหลัก"). value = this.innerText; } */// สร้างโหนดข้อความ var text = document.createtextNode (nextNode); TD.AppendChild (ข้อความ); Tr.AppendChild (TD); document.getElementById ("content_table_body"). AppendChild (TR); }} // ล้างฟังก์ชั่นข้อมูลก่อนหน้า ClearContent () {var contentTableBody = document.getElementById ("content_table_body"); var size = contentTableBody.childNodes.length; // เมื่อลบให้ลบจากล่างขึ้นไปด้านบนสำหรับ (var i = size-1; i> = 0; i-) {// ระบุการลบของ I-th child node contentTableBody.removeChild (contentTableBody.childnodes [i]); } // ล้างขอบด้านนอกของข้อมูลที่เกี่ยวข้อง var popdiv = document.getElementById ("popdiv"). style.border = "ไม่มี"; } // เมื่อกล่องอินพุตสูญเสียการโฟกัสให้ล้างฟังก์ชันข้อมูลก่อนหน้านี้คีย์เวิร์ด () {clearContent (); } // ตั้งค่าตำแหน่งของการแสดงฟังก์ชั่นข้อมูลที่เกี่ยวข้อง setLocaltion () {// ตำแหน่งการแสดงผลของข้อมูลที่เกี่ยวข้องจะต้องสอดคล้องกับกล่องอินพุต var content = document.getElementById ("คำหลัก"); var width = content.offsetWidth; // ความยาวของกล่องอินพุต var left = content ["Offsetleft"]; // ระยะทางไปยังเส้นขอบด้านซ้าย var top = เนื้อหา ["Offsettop"]+content.offsetheight; // ระยะทางด้านบน (รวมถึงความสูงของกล่องอินพุต) // popdiv.style.border = "สีเทา 1px solid"; popdiv.style.left = ซ้าย+"px"; popdiv.style.top = top+"px"; popdiv.style.width = width+"px"; popdiv.style.top = top+"px"; popdiv.style.width = width+"px"; document.getElementById ("ตารางเนื้อหา"). style.width = width+"px"; - 6. my.css, สไตล์การควบคุม
#MYDIV {ตำแหน่ง: สัมบูรณ์; ซ้าย: 50%; ด้านบน: 50%; ขอบซ้าย: -200px; ระยะขอบด้านบน: -120px; } #Button {พื้นหลังสี: #5566EE; } .MouseOver {พื้นหลัง: #708090; สี: #fffafa; } .MouseOut {พื้นหลัง: #FFFAFA; สี: #000000; -หมายเหตุ: รหัสนี้มาจากการศึกษาของ MOOC.com และได้ทำการปรับปรุงตัวเอง ฉันหวังว่าผู้ที่สนใจสามารถสื่อสารและเรียนรู้ร่วมกันได้
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น