Ajax uses the XML asynchronous submission method to obtain province and city information from the database for second-level Association (xml method) and ajaxxml

Ajax uses the XML asynchronous submission method to obtain province and city information from the database for second-level Association (xml method) and ajaxxml

I have previously written that the province and city information is obtained from the JavaScript array to achieve level-2 interaction, but it seems that there are many requirements to obtain information from the database, so it needs to be submitted asynchronously, partial refreshing to improve user interaction

The first method is the xml method.

1. First, JavaScript on the jsp page. This code is generic, so it is placed outside the function and can be used by other functions.

Var xhr = false; // create the XMLHttpRequst object if (window. XMLHttpRequest) {xhr = new XMLHttpRequest ();} else if (window. activeXObject) {xhr = new ActiveXObject ("Microsoft. XMLHTTP ") ;}else {xhr = false ;}

2. Obtain the value of the selected province and submit the value to the servlet asynchronously.

// Obtain the city information function getCity () {// The object var provinceobj = document in the province drop-down list. getElementById ("province"); // index of the selected province var index = provinceobj. selectedIndex; // value of the selected province var provincevalue = provinceobj [index]. value; // text value of the selected province var province = provinceobj [index]. text; alert (provincevalue); var url = "<% = basepath %> CityServlet "; /* the post request does not include the parameter */<% -- var url = "<% = basepath %> CityServlet? Provincevalue = "+ provincevalue; -- %> // The get request carries the xhr parameter on the url. open ("post", url, true); // set it to the post submission method. true indicates that xhr must be set when the asynchronous submission method is used. setRequestHeader ("Content-Type", "application/x-www-form-urlencoded"); // when the status changes, call callBack_XML to determine whether data needs to be received xhr. onreadystatechange = callBack_XML; // xml method // you need to put the data in send to upload to the servlet xhr when submitting the data through post. send ("provincevalue =" + provincevalue); // xhr. send (null );}

3. Write the callback function callBack_XML (), which determines that the server receives and processes data when the response is normal.

Function callBack_XML () // xml method to obtain the object var cityobj = document. getElementById ("city"); // when the Request status is 4, the response is complete. You can access the server response and use it if (xhr. readyState = 4) {// if (xhr. status = 200) {alert ("response successful"); // obtain the corresponding xml document var cityxml = xhr. responseXML; alert (cityxml); // obtain the root element var root=cityxml.doc umentElement; // obtain all the city elements under the root element (city_info) var cities = root. getElementsByTagName ("city"); // clear cityobj from the drop-down list. options. length = 1; for (var I = 0; I <cities. length; I ++) {var city = cities [I]; // obtain the node value var cid = city. childNodes [0]. firstChild. nodeValue; var cname = city. childNodes [2]. firstChild. nodeValue; // alert (cid + "" + cname); // put it 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 else if (xhr. status = 404) {alert ("Request URL is not exists! ") ;}Else {alert (" Error: Status is: "+ request. status );}}}

4. On the servlet page:

String provincevalue = request. getParameter ("provincevalue"); System. out. println ("province No.:" + 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 the 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>"); // sets the response character set encoding to prevent Chinese garbled response. setCharacterEncoding ("UTF-8"); response. setContentType ("text/xml; charset = UTF-8"); // write the xml file PrintWriter writer = response. getWriter (); // toStringwriter because only strings can be written. write (xml. toString (); writer. flush (); writer. close ();}

This completes asynchronous submission and partial refresh using xml to achieve provincial/municipal level-2 Linkage

The following small series will continue to share with you how to implement it using json. You will continue to pay attention to the help House website ~

The above section describes how to use Ajax to obtain province and city information from the database through XML asynchronous submission (xml method) and simulate background data login, I hope it will help you. If you have any questions, please leave a message and I will reply to you in a timely manner. Thank you very much for your support for the help House website!