【Ajax技術】JQueryがXMLデータを処理
5260 ワード
以前に書いたアプリケーションをjqueryを使用してxmlデータを返します.
プログラムリスト
サービス側サービス:AjaxXMLServer.java
静的ページ:ajaxJqueryXml.html
JAvascriptスクリプトファイル:verifyjqueryxml.js
AjaxXMLServer.java:
ajaxJqueryXml.html:
verifyjqueryxml.js:
テスト:123を入力して検査をクリックして、サーバー側が帰ってきた情報はインタフェースの上で表示して、試験は成功しました!
jqueryでカプセル化されたメソッドを使用して書かれたjsファイルは、従来のXMLHttpRequestオブジェクトを呼び出すよりも操作されることがわかります.
簡潔になりました.これは巨人の肩に立ってもっと遠くを見ることです.
転載は出典を明記してください.http://blog.csdn.net/acmman/article/details/47720219
プログラムリスト
サービス側サービス:AjaxXMLServer.java
静的ページ:ajaxJqueryXml.html
JAvascriptスクリプトファイル:verifyjqueryxml.js
AjaxXMLServer.java:
import java.io.IOException;
import java.io.PrintWriter;
import java.net.URLDecoder;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
// servlet XML
public class AjaxXMLServer extends HttpServlet {
protected void doPost(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException {
doGet(httpServletRequest, httpServletResponse);
}
protected void doGet(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException {
try{
// 1------ ContentType text/xml
httpServletResponse.setContentType("text/xml;charset=utf-8");
PrintWriter out = httpServletResponse.getWriter();
//inte
Integer inte = (Integer) httpServletRequest.getSession().getAttribute("total");
int temp = 0;
if (inte == null) {
temp = 1;
} else {
temp = inte.intValue() + 1;
}
httpServletRequest.getSession().setAttribute("total",temp);
//1.
String old = httpServletRequest.getParameter("name");
//String name = new String(old.getBytes("iso8859-1"),"UTF-8");
String name = URLDecoder.decode(old,"UTF-8");
// 2----- xml
StringBuilder builder=new StringBuilder();
builder.append("<message>");
//2.
if(old == null || old.length() == 0){
builder.append(" ").append("</message>");
} else{
if(name.equals("hpu")){
//4。 。 ，
// ，
builder.append(" [" + name + "] ， , " + temp).append("</message>");
} else{
builder.append(" [" + name + "] ， , " + temp).append("</message>");
}
out.println(builder.toString());
System.out.println(builder.toString());
}
} catch(Exception e){
e.printStackTrace();
}
}
}ajaxJqueryXml.html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title> ajax </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="js/jquery-1.8.0.js"></script>
<script type="text/javascript" src="js/verifyjqueryxml.js"></script>
</head>
<body>
<h1> ajax </h1><br>
:<br/>
<!-- ajax ， -->
<!-- ajax name ， id -->
<input type="text" id="username"/>
<input type="button" value=" " onclick="verify()"/>
<!-- div ， -->
<!-- id dom ， -->
<div id="result">
</div>
<!-- div span ，div ，span -->
</body>
</html>verifyjqueryxml.js:
//
function verify(){
//1.
//document.getElementById("username"); dom
//jquery , # id
//jquery jquery ， jquery
var jqueryObj=$("#username");
var userName=jqueryObj.val();
//alert(" :"+userName);
//2. servlet
//javascript ，
//var obj={name:"123".age:20};
// JQuery XMLHttpRequest
$.ajax({
type:"POST",//Http
url:"AjaxXMLServer", // url
data:"name="+username, //
dataType:"xml",// JQuery
success:callback // ，
});
}
//
function callback(data){
//3.
// data dom
// dom jquery
var jqueryObj=$(data);
// message
var message=jqueryObj.children();
//
// ， text
var text=message.text();
//4.
//
var resultObj=$("#result");
//
//div
resultObj.html(text);
}
テスト:123を入力して検査をクリックして、サーバー側が帰ってきた情報はインタフェースの上で表示して、試験は成功しました!
jqueryでカプセル化されたメソッドを使用して書かれたjsファイルは、従来のXMLHttpRequestオブジェクトを呼び出すよりも操作されることがわかります.
簡潔になりました.これは巨人の肩に立ってもっと遠くを見ることです.
転載は出典を明記してください.http://blog.csdn.net/acmman/article/details/47720219