Ajax according to city name, automatically complete the corresponding city information _ajax related

I used to meet this kind of demand in my project. Users want to be able to directly enter the city's name, they can get the city's corresponding information. You used to generate a few JavaScript arrays when the page was open, and then contrast that. In doing so, if the data is more numerous, the user will obviously feel the response delay.

Now it's time to do it in an AJAX way, faster and with a better customer experience. Who wants us to be in the "Experience economy" era!

Here is a small example of doing, consisting of two pages.

The city.html page code is as follows:

<script> function Createrequestobject () {var ro; var browser = navigator.appname; if (browser = = "Microsoft Internet Explorer") {ro = new ActiveXObject ("Microsoft.XMLHTTP"); }else{ro = new XMLHttpRequest (); return ro; var http = createrequestobject (); function Sndreq (city) {http.open (' get ', ' zipcode.jsp?city= ' +city); Http.onreadystatechange = Handleresponse; Http.send (NULL); The function Handleresponse () {if (http.readystate = = 4) {var response = Http.responsetext; var update = new Array (); if (Response.indexof (' | '!=-1)) {update = Response.split (' | '); document.getElementById ("Tier"). Value = Update[0]; document.getElementById ("RMM"). Value = Update[1]; </script> <center> <p> Get CITY-appropriate information </p> <table align= "center" > <t R> <td> input City Pinyin:</td> <td><input type= "text" id= "Citycode" name= "Citycode" onblur= "Sndreq" (This . value); /></td> </tr> <tr> <td> level:</td> <td><input type= "text" id= "t Ier "name=" tier "/></td> </tr> <tr> <td> leader:</td> <td><input Type= "text" id= "RMM" name= "RMM"/></td> </tr> </table> </center>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]

The zipcode.jsp code is as follows:

Copy Code code as follows:

<%@ page contenttype= "text/html;charset=gb2312"%>

<%@ page import= "java.util.*"%>
<%@ page import= "Java.sql.Connection"%>
<%@ page import= "Java.sql.PreparedStatement"%>
<%@ page import= "Java.sql.ResultSet"%>

<%@ page import= "Com.util.MyConnection"%>
<%
String City = Request.getparameter ("city");

if (city==null)
{
City= "";
}
if (!city.equals (""))
{
String sql= "Select Citrmm,cittier from tb_basecity where citname like '" +city+ "";
Connection conn = Myconnection.getconnection ();
PreparedStatement state= conn.preparestatement (SQL);
ResultSet rs = State.executequery ();

if (Rs.next ())
{
Out.println (rs.getstring ("CITRMM") + "|" +rs.getstring ("Cittier"));
}
Else
{
Out.println ("Unknown" + "|") + "Unknown");
}

Rs.close ();
State.close ();
Conn.close ();

}
Else
{
Out.println ("Unknown" + "|") + "Unknown");
}

%>

Ps:
After Http.send (), after the detection of http.readystate==4, the instructions loaded, when the Web page content has been loaded into the Http.responsebody