傳值方式有兩種GET,POST
傳過去的值的形式有三種:
字符串, XML, JSON
返回給瀏覽器的值的形式也有三種字符串, XML, JSON,但是實(shí)質(zhì)上都是字符串.
處理服務(wù)器響應(yīng)
XMLHttpRequest對象提供了兩個(gè)可以用來訪問服務(wù)器響應(yīng)的屬性,第一個(gè)屬性responseText將響應(yīng)提供為一個(gè)字符串,第二個(gè)屬性responseXML將響應(yīng)提供為一個(gè)XML對象.
這里我們對返回值的通常寫法,通過responseText獲取返回的字符串,再通過XDOM的解析器加載后,獲取Document對象,再進(jìn)行其他操作
var back_val = xmlHttp.responseText;
var xmlDoc=loadXMLString(back_val);
這里有一個(gè)二合一的寫法:
var xmlDoc = xmlHttp. responseXML;
這樣可以直接獲取Document對象,再進(jìn)行其他操作
使用innerHTM屬性創(chuàng)建動態(tài)內(nèi)容
此屬性是一個(gè)非標(biāo)準(zhǔn)的屬性,最早在IE中實(shí)現(xiàn),后來也為其他許多流行的瀏覽器所采用,這是一個(gè)簡單的串,表示一組開始標(biāo)記和結(jié)束標(biāo)記之間的內(nèi)容.
向服務(wù)器值的兩種方式
GET
function getContent(){
var xmlHttp = null;
xmlHttp = GetXmlHttpObject();
if(xmlHttp == null){
alert("您的瀏覽器不支持AJAX");
return ;
}
xmlHttp.onreadystatechange=function(){
if (xmlHttp.readyState==4){
document.getElementById("vContent").innerHTML = xmlHttp.responseText;
}
};
xmlHttp.open("GET","<%=basePath%>/GetContentServlet?time=" + new Date().getTime(),true);
xmlHttp.send(null);
}
可以看到GET方式傳值就是我們平時(shí)使用的超鏈接傳值方式差不多,就是用?,&方式通過key=value的方式傳到Servlet,Servlet中可以通過getParamter的方式來獲取值.
如果傳的值中有中文的話,需要進(jìn)行轉(zhuǎn)碼:
xmlHttp.open("GET","<%=basePath%>/LoginServlet?userName="+encodeURI(userName)+"&time=" + new Date().getTime(),true);
Servlet中接收時(shí)可以轉(zhuǎn)回來
String userName = request.getParameter("userName");
userName = new String(userName.getBytes(("ISO-8859-1")),"utf-8");
Get方式:
用get方式可傳送簡單數(shù)據(jù),但大小一般限制在1KB下,數(shù)據(jù)追加到url中發(fā)送(http的header傳送),也就是說,瀏覽器將各個(gè)表單字段元素及其數(shù)據(jù)按照URL參數(shù)的格式附加在請求行中的資源路徑后面。另外最重要的一點(diǎn)是,它會被客戶端的瀏覽器緩存起來,那么,別人就可以從瀏覽器的歷史記錄中,讀取到此客戶的數(shù)據(jù),比如賬號和密碼等。因此,在某些情況下,get方法會帶來嚴(yán)重的安全性問題。
POST方式傳值
<%@page contentType="text/html; charset=utf-8"%>
<%@ taglib uri="<c:set var="basePath" value="${pageContext.request.contextPath}" />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<html xmlns="<head>
<title>POST方式傳值</title>
<script type="text/javascript" src="${basePath}/script/my.js"></script>
<script type="text/javascript">
function ajaxLogin() {
var xmlHttp = null;
xmlHttp = GetXmlHttpObject();
if (xmlHttp == null) {
alert("您的瀏覽器不支持AJAX");
return;
}
//獲取用戶名及密碼//頁面文檔中的參數(shù)
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
var queryString = "username=" + username + "&password=" + password;
//發(fā)送請求,處理結(jié)果
xmlHttp.onreadystatechange = function() {
//處理響應(yīng)的結(jié)果
if (xmlHttp.readyState == 4) {
alert(xmlHttp.responseText);
}
};
xmlHttp.open("POST","${basePath}/PostServlet?time=" + new Date().getTime());
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlHttp.send(queryString);
}
</script>
</head>
<body>
username:
<input type="text" name="username" id="username" />
<br />
password:
<input type="password" name="password" id="password" />
<br />
<input type="button" value="submit" onclick="ajaxLogin()" />
</body>
</html>
可以看到和GET方式?jīng)]有什么太大的區(qū)別,
同樣的也需要拼裝字符串
var queryString = "username=" + username + "&password=" + password;
同樣的也需要傳一個(gè)時(shí)間戳
xmlHttp.open("POST","${basePath}/PostServlet?time=" + new Date().getTime());
語法部分不同的地方:
open("POST"…)用的是POST, PostServlet?time="這里只打問號傳了一個(gè)時(shí)間戳,沒有傳用戶名和密碼過去
需要加上一句: xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
send方法需要傳拼裝好的參數(shù)xmlHttp.send(queryString),而不再是xmlHttp.send(null);
后臺Servlet:
public class PostServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String username = request.getParameter("username");
String password = request.getParameter("password");
PrintWriter out = response.getWriter();
if("wdpc".equals(username) && "wdpc".equals(password)){
out.print("1");
}else{
out.print("0");
}
out.flush();
out.close();
}
}
Post方式:
當(dāng)使用POST方式時(shí),瀏覽器把各表單字段元素及其數(shù)據(jù)作為HTTP消息的實(shí)體內(nèi)容發(fā)送給Web服務(wù)器,而不是作為URL地址的參數(shù)進(jìn)行傳遞,使用POST方式傳遞的數(shù)據(jù)量要比使用GET方式傳送的數(shù)據(jù)量大的多。
向服務(wù)器傳送XML
<%@page contentType="text/html; charset=utf-8"%>
<%@ taglib uri="<c:set var="basePath" value="${pageContext.request.contextPath}" />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<html xmlns="<head>
<title>POST方式傳值</title>
<script type="text/javascript" src="${basePath}/script/my.js"></script>
<script type="text/javascript">
function sendXML() {
var xmlHttp = null;
xmlHttp = GetXmlHttpObject();
if (xmlHttp == null) {
alert("您的瀏覽器不支持AJAX");
return;
}
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4) {
alert(xmlHttp.responseText);
}
};
xmlHttp.open("POST", "${basePath}/PostServlet?time="
+ new Date().getTime());
xmlHttp.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
xmlHttp.send(getXmlAdept());
}
function getXmlAdept() {
var xmlAdept = "<adept>";
var language = document.getElementById("language");
var languageOption = language.getElementsByTagName("option");
for ( var i = 0; i < languageOption.length; i++) {
if (languageOption[i].selected) {
xmlAdept += ("<language>" + languageOption[i].value + "<\/language>");
}
}
xmlAdept += "<\/adept>";
return xmlAdept;
}
</script>
</head>
<body>
<select id="language" size="10" multiple="true">
<option value="java">
java
</option>
<option value="Jsp">
Jsp
</option>
<option value="Asp">
Asp
</option>
<option value="Php">
Php
</option>
<option value="XML">
XML
</option>
<option value="JavaScript">
JavaScript
</option>
<option value="SQLServer">
SQLServer
</option>
<option value="MySQL">
MySQL
</option>
<option value="Oracle">
Oracle
</option>
<option value="C#">
C#
</option>
</select>
<br />
<br />
<input type="button" value="提交" onclick="sendXML()" />
</body>
</html>
Servlet
BufferedReader br = request.getReader();
String temp = null;
while((temp = br.readLine()) != null){
System.out.println(temp);
}
public class PostServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
Document document = null;
String back_val = "";
BufferedReader br = request.getReader();
DocumentBuilderFactory factory = DocumentBuilderFactory.newInstance();
try {
DocumentBuilder builder = factory.newDocumentBuilder();
document = builder.parse(new InputSource(br));
} catch (ParserConfigurationException e) {
e.printStackTrace();
} catch (SAXException e) {
e.printStackTrace();
}
String path = request.getSession().getServletContext().getRealPath("/")
+ System.currentTimeMillis() + ".xml";
DOMSource xmlSource = new DOMSource(document);
File file = new File(path);
try {
FileOutputStream fos = new FileOutputStream(file);
StreamResult outputTarget = new StreamResult(fos);
TransformerFactory tfactory = TransformerFactory.newInstance();
Transformer rransformer = tfactory.newTransformer();
rransformer.transform(xmlSource, outputTarget);
back_val = "1";
} catch (Exception e) {
back_val = "0";
}
PrintWriter out = response.getWriter();
out.print(back_val);
out.flush();
out.close();
}
}
使用JSON數(shù)據(jù)類型向服務(wù)器傳送對象
在前面我們已經(jīng)看到可以向服務(wù)器傳送XML數(shù)據(jù)類型,需要注意的是后臺接收時(shí)是采用字符流的形式來獲取的.
什么是JSON數(shù)據(jù)類型?
它就是我們以前學(xué)JS自定義對象中的對象直接量的寫法.
比如我們定義一個(gè)學(xué)生類,可以這樣寫:
var student = {
"uname":"張三",
"age":22,
"address":"武漢"
};
定義一個(gè)學(xué)生對象數(shù)組,可以這樣寫
var students=[{
"uname":"張三",
"age":22,
"address":"武漢"
},
{
"uname":"李四",
"age":22,
"address":"武漢"
}];
我們在調(diào)用這個(gè)對象時(shí),可以這樣直接調(diào)用:
alert(students[0].uname);
alert(students[1].uname);
在Ajax中,可以將這種以”{“開始,以”}”的字符串傳送到后臺,服務(wù)器接收后,可以像對象一樣使用前臺傳過來的數(shù)據(jù)
它相對比XML的優(yōu)勢:
Json有一點(diǎn)很引以為豪, 這就是它是一個(gè)輕量級的數(shù)據(jù)互換格式,如果用XML來描述同樣的學(xué)生對象,如下所示:
<student>
<uanme>張三</uanme>
<age>22</age>
<address>武漢</address>
</student>
顯然:JSON編碼比XML編碼精簡許多.JSON編碼比較小,所以如果在網(wǎng)絡(luò)上發(fā)送大量數(shù)據(jù),可能會帶來顯著的性能差別.
通過JSON數(shù)據(jù)類型,我們向服務(wù)端發(fā)送我們的JS自定義對象,有助于我們的程序更符合面向?qū)ο蟮睦砟?
JSON提供了兩個(gè)插件供我們使用
json2.js 此JS文件提供了方法,可以將我們new 的自定義對象,轉(zhuǎn)換為{..}這種格式
json.jar 此Jar包提供了方法,供我們解析{…}這種格式的數(shù)據(jù).
示例:
<%@page contentType="text/html; charset=utf-8"%>
<%@ taglib uri="<c:set var="basePath" value="${pageContext.request.contextPath}" />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<html xmlns="<head>
<title>POST方式傳值</title>
<script type="text/javascript" src="${basePath}/script/my.js"></script>
<script type="text/javascript" src="${basePath}/script/json2.js"></script>
<script type="text/javascript">
function sendJSON() {
var xmlHttp = null;
var person = createPerson();
var personAsJSON = JSON.stringify(person);
xmlHttp = GetXmlHttpObject();
if (xmlHttp == null) {
alert("您的瀏覽器不支持AJAX");
return;
}
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4) {
var msg = document.getElementById("msg");
msg.innerHTML = xmlHttp.responseText;
}
};
xmlHttp.open("POST", "${basePath}/JSONServlet?time="
+ new Date().getTime());
xmlHttp.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
xmlHttp.send(personAsJSON);
}
function Person(firstName, middleName, birthday) {
this.firstName = firstName;
this.middleName = middleName;
this.birthday = birthday;
}
function createPerson() {
var firstName = document.getElementById("firstname").value;
var middleName = document.getElementById("middlename").value;
var birthday = document.getElementById("birthday").value;
return new Person(firstName, middleName, birthday);
}
</script>
</head>
<body>
<table>
<tr>
<td>
First Name:
</td>
<td>
<input id="firstname" type="text" />
</td>
</tr>
<tr>
<td>
Middle Name:
</td>
<td>
<input id="middlename" type="text" />
</td>
</tr>
<tr>
<td>
Birthday:
</td>
<td>
<input id="birthday" type="text" />
</td>
</tr>
</table>
<input id="send" type="button" value="Send" onClick="sendJSON();" />
<br />
<h2>
Server Response:
</h2>
<div id="msg"></div>
</body>
</html>
Servlet
public class JSONServelt extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String json = "";
String line = null;
String responseText = "";
BufferedReader br = new BufferedReader(request.getReader());
while ((line = br.readLine()) != null) {
json += line;
}
JSONObject jsonObject = null;
try {
jsonObject = new JSONObject(json);
String firstName = jsonObject.getString("firstName");
String middleName = jsonObject.getString("middleName");
String birthday = jsonObject.getString("birthday");
responseText = "Hello " + firstName + " " + middleName + ", your birthday is " + birthday;
} catch (JSONException e) {
e.printStackTrace();
}
PrintWriter out = response.getWriter();
out.print(responseText);
out.flush();
out.close();
}
}