ใช้ JavaScript เพื่อสร้างกล่องข้อความพร้อมข้อความแจ้งอัตโนมัติ เพื่อนๆ ที่ต้องการสามารถอ้างอิงถึงได้ ตัวอย่างที่ 1: เขียนการใช้งาน AJAX โดยตรง
ลูกค้า:
คัดลอกรหัสรหัสดังต่อไปนี้:
<!DOCTYPE html สาธารณะ -//W3C//DTD XHTML 1.0 การเปลี่ยนผ่าน//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<html>
<หัว>
<title>Ajax ตระหนักถึงกล่องข้อความแจ้งอัตโนมัติ</title>
<สไตล์>
-
ร่างกาย{
ตระกูลฟอนต์:Arial, Helvetica, sans-serif;
ขนาดตัวอักษร:12px; padding:0px;
-
แบบฟอร์ม {ช่องว่างภายใน: 0px; ระยะขอบ: 0px;}
ป้อนข้อมูล{
/* รูปแบบช่องป้อนข้อมูลของผู้ใช้ */
ตระกูลฟอนต์:Arial, Helvetica, sans-serif;
ขนาดตัวอักษร:12px; เส้นขอบ:1px ทึบ #000000;
ความกว้าง:200px; การขยาย:1px;
-
#ป๊อปอัป{
/* รูปแบบของบล็อก div กล่องพร้อมท์ */
ตำแหน่ง:สัมบูรณ์; ความกว้าง:202px;
สี:#004a7e; ขนาดตัวอักษร:12px;
ตระกูลฟอนต์:Arial, Helvetica, sans-serif;
ซ้าย:41px; ด้านบน:25px;
-
#popup.show{
/* แสดงเส้นขอบของกล่องคำสั่ง */
เส้นขอบ:1px ทึบ #004a7e;
-
#popup.hide{
/* ซ่อนขอบของกล่องคำสั่ง*/
เส้นขอบ:ไม่มี;
-
/* รูปแบบของกล่องข้อความ*/
อูล{
รายการสไตล์: ไม่มี;
ระยะขอบ:0px; การขยาย:0px;
-
li.mouseOver{
สีพื้นหลัง:#004a7e;
สี:#FFFFFF;
-
li.mouseOut{
สีพื้นหลัง:#FFFFFF;
สี:#004a7e;
-
-
</สไตล์>
<ภาษาสคริปต์=จาวาสคริปต์>
var oInputField; //พิจารณาว่ามันถูกใช้ในหลายฟังก์ชั่น
var oPopDiv; //ดังนั้นมันจึงอยู่ในรูปของตัวแปรโกลบอล
var oColorsUl;
var xmlHttp;
ฟังก์ชัน createXMLHttpRequest(){
ถ้า (window.ActiveXObject)
xmlHttp = ActiveXObject ใหม่ (Microsoft.XMLHTTP);
อย่างอื่นถ้า (window.XMLHttpRequest)
xmlHttp = XMLHttpRequest ใหม่();
-
ฟังก์ชัน initVars(){
//เริ่มต้นตัวแปร
oInputField = document.forms[myForm1].สี;
oPopDiv = document.getElementById(ป๊อปอัพ);
oColorsUl = document.getElementById(colors_ul);
-
ฟังก์ชั่น clearColors(){
//ล้างเนื้อหาพร้อมท์
สำหรับ (var i=oColorsUl.childNodes.length-1;i>=0;i--)
oColorsUl.removeChild(oColorsUl.childNodes[i]);
oPopDiv.className = ซ่อน;
-
ฟังก์ชั่น setColors (the_colors) {
//แสดงกล่องพร้อมท์ และพารามิเตอร์ที่ส่งเข้ามาเป็นอาร์เรย์ที่ประกอบด้วยผลลัพธ์ที่ตรงกัน
clearColors(); // ทุกครั้งที่คุณป้อนตัวอักษร ให้ล้างข้อความแจ้งเดิมก่อนดำเนินการต่อ
oPopDiv.className = แสดง;
var oLi;
สำหรับ(var i=0;i<the_colors.length;i++){
//แสดงผลพร้อมท์การจับคู่ให้กับผู้ใช้ทีละรายการ
oLi = document.createElement(li);
oColorsUl.appendChild(oLi);
oLi.appendChild(document.createTextNode(the_colors[i]));
oLi.onmouseover = ฟังก์ชั่น(){
this.className = mouseOver; // ไฮไลต์เมื่อเมาส์ผ่าน
-
oLi.onmouseout = ฟังก์ชั่น(){
this.className = mouseOut; // คืนค่าเป็นสถานะดั้งเดิมเมื่อออกไป
-
oLi.onclick = ฟังก์ชั่น(){
//เมื่อผู้ใช้คลิกที่รายการที่ตรงกัน ให้ตั้งค่ากล่องอินพุตเป็นค่าของรายการ
oInputField.value = this.firstChild.nodeValue;
clearColors(); //ล้างกล่องพร้อมท์พร้อมกัน
-
-
-
ฟังก์ชั่น findColors(){
initVars(); //เริ่มต้นตัวแปร
ถ้า(oInputField.value.length > 0){
createXMLHttpRequest(); //ส่งข้อมูลผู้ใช้ไปยังเซิร์ฟเวอร์
var sUrl = 9-10.aspx?sColor= + oInputField.value + ×tamp= + วันที่ใหม่().getTime();
xmlHttp.open(GET,sUrl,จริง);
xmlHttp.onreadystatechange = ฟังก์ชั่น(){
ถ้า (xmlHttp.readyState == 4 && xmlHttp.status == 200){
var aResult = อาร์เรย์ใหม่ ();
ถ้า(xmlHttp.responseText.length){
aResult = xmlHttp.responseText.split(,);
setColors(aResult); //แสดงผลเซิร์ฟเวอร์
-
อื่น
ล้างสี();
-
-
xmlHttp.send(null);
-
อื่น
clearColors(); //ล้างกล่องข้อความเมื่อไม่มีอินพุต (เช่น ผู้ใช้กดปุ่ม del)
-
</สคริปต์>
</หัว>
<ร่างกาย>
<วิธีการของแบบฟอร์ม=ชื่อโพสต์=myForm1>
สี: <ประเภทอินพุต=ชื่อข้อความ=สี id=สี onkeyup=findColors(); />
</แบบฟอร์ม>
<div id=ป๊อปอัพ>
<ul id=colors_ul></ul>
</div>
</ร่างกาย>
</html>
ฝั่งเซิร์ฟเวอร์ (9-10.aspx):
คัดลอกรหัสรหัสดังต่อไปนี้:
<%@ ภาษาเพจ=C# ContentType=text/html ResponseEncoding=gb2312 %>
<%@ นำเข้าเนมสเปซ=System.Data %>
-
Response.CacheControl = ไม่มีแคช;
Response.AddHeader (Pragma ไม่มีแคช);
สตริง sInput = คำขอ [sColor].Trim();
ถ้า (sInput.Length == 0)
กลับ;
สตริง sResult = ;
string[] aColors = ใหม่ string[]{aliceblue,antiquewith,aquamarine,azure,beige,bisque,black,blanchedalmond,blue,blueviolet,brass,bronze,brown,burlywood,cadetblue,chartreuse,chocolate,copper,coral,cornfloewrb ลื้อ, cornsilk, สีฟ้า, น้ำเงินเข้ม, ฟ้าเข้ม, ก้านทองเข้ม, เทาเข้ม, เขียวเข้ม, กากีเข้ม, ดาร์กมาเจนต้า, ดาร์กโคลีฟกรีน, ดาร์คอร์ชิด, ดาร์กเรนจ์, แดงเข้ม, แซลมอนเข้ม, เขียวเข้ม, น้ำเงินเข้ม, น้ำเงินเข้ม สีเทา,เทอร์ควอยซ์เข้ม,ม่วงเข้ม,ดีพพิงค์,ดีพสกายบลู,ดิมเกรย์,ดอดเจอร์บลู,เฟลด์สปาร์,ไฟร์บริค,ลายดอกไม้สีขาว,ฟอเรสต์กรีน,บานเย็น,เกนส์โบโร,ทอง,โกลเด้นร็อด,โกเลนร็อด,กอสต์ไวท์,เทา,เขียว,เขียว ellow,สีน้ำผึ้ง,hotpink,indianred,inen,งาช้าง,สีกากี,ลาเวนเดอร์,ลาเวนเดอร์blush,lawngreen,lemonchiffon,lightblue,lightcoral,lightcyan,lightgodenrod,lightgodenrodyellow,lightgray,lightgreen,l ightpink,lightsalmon,lightseagreen,lightskyblue,lightslateblue,lightslategray,lightsteelblue,lightyellow,lime,limegreen,magenta,magenta,maroom,maroon,mediumaquamarine,mediumblue,medi umorchid,mediumpurpul,mediumseagreen,mediumslateblue,mediumspringgreen,mediumturquoise,mediumvioletred,midnightblue,mintcream,mistyrose,moccasin,navajowhite,น้ำเงินกรมท่า,oldlace,oli vedrab,สีส้ม,กล้วยไม้,orengered,palegodenrod,ซีดเขียว,paleturquoise,palevioletred,papayawhip,peachpuff,เปรู,สีชมพู,พลัม,powderblue,สีม่วง,ควอตซ์,สีแดง,rosybrown,royalblue,saddlebrown,Sal จันทร์,สีน้ำตาลทราย,สีแดง,เขียวน้ำทะเล,เปลือกหอย,สีน้ำตาล,สีเงิน,ฟ้าคราม,สีเทาสเลทเกรย์,หิมะ,สปริงกรีน,สตีลบลู,แทน,ทิสเซิล,มะเขือเทศ,เทอร์ควอยซ์,ไวโอเล็ต,ไวโอเล็ตเรด,ข้าวสาลี,ควันขาว,เหลือง,เหลืองเขียว};
สำหรับ(int i=0;i<aColors.Length;i++){
ถ้า (aColors [i] .IndexOf (sInput) == 0)
sResult += aColors[i] + ,;
-
if(sResult.Length>0) //ถ้ามีรายการที่ตรงกัน
sResult = sResult.Substring(0,sResult.Length-1); // ลบหมายเลขสุดท้าย
การตอบสนองเขียน(sResult);
-
ตัวอย่างที่ 2: ดำเนินการโดยใช้ jQuery
ลูกค้า:
คัดลอกรหัสรหัสดังต่อไปนี้:
<!DOCTYPE html สาธารณะ -//W3C//DTD XHTML 1.0 การเปลี่ยนผ่าน//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<html>
<หัว>
<title>JQuery ใช้กล่องข้อความแจ้งอัตโนมัติ</title>
<สไตล์>
-
ร่างกาย{
ตระกูลฟอนต์:Arial, Helvetica, sans-serif;
ขนาดตัวอักษร:12px; padding:0px;
-
แบบฟอร์ม {ช่องว่างภายใน: 0px; ระยะขอบ: 0px;}
ป้อนข้อมูล{
/* รูปแบบช่องป้อนข้อมูลของผู้ใช้ */
ตระกูลฟอนต์:Arial, Helvetica, sans-serif;
ขนาดตัวอักษร:12px; เส้นขอบ:1px ทึบ #000000;
ความกว้าง:200px; การขยาย:1px;
-
#ป๊อปอัป{
/* รูปแบบของบล็อก div กล่องพร้อมท์ */
ตำแหน่ง:สัมบูรณ์; ความกว้าง:202px;
สี:#004a7e; ขนาดตัวอักษร:12px;
ตระกูลฟอนต์:Arial, Helvetica, sans-serif;
ซ้าย:41px; ด้านบน:25px;
-
#popup.show{
/* แสดงเส้นขอบของกล่องคำสั่ง */
เส้นขอบ:1px ทึบ #004a7e;
-
/* รูปแบบของกล่องข้อความ*/
อูล{
รายการสไตล์: ไม่มี;
ระยะขอบ:0px; การขยาย:0px;
สี:#004a7e;
-
li.mouseOver{
สีพื้นหลัง:#004a7e;
สี:#FFFFFF;
-
-
</สไตล์>
<script language=javascript src=jquery.min.js></script>
<ภาษาสคริปต์=จาวาสคริปต์>
var oInputField; //พิจารณาว่ามันถูกใช้ในหลายฟังก์ชั่น
var oPopDiv; //ดังนั้นมันจึงอยู่ในรูปของตัวแปรโกลบอล
var oColorsUl;
ฟังก์ชั่น initVars(){
//เริ่มต้นตัวแปร
oInputField = $(#สี);
oPopDiv = $(#ป๊อปอัพ);
oColorsUl = $(#colors_ul);
-
ฟังก์ชั่น clearColors(){
//ล้างเนื้อหาพร้อมท์
oColorsUl.empty();
oPopDiv.removeClass(แสดง);
-
ฟังก์ชั่น setColors (the_colors) {
//แสดงกล่องพร้อมท์ และพารามิเตอร์ที่ส่งเข้ามาเป็นอาร์เรย์ที่ประกอบด้วยผลลัพธ์ที่ตรงกัน
clearColors(); // ทุกครั้งที่คุณป้อนตัวอักษร ให้ล้างข้อความแจ้งเดิมก่อนดำเนินการต่อ
oPopDiv.addClass(แสดง);
สำหรับ (var i=0;i<the_colors.length;i++)
//แสดงผลพร้อมท์การจับคู่ให้กับผู้ใช้ทีละรายการ
oColorsUl.ผนวก($(<li>+the_colors[i]+</li>));
oColorsUl.find(li).คลิก(ฟังก์ชั่น(){
oInputField.val($(นี้).ข้อความ());
ล้างสี();
}).โฮเวอร์(
ฟังก์ชั่น(){$(นี้).addClass(mouseOver);},
ฟังก์ชั่น(){$(นี้).removeClass(mouseOver);}
-
-
ฟังก์ชั่น findColors(){
initVars(); //เริ่มต้นตัวแปร
ถ้า(oInputField.val().ความยาว > 0){
//รับข้อมูลแบบอะซิงโครนัส
$.get(14-10.aspx,{sColor:oInputField.val()},
ฟังก์ชั่น (ข้อมูล) {
var aResult = อาร์เรย์ใหม่ ();
ถ้า (data.length > 0) {
ผลลัพธ์ = data.split(,);
setColors(aResult); //แสดงผลเซิร์ฟเวอร์
-
อื่น
ล้างสี();
-
-
อื่น
clearColors(); //ล้างกล่องข้อความเมื่อไม่มีอินพุต (เช่น ผู้ใช้กดปุ่ม del)
-
</สคริปต์>
</หัว>
<ร่างกาย>
<วิธีการของแบบฟอร์ม=ชื่อโพสต์=myForm1>
สี: <ประเภทอินพุต=ชื่อข้อความ=สี id=สี onkeyup=findColors(); />
</แบบฟอร์ม>
<div id=ป๊อปอัพ>
<ul id=colors_ul></ul>
</div>
</ร่างกาย>
</html>
ฝั่งเซิร์ฟเวอร์ (14-10.aspx):
คัดลอกรหัสรหัสดังต่อไปนี้:
<%@ ภาษาเพจ=C# ContentType=text/html ResponseEncoding=gb2312 %>
<%@ นำเข้าเนมสเปซ=System.Data %>
-
Response.CacheControl = ไม่มีแคช;
Response.AddHeader (Pragma ไม่มีแคช);
สตริง sInput = คำขอ [sColor].Trim();
ถ้า (sInput.Length == 0)
กลับ;
สตริง sResult = ;
string[] aColors = ใหม่ string[]{aliceblue,antiquewith,aquamarine,azure,beige,bisque,black,blanchedalmond,blue,blueviolet,brass,bronze,brown,burlywood,cadetblue,chartreuse,chocolate,copper,coral,cornfloewrb ลื้อ, cornsilk, สีฟ้า, น้ำเงินเข้ม, ฟ้าเข้ม, ก้านทองเข้ม, เทาเข้ม, เขียวเข้ม, กากีเข้ม, ดาร์กมาเจนต้า, ดาร์กโคลีฟกรีน, ดาร์คอร์ชิด, ดาร์กเรนจ์, แดงเข้ม, แซลมอนเข้ม, เขียวเข้ม, น้ำเงินเข้ม, น้ำเงินเข้ม สีเทา,เทอร์ควอยซ์เข้ม,ม่วงเข้ม,ดีพพิงค์,ดีพสกายบลู,ดิมเกรย์,ดอดเจอร์บลู,เฟลด์สปาร์,ไฟร์บริค,ลายดอกไม้สีขาว,ฟอเรสต์กรีน,บานเย็น,เกนส์โบโร,ทอง,โกลเด้นร็อด,โกเลนร็อด,กอสต์ไวท์,เทา,เขียว,เขียว ellow,สีน้ำผึ้ง,hotpink,indianred,inen,งาช้าง,สีกากี,ลาเวนเดอร์,ลาเวนเดอร์blush,lawngreen,lemonchiffon,lightblue,lightcoral,lightcyan,lightgodenrod,lightgodenrodyellow,lightgray,lightgreen,l ightpink,lightsalmon,lightseagreen,lightskyblue,lightslateblue,lightslategray,lightsteelblue,lightyellow,lime,limegreen,magenta,magenta,maroom,maroon,mediumaquamarine,mediumblue,medi umorchid,mediumpurpul,mediumseagreen,mediumslateblue,mediumspringgreen,mediumturquoise,mediumvioletred,midnightblue,mintcream,mistyrose,moccasin,navajowhite,น้ำเงินกรมท่า,oldlace,oli vedrab,สีส้ม,กล้วยไม้,orengered,palegodenrod,ซีดเขียว,paleturquoise,palevioletred,papayawhip,peachpuff,เปรู,สีชมพู,พลัม,powderblue,สีม่วง,ควอตซ์,สีแดง,rosybrown,royalblue,saddlebrown,Sal จันทร์,สีแซนดี้บราวน์,สการ์เล็ต,เขียวทะเล,เปลือกหอย,สีน้ำตาล,สีเงิน,สีฟ้าคราม,สีเทาสเลทเกรย์,หิมะ,สปริงกรีน,สตีลบลู,แทน,ทิสเซิล,มะเขือเทศ,เทอร์ควอยซ์,ไวโอเล็ต,ไวโอเล็ตเรด,ข้าวสาลี,ควันขาว,เหลือง,เหลืองเขียว};
สำหรับ(int i=0;i<aColors.Length;i++){
ถ้า (aColors [i] .IndexOf (sInput) == 0)
sResult += aColors[i] + ,;
-
if(sResult.Length>0) //ถ้ามีรายการที่ตรงกัน
sResult = sResult.Substring(0,sResult.Length-1); // ลบหมายเลขสุดท้าย
การตอบสนองเขียน(sResult);
-