<Body> <select name = "first" id = "first" size = "3" onchange = "Change (this. value ); "> <option value =" 1 "selected =" selected "> China </option> <option value =" 2 "> USA </option> <option value =" 3"> Japan </option> </SELECT> <select id = "second" size = "3"> </SELECT> <HR/> <Div id = "output1"> </div> <Div id = "output2"> </div> <SCRIPT type = "text/JavaScript"> Function Change (ID) {var request = new XMLHttpRequest (); var url = "/ajax/second. JSP? Id = "+ ID; request. open ("Post", URL, true); // you can specify the request header. setRequestHeader ("Content-Type", "application/X-WWW-form-urlencoded"); // sets the callback function request for processing the response. onreadystatechange = function processresponse () {// test the processing status of the XMLHTTPRequest object. readystate attributes // alert (request. readystate); If (request. readystate = 4) {If (request. status = 200 | request. status = 304) {var headers = request. getAllResponseHeaders (); // alert ("Request Header type: "+ typeof headers +" \ n "+ headers); // output all request headers in the document. getelementbyid ("output1 "). innerhtml = headers; document. getelementbyid ("output2 "). innerhtml = request. responsetext; var citylist = request. responsetext. split ("$"); var displayselect = document. getelementbyid ("second"); displayselect. innerhtml = NULL; For (VAR I = 0; I <citylist. length; I ++) {var option = document. createelement ("option"); option. innerhtml = Citylist [I]; displayselect. appendchild (option) ;}} else {window. Alert ("the page you requested has an exception! ") ;}} Request. send (null) ;}</SCRIPT> </body> code embedded in the JSP page: <% int id = integer. parseint (request. getparameter ("ID"); system. out. println (ID); Switch (ID) {Case 1: %> Shanghai $ Guangzhou $ Beijing <% break; Case 2: %> Washington $ New York $ California <% break; case 3: %> Tokyo $ Osaka $ Nagoya <% break;} %>4. steps followed by XMLHttpRequest:
// The preceding get method cannot be easily handled, because different browsers may use different character sets to encode GET request parameters, so try to use post to submit
7. Send XML requests
HTML code: <body> <select name = "first" id = "first" style = "width: 80px; "size =" 3 "multiple =" multiple "> <option value =" 1 "> China </option> <option value =" 2 "> us </option> <Option value = "3"> Japan </option> </SELECT> <input type = "button" value = "Send request" onclick = "Send (); "> <select name =" second "id =" second "style =" width: 100px; "size =" 6 "> </SELECT> <SCRIPT type =" text/JavaScript "> // defines the function createxml () {var X for creating an XML document ML = "<countrys>"; var Options = document. getelementbyid ("first "). childnodes; var option = NULL; For (VAR I = 0; I <options. length; I ++) {Option = options [I]; If (option. selected) {XML + = "<country>" + option. value + "<\/country>" ;}// end the root node XML + = "<\/countrys>"; return XML;} function send () {var request = new XMLHttpRequest (); var url = "/ajax/XML. JSP "; request. open ("Post", URL, true); Request. onreadystatechange = Fu Nction () {// test the processing status readystate attribute of the XMLHTTPRequest object // alert (request. readystate); If (request. readystate = 4) {If (request. status = 200 | request. status = 304) {var headers = request. getAllResponseHeaders (); // alert ("Request Header type:" + typeof headers + "\ n" + headers ); // output all request headers var citylist = request. responsetext. split ("$"); var displayselect = document. getelementbyid ("second"); displayselect. innerhtml = NULL; (VaR I = 0; I <citylist. length; I ++) {var option = document. createelement ("option"); option. innerhtml = citylist [I]; displayselect. appendchild (option) ;}} else {window. alert ("the page you requested is abnormal! ") ;}} Request. send (createxml () ;}</SCRIPT> </body> JSP embedded code: <% // defines a stringbuffer object, used for request parameter stringbuffer xmlbuffer = new stringbuffer (); string line = NULL; // obtain the input stream bufferedreader reader = request through the request object. getreader (); While (line = reader. readline ())! = NULL) {xmlbuffer. append (line);} string xml = xmlbuffer. tostring (); // dom4j parses the XML string document xmldoc = new xppreader (). read (New bytearrayinputstream (XML. getbytes (); // obtain the list countrylist = xmldoc of all subnodes of the countrys node. getrootelement (). elements (); // defines the server response result string result = ""; // traverses all nodes for (iterator it = countrylist. iterator (); it. hasnext ();) {element Country = (element) it. next (); If (country. gettext (). equals ("1") {result + = "$ Shanghai $ Guangzhou $ Beijing";} else if (country. gettext (). equals ("2") {result + = "$ Washington $ New York $ Silicon Valley";} else if (country. gettext (). equals ("3") {result + = "$ Tokyo $ Osaka $ Nagoya" ;}}// send a response out to the client. println (result); %>From the code above, we can see that the XML request sent is still a POST request, but the request parameter is not sent in the form of param = value, but directly uses the XML string as the parameter.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
