Using AJAX for data transfer

AJAX = Asynchronous JavaScript and XML (asynchronous JavaScript and XML).

AJAX is not a new programming language, but a new method of using existing standards.

AJAX is the art of exchanging data with a server and updating parts of a Web page without reloading the entire page.

When you pass an object, you can divide it into a single object or a value, as well as passing an array or collection.

First create a new data layer:

 PackageCom.bean; Public classDog {PrivateString name;  PublicString GetName () {returnname; }     Public voidsetName (String name) { This. Name =name; }     Public intGetage () {returnAge ; }     Public voidSetage (intAge ) {         This. Age =Age ; }     PublicString getcategory () {returncategory; }     Public voidsetcategory (String category) { This. Category =category; }    Private intAge ; PrivateString category;}

Create a new servlet to implement the page feature:

 PackageCom.servlet;Importjava.io.IOException;Importjavax.servlet.ServletException;ImportJavax.servlet.annotation.WebServlet;ImportJavax.servlet.http.HttpServlet;Importjavax.servlet.http.HttpServletRequest;ImportJavax.servlet.http.HttpServletResponse;ImportCom.bean.Dog;/*** Servlet Implementation class TESTAJAX1*/@WebServlet ("/testajax1") Public classTestajax1extendsHttpServlet {Private Static Final LongSerialversionuid = 1L; /**     * @seeHttpservlet#httpservlet ()*/     PublicTestajax1 () {Super(); //TODO auto-generated Constructor stub    }    /**     * @seeHttpservlet#doget (httpservletrequest request, httpservletresponse response)*/    protected voidDoget (HttpServletRequest request, httpservletresponse response)throwsservletexception, IOException {//TODO auto-generated Method Stub//response.getwriter (). Append ("Served at:"). Append (Request.getcontextpath ());Request.setcharacterencoding ("Utf-8"); Response.setcharacterencoding ("Utf-8"); Dog D=NewDog (); D.setname ("Small white"); D.setage (3); D.setcategory ("Earth Dog"); Response.getwriter (). Append ("<?xml version= ' 1.0 '?>"); Response.getwriter (). Append ("<pet>"); Response.getwriter (). Append ("<name>" +d.getname () + "</name>"); Response.getwriter (). Append ("<name>" +d.getage () + "</name>"); Response.getwriter (). Append ("<name>" +d.getcategory () + "</name>"); Response.getwriter (). Append ("</pet>"); }    /**     * @seeHttpservlet#dopost (httpservletrequest request, httpservletresponse response)*/    protected voidDoPost (HttpServletRequest request, httpservletresponse response)throwsservletexception, IOException {//TODO auto-generated Method Stubdoget (request, response); }}

New JSP page implements Ajax:

<%@ page language= "java" contenttype= "text/html; Charset=iso-8859-1 "pageencoding= "Iso-8859-1"%><! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "Http://www.w3.org/TR/html4/loose.dtd" >$ (document). Ready (function () {$ ("#d1"). Click (function () {$.ajax ({URL:"Testajax1", data:{}, type:"POST", DataType:"XML", Success:function (httpdata) {var n= $ (Httpdata). Find ("name"). text (); var a= $ (Httpdata). Find ("Age"). text (); var c= $ (Httpdata). Find ("category"). text (); $("#d2"). Append ("<p>" +n+ "</p>"); $("#d2"). Append ("<p>" +a+ "</p>"); $("#d2"). Append ("<p>" +c+ "</p>");    }        });    }); });</script>
The effect is as follows:
When you take an array or collection:
 PackageCom.servlet;Importjava.io.IOException;Importjava.util.ArrayList;Importjavax.servlet.ServletException;ImportJavax.servlet.annotation.WebServlet;ImportJavax.servlet.http.HttpServlet;Importjavax.servlet.http.HttpServletRequest;ImportJavax.servlet.http.HttpServletResponse;ImportCom.bean.Dog;/*** Servlet Implementation class TESTAJAX2*/@WebServlet ("/testajax2") Public classTestajax2extendsHttpServlet {Private Static Final LongSerialversionuid = 1L; /**     * @seeHttpservlet#httpservlet ()*/     PublicTestajax2 () {Super(); //TODO auto-generated Constructor stub    }    /**     * @seeHttpservlet#doget (httpservletrequest request, httpservletresponse response)*/    protected voidDoget (HttpServletRequest request, httpservletresponse response)throwsservletexception, IOException {//TODO auto-generated Method Stub//response.getwriter (). Append ("Served at:"). Append (Request.getcontextpath ());Request.setcharacterencoding ("Utf-8"); Response.setcharacterencoding ("Utf-8"); Dog D1=NewDog (); D1.setname ("Dog 1"); D1.setage (1); D1.setcategory ("Variety 1"); Dog D2=NewDog (); D2.setname ("Dog 2"); D2.setage (2); D2.setcategory ("Variety 2"); Dog D3=NewDog (); D3.setname ("Dog 3"); D3.setage (3); D3.setcategory ("Variety 3"); ArrayList<Dog> list =NewArraylist<dog>();        List.add (D1);        List.add (D2);                List.add (D3); Response.getwriter (). Append ("<?xml version= ' 1.0 '?>"); Response.getwriter (). Append ("<pet>");  for(Dog d:list) {response.getwriter (). Append ("<dog name=" "+d.getname () +" > "); Response.getwriter (). Append ("<age>" +d.getage () + "</age>"); Response.getwriter (). Append ("<category>" +d.getcategory () + "</category>"); Response.getwriter (). Append ("</dog>"); } response.getwriter (). Append ("</pet>"); }    /**     * @seeHttpservlet#dopost (httpservletrequest request, httpservletresponse response)*/    protected voidDoPost (HttpServletRequest request, httpservletresponse response)throwsservletexception, IOException {//TODO auto-generated Method Stubdoget (request, response); }}
<%@ page language= "java" contenttype= "text/html; Charset=iso-8859-1 "pageencoding= "Iso-8859-1"%><! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "Http://www.w3.org/TR/html4/loose.dtd" >$ (document). Ready (function () {$ ("#d1"). Click (function () {$.ajax ({URL:"Testajax2", data:{}, type:"POST", DataType:"XML", Success:function (httpdata) {var dogs= $ (Httpdata). Find ("Dog");  for(Var i=0;i<dogs.length;i++) {var n=$ (dogs). EQ (i). attr ("name"); var a=$ (dogs). EQ (i). Find ("Age"). text (); var c=$ (dogs). EQ (i). Find ("category"). text (); var tr= "<tr>"; TR+ = "<td>" +n+ "</td>"; TR+ = "<td>" +a+ "</td>"; TR+ = "<td>" +c+ "</td>"; TR+ = "</tr>"; $("#tb"). Append (tr);    }                            }        }); });});</script>
The effect is as follows:
Using AJAX for data transfer