Ajax realizes secondary linkage through XML asynchronous submission

This time I will bring you Ajax to achieve secondary linkage through XML asynchronous submission, and Ajax to achieve secondary linkage through XML asynchronous submission. What are the precautions?. Here is a practical case, let's take a look.

I have written before that the province and city information is obtained from the JavaScript array to achieve secondary linkage, but it seems that there are many needs to obtain information from the database, so it needs to be submitted asynchronously , the idea of ​​partial refresh is implemented to improve user interaction issues

The first method is the xml method

1. First of all, In the JavaScript of the jsp page, this code is universal, so it is placed outside the function and can be used by other functions

var xhr=false;
//创建XMLHttpRequst对象
if(window.XMLHttpRequest)
{
xhr=new XMLHttpRequest();
}
else if(window.ActiveXObject)
{
xhr=new ActiveXObject("Microsoft.XMLHTTP");
}
else
{
xhr=false;
}

2. Get the selected province value, And pass the value to the servlet through asynchronous submission

//获取城市的信息
function getCity()
{
//省份下拉框的对象
var provinceobj=document.getElementById("province");
//被选择的省份的索引
var index=provinceobj.selectedIndex;
//被选择的省份的value值
var provincevalue=provinceobj[index].value;
//被选择的省份的text值
var province=provinceobj[index].Text;
alert(provincevalue);
var url="<%=basepath%>CityServlet";/* post请求不在url上带参数 */
<%-- var url="<%=basepath%>CityServlet?provincevalue="+provincevalue; --%>//get请求在url上带参数
xhr.open("post",url,true);//设置为post提交方式，true表示为异步提交
//post提交方式的时候需要设置提交的编码
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//当状态改变时，调用callBack_XML来判断是否需要接收数据 
　　　　 xhr.onreadystatechange=callBack_XML;//xml方法 
　　　　//通过post提交的时候需要将数据放到send里传到servlet里 
　　　　xhr.send("provincevalue="+provincevalue); 
　　　　//xhr.send(null); 
　　}

3. Write the callback functioncallBack_XML(). This function determines when the server responds normally, receives the data and Process

function callBack_XML()//xml方法来获取
{
//城市下拉选择框的对象
var cityobj=document.getElementById("city");
//当请求状态等于4时，相应已完成，可以访问服务器响应并使用它
if(xhr.readyState==4)
{
//当状态为200时意味着，状态正常，未出错
if(xhr.status==200)
{
alert("响应成功");
//获取相应的xml文档
var cityxml=xhr.responseXML;
alert(cityxml);
//获取根元素
var root=cityxml.documentElement;
//获取根元素（city_info）下面的所有city元素
var cities=root.getElementsByTagName("city");
//将下拉框内容清除
cityobj.options.length=1;
for(var i=0;i<cities.length;i++)
{
var city=cities[i];
//获取节点的值
var cid=city.childNodes[0].firstChild.nodeValue;
var cname=city.childNodes[2].firstChild.nodeValue;
//alert(cid+" "+cname);
//放到下拉选择框里Option(文本内容,value值);
cityobj.options[cityobj.options.length]=new Option(cname,cid);
}
}
//当状态为404时，表示找不到页面
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("省份编号："+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));
}
//生成xml页面
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>");
//设置响应字符集编码，防止中文乱码
response.setCharacterEncoding("utf-8");
response.setContentType("text/xml;charset=utf-8");
//将xml文档写出去
PrintWriter writer=response.getWriter();
//因为只能写字符串，所以toString
writer.write(xml.toString());
writer.flush();
writer.close();
}

This completes the use of xml to implement asynchronous submission and partial refresh to achieve provincial and municipal secondary linkage

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to implement AJAX queue request (with code)

Forward, backward and refresh of Ajax page How to achieve

The above is the detailed content of Ajax realizes secondary linkage through XML asynchronous submission. For more information, please follow other related articles on the PHP Chinese website!