Ajax realizes the two-level linkage (XML method) _ajax correlation from the database acquisition province and the city information through the XML asynchronous submission method

Previously written is from the JavaScript array to obtain provincial and municipal information to achieve two-level linkage, but there seems to be a lot of demand is to get information from the database, so it needs to be based on asynchronous submission, local refresh idea to achieve to improve user interaction problem

The first method is the XML method

1. First in the JSP page JavaScript, this piece of code is generic, so put him outside the function, can be used for other functions together

var Xhr=false;
Creates the Xmlhttprequst object
if (window). XMLHttpRequest)
{
xhr=new xmlhttprequest ();
}
else if (window. ActiveXObject)
{
xhr=new activexobject ("Microsoft.XMLHTTP");
}
else
{
xhr=false;
}

2. Get the selected province value value and pass the value value to the servlet via asynchronous commit

Get information about the city
function getcity ()
{
//Province dropdown box Object
var provinceobj=document.getelementbyid ("province");
Index of selected provinces
var index=provinceobj.selectedindex;
The value value of the selected province
var provincevalue=provinceobj[index].value;
The text value of the selected province is
var province=provinceobj[index]. Text;
alert (provincevalue);
var url= "<%=basepath%>cityservlet";/* Post request not with Parameters on URL/
<%--var url= "<%=basepath%>cityservlet ? provincevalue= "+provincevalue; --%>//get request with parameter
Xhr.open ("Post", url,true) on the URL;//set to post commit method, true to set the
committed encoding for asynchronous submit//post submission
Xhr.setrequestheader ("Content-type", "application/x-www-form-urlencoded");
When the state changes, call Callback_xml to determine whether to receive data 
Xhr.onreadystatechange=callback_xml;//xml method 
//　　　　Post submission requires that data be sent to the servlet 
xhr.send ("provincevalue=" +provincevalue); 
Xhr.send (null); 
}

3. Write the callback function Callback_xml (), which determines that when the server responds properly, it receives and processes the data

function Callback_xml ()//xml method to get
the object
var Cityobj=document.getelementbyid ("City") of the {//Cities Drop-down selection box;
When the request status is equal to 4 o'clock, the corresponding completes, you can access the server response and use it
if (xhr.readystate==4)
{
//When the state is 200, the state is normal, there is no error
if (xhr.status==
{
alert ("successful response");
Gets the corresponding XML document
var Cityxml=xhr.responsexml;
alert (cityxml);
Gets the root element
var root=cityxml.documentelement;
Gets all the city element
var cities=root.getelementsbytagname ("City") below the root element (city_info);
Clears the dropdown box content
cityobj.options.length=1;
for (Var i=0;i<cities.length;i++)
{
var city=cities[i];
Gets the value of the node
var cid=city.childnodes[0].firstchild.nodevalue;
var Cname=city.childnodes[2].firstchild.nodevalue;
Alert (cid+ "" +cname);
Put in the Drop-down selection box option (text content, value);
Cityobj.options[cityobj.options.length]=new Option (CNAME,CID);
}
When the status is 404, the page
else if (xhr.status==404)
{
alert ("Request URL is not exists!") cannot be found;
}
else
{
alert ("Error:status is:" +request.status);
}
}

4. On the servlet page:

String provincevalue=request.getparameter ("Provincevalue");
System.out.println ("Province code:" +provincevalue);
Cityservice Cityservice=cityservice.getcityservice ();
List<city> citylist=cityservice.getcity (Provincevalue); for (int i=0;i<citylist.size (); i++) {System.out.println (Citylist.get (i));}//Generate XML page StringBuffer xml=new
StringBuffer ();
Xml.append ("<?xml version=\" 1.0\ "encoding=\" utf-8\ "?>");
Xml.append ("<city_info>"); for (city c:citylist) {xml.append ("<city>"); Xml.append ("<id>" +c.getid () + "</id>"); Xml.append ("
<cityid> "+c.getcityid () +" </cityid> ");
Xml.append ("<cityname>" +c.getcity () + "</cityname>");
Xml.append ("<province>" +c.getfather () + "</province>");
Xml.append ("</city>");
} xml.append ("</city_info>");
Set up the response character set code to prevent Chinese garbled response.setcharacterencoding ("Utf-8");
Response.setcontenttype ("Text/xml;charset=utf-8");
Write the XML document out PrintWriter Writer=response.getwriter (); Because only strings can be written, ToString Writer.write(Xml.tostring ());
Writer.flush ();
Writer.close (); }

This completes the asynchronous submission and local refresh with XML to realize the two-level linkage between the provinces and cities.

The following small series will continue to share the use of JSON to achieve the method, we continue to pay attention to cloud Habitat community site Oh ~

The above mentioned is a small set of Ajax introduced by the XML asynchronous submission method to achieve from the database to obtain provincial and urban information to achieve two-level linkage (XML method), to achieve a simulated background data login effect, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!