JSP椤甸潰锛?
<%@page contentType="text/html; charset=GBK"%>
<html>
<head>
<title>鑷姩瀹屾垚</title>
<mce:style type="text/css"><!--
.mouseOut {
background: #708090;
color: #FFFAFA;
}
.mouseOver {
background: #FFFAFA;
color: #000000;
}
.westFont {
font-family: Arial;
font-size: 12px;
height: 20;
}
--></mce:style><style type="text/css" mce_bogus="1">.mouseOut {
background: #708090;
color: #FFFAFA;
}
.mouseOver {
background: #FFFAFA;
color: #000000;
}
.westFont {
font-family: Arial;
font-size: 12px;
height: 20;
}</style>
<mce:script type="text/javascript"><!--
var xmlHttp;
//鎸囧悗闈㈢殑Div瀵矽薄
var completeDiv;
//杈撳叆鐨勬枃鏈
var inputField;
//琛ㄥ悕
var nameTable;
//琛ㄤ富浣?var nameTableBody;
function createXMLHttpRequest() {
try {
xmlHttp = new XMLHttpRequest();
} catch (trymicrosoft) {
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (othermicrosoft) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (failed) {
xmlHttp = false;
}
}
}
if (!xmlHttp) {
alert("Error initializing XMLHttpRequest!");
}
}
//寰楀埌鍥涗釜瀵矽薄
function initVars() {
//杈撳叆鏂囨湰妗? inputField = document.getElementById("names");
//灞備腑鐨勮〃鏍? nameTable = document.getElementById("name_table");
//涓嬫媺鐨勫眰
completeDiv = document.getElementById("popup");
//琛ㄦ牸涓殑琛ㄤ富浣? nameTableBody = document.getElementById("name_table_body");
}
//婵€娲諱簨浠剁殑鏂規硶
function findNames() {
//寰楀埌鍥涗釜瀵矽薄
initVars();
if (inputField.value.length > 0) {
createXMLHttpRequest();
var url = "autocompleteservlet?names=" + inputField.value;
// Open a connection to the server
xmlHttp.open("GET", url, true);
// Setup a function for the server to run when it's done
xmlHttp.onreadystatechange = callBack;
// Send the request
xmlHttp.send(null);
}
else {
clearNames();
}
}
function callBack() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
//鏍囩鍚嶇殑绗竴绾х殑鍊? var name = xmlHttp.responseXML.getElementsByTagName("name")[0].firstChild.data;
setNames(xmlHttp.responseXML.getElementsByTagName("name"));
}
//204琛ㄧず璇鋒眰鎴愬姛浣嗘病鏈夋柊鐨勪俊鎭繑鍥烇紝鍦╯ervlet涓繑鍥炵殑鍊? else if (xmlHttp.status == 204) {
clearNames();
}
}
}
//璁劇疆琛ㄦ牸鐨勫唴瀹癸紝鐢ㄤ竴涓暟缁勮缃畠鐨勫€?function setNames(the_names) {
//娓呴櫎琛ㄦ牸鍘熸湁鐨勫唴瀹? clearNames();
var size = the_names.length;
//璁劇疆琛ㄦ牸鐨勪綅缃? setOffsets();
//鍗曞厓鏍肩殑琛岋紝鍒楋紝鏂囨湰鑺傜偣
var row, cell, txtNode;
for (var i = 0; i < size; i++) {
//鍚嶅瓧鐨勫唴瀹? var nextNode = the_names[i].firstChild.data;
//寤虹珛涓€琛? row = document.createElement("tr");
cell = document.createElement("td");
//鍖垮悕鍑芥暟
cell.onmouseout = function() {this.className = 'mouseOver';} ;
cell.onmouseover = function() {this.className = 'mouseOut';} ;
//璁劇疆鍗曞厓鏍肩殑灞炴€? cell.setAttribute("bgcolor", "#FFFAFA");
cell.setAttribute("border", "0");
//鐐瑰嚮锛岄€夊埌鏂囨湰妗嗕腑
cell.onclick = function() {populateName(this);};
txtNode = document.createTextNode(nextNode);
//鏂囨湰鍔犲埌鍗曞厓鏍? cell.appendChild(txtNode);
//鍗曞厓鏍煎姞鍒拌〃鏍艱
row.appendChild(cell);
//琛屽姞鍒拌〃鏍? nameTableBody.appendChild(row);
}
}
function setOffsets() {
//鏂囨湰妗嗗璞＄殑鍙瀹藉害
var end = inputField.offsetWidth;
//鏂囨湰妗? var left = calculateOffsetLeft(inputField);
//灞傜殑椤堕儴浣嶇疆
var top = calculateOffsetTop(inputField) + inputField.offsetHeight;
//璁劇疆灞傜殑浣嶇疆
completeDiv.style.border = "black 1px solid";
completeDiv.style.left = left + "px";
completeDiv.style.top = top + "px";
//琛ㄦ牸鐨勫搴? nameTable.style.width = end + "px";
}
function calculateOffsetLeft(field) {
return calculateOffset(field, "offsetLeft");
}
function calculateOffsetTop(field) {
return calculateOffset(field, "offsetTop");
}
//璁＄畻浣嶇疆鐨勫嚱鏁幫細鍏冪礌锛屽睘鎬?function calculateOffset(field, attr) {
var offset = 0;
while (field) {
//鏂囨湰妗哰灞炴€锛岃繖绉嶅啓娉曞緱鍒闆綋鍓嶅厓绱犵浉瀵逛簬鐖跺厓绱犵殑鍋忕Щ鍊? offset += field[attr];
field = field.offsetParent;
}
return offset;
}
function populateName(cell) {
//閫変腑鐨勫崟鍏冩牸鐨勫€兼斁鍒版枃鏈涓? inputField.value = cell.firstChild.nodeValue;
clearNames();
}
function clearNames() {
//鏈夊灏戣
var ind = nameTableBody.childNodes.length;
for (var i = ind - 1; i >= 0; i--) {
//鍒犻櫎姣忎竴琛? nameTableBody.removeChild(nameTableBody.childNodes[i]);
}
//灞傜殑澶栨
completeDiv.style.border = "none";
}
// --></mce:script>
</head>
<body>
<div align="center">
<img src="image/google.gif" mce_src="image/google.gif" alt="Google璋鋒瓕" width="285" height="110">
<br>
<input type="text" size="60" id="names" onKeyUp="findNames()"
class="westFont" />
</div>
<div style="position: absolute;" mce_style="position: absolute;" id="popup">
<div align="center">
<table id="name_table" bgcolor="#FFFAFA" border="0" cellspacing="0"
cellpadding="0">
<!--鎸囨槑琛屼負琛ㄦ牸涓諱綋-->
<tbody id="name_table_body" class="westFont">
</tbody>
</table>
</div>
</div>
<div align="center">
<input name="btnSearch" type="button" value="Google 鎼滅儲"
onClick="alert(inputField.value);">
</div>
</body>
</html>
聽
鏈嶅姟鍣ㄧ浠ｇ爜锛?
package autocomplete;
import java.util.*;
public class NameService {
//鍖呭惈鎵€鏈夊€肩殑鍒楄〃
private List names;
private NameService(List list_of_names) {
this.names = list_of_names;
}
public static NameService getInstance(List list_of_names) {
return new NameService(list_of_names);
}
/**
* 杩斿洖浠refix寮€澶寸殑鍒楄〃
*/
public List findNames(String prefix) {
String prefix_upper = prefix.toUpperCase();
List matches = new ArrayList();
Iterator iter = names.iterator();
while (iter.hasNext()) {
String name = (String) iter.next();
String name_upper_case = name.toUpperCase();
//閮借漿鎴愬ぇ鍐欏啀杩涜姣旇緝
if (name_upper_case.startsWith(prefix_upper)) {
//鍔犲叆鍒楄〃涓? matches.add(name);
}
}
return matches;
}
}
聽
Servlet:
package autocomplete;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.Iterator;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class AutoCompleteServlet extends HttpServlet {
private List<String> names = new ArrayList<String>();
// Initialize global variables
public void init() throws ServletException {
// 瀹為檯鍙互鍔犲湪鏁版嵁搴撲腑
names.add("Aaland Islands");
names.add("Afghanistan");
names.add("Albania");
names.add("Algeria");
names.add("American Samoa");
names.add("Andorra");
names.add("Angola");
names.add("Anguilla");
names.add("Antarctica");
names.add("Antigua And Barbuda");
names.add("Argentina");
names.add("Armenia");
names.add("Aruba");
names.add("Australia");
names.add("Austria");
names.add("Azerbaijan");
names.add("Bahamas");
names.add("Bahrain");
names.add("Bangladesh");
names.add("Barbados");
names.add("Belarus");
names.add("Belgium");
names.add("Belize");
names.add("Benin");
names.add("Bermuda");
names.add("Bhutan");
names.add("Bolivia");
names.add("Bosnia And Herzegowina");
names.add("Botswana");
names.add("Bouvet Island");
names.add("Brazil");
names.add("British Indian Ocean Territory");
names.add("Brunei Darussalam");
names.add("Bulgaria");
names.add("Burkina Faso");
names.add("Burundi");
names.add("Cambodia");
names.add("Cameroon");
names.add("Canada");
names.add("Cape Verde");
names.add("Cayman Islands");
names.add("Central African Republic");
names.add("Chad");
names.add("Chile");
names.add("China");
names.add("Christmas Island");
names.add("Cocos (Keeling) Islands");
names.add("Colombia");
names.add("Comoros");
names.add("Congo, Democratic Republic Of (Was Zaire) Cd");
names.add("Congo, Republic Of");
names.add("Cook Islands");
names.add("Costa Rica");
names.add("Cote D'ivoire");
names.add("Croatia (Local Name: Hrvatska)H");
names.add("Cuba");
names.add("Cyprus");
names.add("Czech Republic");
names.add("Denmark");
names.add("Djibouti");
names.add("Dominica");
names.add("Dominican Republic");
names.add("Ecuador");
names.add("Egypt");
names.add("El Salvador");
names.add("Equatorial Guinea");
names.add("Eritrea");
names.add("Estonia");
names.add("Ethiopia");
names.add("Falkland Islands (Malvinas)");
names.add("Faroe Islands");
names.add("Fiji");
names.add("Finland");
names.add("France");
names.add("French Guiana");
names.add("French Polynesia");
names.add("French Southern Territories");
names.add("Gabon");
names.add("Gambia");
names.add("Georgia");
names.add("Germany");
names.add("Ghana");
names.add("Gibraltar");
names.add("Greece");
names.add("Greenland");
names.add("Grenada");
names.add("Guadeloupe");
names.add("Guam");
names.add("Guatemala");
names.add("Guinea");
names.add("Guinea-Bissau");
names.add("Guyana");
names.add("Haiti");
names.add("Heard And Mc Donald Islands");
names.add("Honduras");
names.add("Hong Kong");
names.add("Hungary");
names.add("Iceland");
names.add("India");
names.add("Indonesia");
names.add("Iran (Islamic Republic Of)");
names.add("Iraq");
names.add("Ireland");
names.add("Israel");
names.add("Italy");
names.add("Jamaica");
names.add("Japan");
names.add("Jordan");
names.add("Kazakhstan");
names.add("Kenya");
names.add("Kiribati");
names.add("Korea, Democratic People's Republic Of");
names.add("Korea, Republic Of");
names.add("Kuwait");
names.add("Kyrgyzstan");
names.add("Lao People's Democratic Republic");
names.add("Latvia");
names.add("Lebanon");
names.add("Lesotho");
names.add("Liberia");
names.add("Libyan Arab Jamahiriya");
names.add("Liechtenstein");
names.add("Lithuania");
names.add("Luxembourg");
names.add("Macau");
names.add("Macedonia, The Former Yugoslav Republic");
names.add("Madagascar");
names.add("Malawi");
names.add("Malaysia");
names.add("Maldives");
names.add("Mali");
names.add("Malta");
names.add("Marshall Islands");
names.add("Martinique");
names.add("Mauritania");
names.add("Mauritius");
names.add("Mayotte");
names.add("Mexico");
names.add("Micronesia, Federated States Of");
names.add("Moldova, Republic Of");
names.add("Monaco");
names.add("Mongolia");
names.add("Montserrat");
names.add("Morocco");
names.add("Mozambique");
names.add("Myanmar");
names.add("Namibia");
names.add("Nauru");
names.add("Nepal");
names.add("Netherlands");
names.add("Netherlands Antilles");
names.add("New Caledonia");
names.add("New Zealand");
names.add("Nicaragua");
names.add("Niger");
names.add("Nigeria");
names.add("Niue");
names.add("Norfolk Island");
names.add("Northern Mariana Islands");
names.add("Norway");
names.add("Oman");
names.add("Pakistan");
names.add("Palau");
names.add("Palestinian Territory, Occupied");
names.add("Panama");
names.add("Papua New Guinea");
names.add("Paraguay");
names.add("Peru");
names.add("Philippines");
names.add("Pitcairn");
names.add("Poland");
names.add("Portugal");
names.add("Puerto Rico");
names.add("Qatar");
names.add("Reunion");
names.add("Romania");
names.add("Russian Federation");
names.add("Rwanda");
names.add("Saint Helena");
names.add("Saint Kitts And Nevis");
names.add("Saint Lucia");
names.add("Saint Pierre And Miquelon");
names.add("Saint Vincent And The Grenadines");
names.add("Samoa");
names.add("San Marino");
names.add("Sao Tome And Principe");
names.add("Saudi Arabia");
names.add("Senegal");
names.add("Serbia And Montenegro");
names.add("Seychelles");
names.add("Sierra Leone");
names.add("Singapore");
names.add("Slovakia");
names.add("Slovenia");
names.add("Solomon Islands");
names.add("Somalia");
names.add("South Africa");
names.add("South Georgia And The South Sandwich Isl");
names.add("Spain");
names.add("Sri Lanka");
names.add("Sudan");
names.add("Suriname");
names.add("Svalbard And Jan Mayen Islands");
names.add("Swaziland");
names.add("Sweden");
names.add("Switzerland");
names.add("Syrian Arab Republic");
names.add("Taiwan");
names.add("Tajikistan ");
names.add("Tanzania, United Republic Of");
names.add("Thailand");
names.add("Timor-Leste");
names.add("Togo");
names.add("Tokelau");
names.add("Tonga");
names.add("Trinidad And Tobago");
names.add("Tunisia");
names.add("Turkey");
names.add("Turkmenistan");
names.add("Turks And Caicos Islands");
names.add("Tuvalu");
names.add("Uganda");
names.add("Ukraine");
names.add("United Arab Emirates");
names.add("United Kingdom");
names.add("United States");
names.add("United States Minor Outlying Islands");
names.add("Uruguay");
names.add("Uzbekistan");
names.add("Vanuatu");
names.add("Vatican City State (Holy See)");
names.add("Venezuela");
names.add("Viet Nam");
names.add("Virgin Islands (British)");
names.add("Virgin Islands (U.S.)");
names.add("Wallis And Futuna Islands");
names.add("Western Sahara");
names.add("Yemen");
names.add("Zambia");
names.add("Zimbabwe");
}
// Process the HTTP Get request
@SuppressWarnings("unchecked")
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String prefix = request.getParameter("names").trim();
// 寰楀埌鍒楄〃鐨勭被,names鏄墍鏈夌殑鍒楄〃
NameService service = NameService.getInstance(names);
// 杩斿洖浠ュ畠寮€濮嬬殑鍒楄〃
List<String> matching = service.findNames(prefix);
if (matching.size() > 0) {
PrintWriter out = response.getWriter();
// xml绫誨瀷
response.setContentType("text/xml;charset=utf-8");
// 涓嶇紦瀛? response.setHeader("Cache-Control", "no-cache");
// 鍐檟ml绫誨瀷
out.println("<response>");
Iterator iter = matching.iterator();
while (iter.hasNext()) {
String name = (String) iter.next();
out.println("<name>" + name + "</name>");
}
out.println("</response>");
// 閲婃斁璧勬簮
matching = null;
service = null;
out.close();
} else {
// 杩斿洖渚沯avascript璋冪敤锛岃〃绀鴻姹傛垚鍔燂紝浣嗘病鏈夋柊鐨勪俊鎭繑鍥烇紝璁劇疆鍝嶅簲鐨勭姸鎬佺爜204
response.setStatus(HttpServletResponse.SC_NO_CONTENT);
}
}
// Process the HTTP Post request
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request, response);
}
}
聽
![前後端分離之跨域問題[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)