Home > Developer > JavaScript
The effect is as follows:
Server
Copy codeThe Code is as follows:
Package com. ljq. test;
Import javax. servlet. http. HttpServlet;
Import javax. servlet. http. HttpServletRequest;
Import javax. servlet. http. HttpServletResponse;
Import javax. servlet. ServletException;
Import java. io. IOException;
Import java. io. PrintWriter;
/**
* Use jQuery to accept and process xml data
*
* @ Author jiqinlin
*
*/
@ SuppressWarnings ("serial ")
Public class AjaxXmlServer extends HttpServlet {
Protected void doGet (HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
Try {
// Modify 1 ---- the response Content-Type must be text/xml
Response. setContentType ("text/xml; charset = UTF-8 ");
PrintWriter out = response. getWriter ();
// 1. Take the Parameter
String old = request. getParameter ("name"). trim ();
// Modify 2 ----- the returned data must be assembled into xml format
StringBuilder builder = new StringBuilder ();
Builder. append ("<message> ");
// 2. Check whether the parameter is correct.
If (old = null | "". equals (old )){
Builder. append ("user name cannot be blank"). append ("</message> ");
} Else {
// 3. Verify the operation
String name = old;
If (name. equals ("linjiqin ")){
Builder. append ("user name [" + name + "] already exists. Please use another user name"). append ("</message> ");
} Else {
Builder. append ("user name [" + name + "] does not exist, you can use this user name to register"). append ("</message> ");
}
Out. println (builder. toString ());
System. out. println (builder. toString ());
}
} Catch (Exception e ){
E. printStackTrace ();
}
}
Protected void doPost (HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
DoGet (request, response );
}
}
Modify web. xml
Copy codeThe Code is as follows:
<Servlet>
<Servlet-name> AjaxXmlServer </servlet-name>
<Servlet-class> com. ljq. test. AjaxXmlServer </servlet-class>
</Servlet>
<Servlet-mapping>
<Servlet-name> AjaxXmlServer </servlet-name>
<Url-pattern>/servlet/ajaxXmlServer </url-pattern>
</Servlet-mapping>
Request page
Copy codeThe Code is as follows:
<! Doctype html public "-// W3C // dtd html 4.01 Transitional // EN"
Http://www.w3.org/TR/html4/loose.dtd>
<Html>
<Head>
<Script type = "text/javascript" src = "http: // localhost: 8083/jqueryprj/js/jquery-1.3.1.js"> </script>
<Script type = "text/javascript" src = "http: // localhost: 8083/jqueryprj/js/verifyjqueryxml. js"> </script>
</Head>
<Body>
<Input type = "text" id = "userName"/>
<Input type = "button" value = "verify" onclick = "verify ()"/>
<Div id = "result"> </div>
<! -- The intuitive difference between div and span is that the content in div exclusive rows, and the content in span gets along well with other content before and after -->
</Body>
</Html>
Js
Copy codeThe Code is as follows:
Function verify (){
Var userName = $ ("# userName"). val ();
$. Ajax ({
Type: "POST", // http Request Method
Url: "servlet/ajaxXmlServer", // server url
Data: "name =" + userName, // send data to the server
DataType: "xml", // inform JQuery of the returned data format
Success: callback // The callback function that is called when the interaction is completed and the server correctly returns data
});
}
// Callback function
Function callback (data ){
Var jqueryObj = $ (data );
// Obtain the message Node
Var message = jqueryObj. children ();
// Obtain text content
Var text = message. text ();
// 4. dynamically display the data returned by the server segment on the page
$ ("# Result" ).html (text );
}
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
