国产一级a片免费看高清,亚洲熟女中文字幕在线视频,黄三级高清在线播放,免费黄色视频在线看

打開APP
userphoto
未登錄

開通VIP,暢享免費(fèi)電子書等14項(xiàng)超值服

開通VIP
AJAX傳值(精)

傳值方式有兩種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();
}
}

打開APP,閱讀全文并永久保存 查看更多類似文章
猜你喜歡
類似文章
Web-第十五天 Ajax學(xué)習(xí)【悟空教程】
MVC項(xiàng)目開發(fā)中那些用到的知識點(diǎn)(Jquery ajax提交Json后臺處理)
javascript-ajax-json-java-servlet互相傳值取值
JS中的JSON對象
AjaxPro 內(nèi)部機(jī)制探討
Java服務(wù)器端List對象轉(zhuǎn)換為JSON對象并返回客戶端實(shí)例
更多類似文章 >>
生活服務(wù)
分享 收藏 導(dǎo)長圖 關(guān)注 下載文章
綁定賬號成功
后續(xù)可登錄賬號暢享VIP特權(quán)!
如果VIP功能使用有故障,
可點(diǎn)擊這里聯(lián)系客服!

聯(lián)系客服