使用后好處?
??? java 和 javascript 使用同統(tǒng)一對象,語法?. 數(shù)據(jù)從 sever 到 v層?和?v層 到 sever ?方便.
??????????? 簡單說就是?JBean 不做修改拿到V層 當(dāng) JSBean (javascript 類)?中用
1.url 亂碼問題參照 Ajax uri 亂碼問題總結(jié)(IE,FF)
2.使用jar是 jxpath ; json? ......(與相關(guān))
???????????????jxpath 參照 jxpath 學(xué)習(xí)筆記?
???????????????json 參照 使用json-lib
例題說明 數(shù)據(jù) name,avg 在通過 ajax json 后 avg +1 再展現(xiàn)到頁面
本頁需要 json.js 下載到 http://www.json.org/json.js?
<%
@?page?pageEncoding
=
"
GBK
"
%>
<% @?page?contentType = " text/html;?charset=GBK " ? %> ??
< html >
?? < head >
???? < title > json.html </ title >
????
???? < meta? http-equiv ="keywords" ?content ="keyword1,keyword2,keyword3" >
???? < SCRIPT? src ="../js/json.js" ? ></ SCRIPT > ?
????
< script? language ="javascript" ?type ="text/javascript" >
???? var ?request? = ? false ;
????
?? // javascript ?Ajax? 沒什么好說的 這可以用 prototype prototype.js 的理解??,dojo?dojo? 等 ajax
? //本例?為方便直接寫了 ^_^?
???? function ?getOpen(){??????
??????? try ?{
?????????request? = ? new ?XMLHttpRequest();
???????}? catch ?(trymicrosoft)?{
????????? try ?{
???????????request? = ? new ?ActiveXObject( " Msxml2.XMLHTTP " );
?????????}? catch ?(othermicrosoft)?{
??????????? try ?{
?????????????request? = ? new ?ActiveXObject( " Microsoft.XMLHTTP " );
???????????}? catch ?(failed)?{
?????????????request? = ? false ;
???????????}??
?????????}
???????}
????}???
???????
???????
?????? function ?getCustomerInfo()?{
??????getOpen();
??????? if ?( ! request)
?????????alert( " Error?initializing?XMLHttpRequest! " );
?????????
?????? //這通過 url 把數(shù)據(jù)傳給 server?
?????? //數(shù)據(jù)來源 javascript 類 就下方 DBdata???? string:?name:我名字^_^??,? int:?avg:年齡^_^
????????? var ?url? = ? " /json/json?jsonStr= " + ?( new ?DBdata()).toJSONString()?;
?????????request.open( " GET " ,?url,? true );
?????????request.send( null );
?????????request.onreadystatechange? = ?updatePage;
???????}
???????
?????? //?ajax 處理?數(shù)據(jù)后返回的?結(jié)果?
????? // 年齡 +1?并輸入到 輸入框中
??????? function ?updatePage(){
??????? if ?(request.readyState? == ? 4 )?
??????????? if ?(request.status? == ? 200 ){?
??????????? //得到 json str
????????????? var ?jss? = ?request.responseText;
??????????? //加載到 javascript 類中 string -> jsBean
????????????? var ?jsobj? = ?eval('('? + ?jss? + ?')');
???????????? //使用和 java對象一樣 ^_^
?????????????document.getElementById('xx').value? = ?jsobj.name? + ':' + ?jsobj.avg?;
????????????}
???????}
????
//數(shù)據(jù)來源
????? function ?DBdata(){
????????? this .name? = ?'劉凱毅';
????????? this .avg = 23 ;?
????????? this .init = function (){
?????????????alert('呵呵');
?????????}
?????}
</ script >
?? </ head >
?? < body? onload ="" >
?????? < INPUT? id ='xx'? type ="text" ? >
?????? < INPUT? id ='x'? type ="button" ?onclick ="getCustomerInfo()" ?value ="go" >
?? </ body >
</ html >
<% @?page?contentType = " text/html;?charset=GBK " ? %> ??
< html >
?? < head >
???? < title > json.html </ title >
????
???? < meta? http-equiv ="keywords" ?content ="keyword1,keyword2,keyword3" >
???? < SCRIPT? src ="../js/json.js" ? ></ SCRIPT > ?
????
< script? language ="javascript" ?type ="text/javascript" >
???? var ?request? = ? false ;
????
?? // javascript ?Ajax? 沒什么好說的 這可以用 prototype prototype.js 的理解??,dojo?dojo? 等 ajax
? //本例?為方便直接寫了 ^_^?
???? function ?getOpen(){??????
??????? try ?{
?????????request? = ? new ?XMLHttpRequest();
???????}? catch ?(trymicrosoft)?{
????????? try ?{
???????????request? = ? new ?ActiveXObject( " Msxml2.XMLHTTP " );
?????????}? catch ?(othermicrosoft)?{
??????????? try ?{
?????????????request? = ? new ?ActiveXObject( " Microsoft.XMLHTTP " );
???????????}? catch ?(failed)?{
?????????????request? = ? false ;
???????????}??
?????????}
???????}
????}???
???????
???????
?????? function ?getCustomerInfo()?{
??????getOpen();
??????? if ?( ! request)
?????????alert( " Error?initializing?XMLHttpRequest! " );
?????????
?????? //這通過 url 把數(shù)據(jù)傳給 server?
?????? //數(shù)據(jù)來源 javascript 類 就下方 DBdata???? string:?name:我名字^_^??,? int:?avg:年齡^_^
????????? var ?url? = ? " /json/json?jsonStr= " + ?( new ?DBdata()).toJSONString()?;
?????????request.open( " GET " ,?url,? true );
?????????request.send( null );
?????????request.onreadystatechange? = ?updatePage;
???????}
???????
?????? //?ajax 處理?數(shù)據(jù)后返回的?結(jié)果?
????? // 年齡 +1?并輸入到 輸入框中
??????? function ?updatePage(){
??????? if ?(request.readyState? == ? 4 )?
??????????? if ?(request.status? == ? 200 ){?
??????????? //得到 json str
????????????? var ?jss? = ?request.responseText;
??????????? //加載到 javascript 類中 string -> jsBean
????????????? var ?jsobj? = ?eval('('? + ?jss? + ?')');
???????????? //使用和 java對象一樣 ^_^
?????????????document.getElementById('xx').value? = ?jsobj.name? + ':' + ?jsobj.avg?;
????????????}
???????}
????
//數(shù)據(jù)來源
????? function ?DBdata(){
????????? this .name? = ?'劉凱毅';
????????? this .avg = 23 ;?
????????? this .init = function (){
?????????????alert('呵呵');
?????????}
?????}
</ script >
?? </ head >
?? < body? onload ="" >
?????? < INPUT? id ='xx'? type ="text" ? >
?????? < INPUT? id ='x'? type ="button" ?onclick ="getCustomerInfo()" ?value ="go" >
?? </ body >
</ html >
為了方便明了我java方就使用了 server
package?servlet;
import?java.io.IOException;
import?java.io.PrintWriter;
import?javax.servlet.ServletException;
import?javax.servlet.http.HttpServlet;
import?javax.servlet.http.HttpServletRequest;
import?javax.servlet.http.HttpServletResponse;
import?org.apache.commons.jxpath.JXPathContext;
import?net.sf.json.JSONObject;
public?class?Json?extends?HttpServlet?{
????public?void?doGet(HttpServletRequest?req,HttpServletResponse?rpo)throws?ServletException,IOException{
????????rpo.setCharacterEncoding("GBK");
????????req.setCharacterEncoding("GBK");
????????rpo.setContentType("text/html;?charset=GBK");
????????
????????PrintWriter?out?=?rpo.getWriter()?;
???????
??? ??? //得到 url 傳入數(shù)據(jù)
????????String?str?=?req.getParameter("jsonStr")?;
??? ??? //java 方 string -> javaBean
????????JSONObject?jso?=?JSONObject.fromString(str);
??? ??? //javaBean 使用jxpathcontxt解讀更方便 ^_^
??????? //其實jso中是以 map 形式存區(qū)的 有興趣的可以自己動手寫下哦
????????JXPathContext?jx?=?JXPathContext.newContext(jso);
????????try?{
??? ?? ?? ?? //jxpath好處來了 avg + 1
????????????jx.setValue("./avg",?jx.getValue("./avg?+?1?")?);
????????}?catch?(Exception?e)?{e.printStackTrace();}
??? ???
??? ?? //以 jsonString 傳出
????????out.print(jso.toString());
????}
}
import?java.io.IOException;
import?java.io.PrintWriter;
import?javax.servlet.ServletException;
import?javax.servlet.http.HttpServlet;
import?javax.servlet.http.HttpServletRequest;
import?javax.servlet.http.HttpServletResponse;
import?org.apache.commons.jxpath.JXPathContext;
import?net.sf.json.JSONObject;
public?class?Json?extends?HttpServlet?{
????public?void?doGet(HttpServletRequest?req,HttpServletResponse?rpo)throws?ServletException,IOException{
????????rpo.setCharacterEncoding("GBK");
????????req.setCharacterEncoding("GBK");
????????rpo.setContentType("text/html;?charset=GBK");
????????
????????PrintWriter?out?=?rpo.getWriter()?;
???????
??? ??? //得到 url 傳入數(shù)據(jù)
????????String?str?=?req.getParameter("jsonStr")?;
??? ??? //java 方 string -> javaBean
????????JSONObject?jso?=?JSONObject.fromString(str);
??? ??? //javaBean 使用jxpathcontxt解讀更方便 ^_^
??????? //其實jso中是以 map 形式存區(qū)的 有興趣的可以自己動手寫下哦
????????JXPathContext?jx?=?JXPathContext.newContext(jso);
????????try?{
??? ?? ?? ?? //jxpath好處來了 avg + 1
????????????jx.setValue("./avg",?jx.getValue("./avg?+?1?")?);
????????}?catch?(Exception?e)?{e.printStackTrace();}
??? ???
??? ?? //以 jsonString 傳出
????????out.print(jso.toString());
????}
}
web.xml(好象有點多嘴了 哈哈 方便下入門人了)
????<servlet>
????????<servlet-name>json</servlet-name>
????????<servlet-class>servlet.Json</servlet-class>
????</servlet>
????<servlet-mapping>
????????<servlet-name>json</servlet-name>
????????<url-pattern>/json</url-pattern>
????</servlet-mapping>
????????<servlet-name>json</servlet-name>
????????<servlet-class>servlet.Json</servlet-class>
????</servlet>
????<servlet-mapping>
????????<servlet-name>json</servlet-name>
????????<url-pattern>/json</url-pattern>
????</servlet-mapping>