`

AJAX传值（精）

    博客分类：
  • Ajax
ajax 
阅读更多
    http://www.360doc.com/content/11/0518/10/19147_117603564.shtml
    传值方式有两种GET,POST
传过去的值的形式有三种:
字符串, XML, JSON
返回给浏览器的值的形式也有三种字符串, XML, JSON,但是实质上都是字符串.
处理服务器响应
XMLHttpRequest对象提供了两个可以用来访问服务器响应的属性,第一个属性responseText将响应提供为一个字符串,第二个属性responseXML将响应提供为一个XML对象.
这里我们对返回值的通常写法,通过responseText获取返回的字符串,再通过XDOM的解析器加载后,获取Document对象,再进行其他操作
var back_val = xmlHttp.responseText;
var xmlDoc=loadXMLString(back_val);

这里有一个二合一的写法:
var xmlDoc = xmlHttp. responseXML;
这样可以直接获取Document对象,再进行其他操作


使用innerHTM属性创建动态内容
此属性是一个非标准的属性,最早在IE中实现,后来也为其他许多流行的浏览器所采用,这是一个简单的串,表示一组开始标记和结束标记之间的内容.

向服务器值的两种方式
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方式传值就是我们平时使用的超链接传值方式差不多,就是用?,&方式通过key=value的方式传到Servlet,Servlet中可以通过getParamter的方式来获取值.

如果传的值中有中文的话,需要进行转码:
xmlHttp.open("GET","<%=basePath%>/LoginServlet?userName="+encodeURI(userName)+"&time=" + new Date().getTime(),true);
Servlet中接收时可以转回来
String userName = request.getParameter("userName");
userName = new String(userName.getBytes(("ISO-8859-1")),"utf-8");

Get方式:
用get方式可传送简单数据，但大小一般限制在1KB下，数据追加到url中发送（http的header传送），也就是说，浏览器将各个表单字段元素及其数据按照URL参数的格式附加在请求行中的资源路径后面。另外最重要的一点是，它会被客户端的浏览器缓存起来，那么，别人就可以从浏览器的历史记录中，读取到此客户的数据，比如帐号和密码等。因此，在某些情况下，get方法会带来严重的安全性问题。

POST方式传值
<%@page contentType="text/html; charset=utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set var="basePath" value="${pageContext.request.contextPath}" />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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;
   }
   //获取用户名及密码//页面文档中的参数
   var username = document.getElementById("username").value;
   var password = document.getElementById("password").value;
   var queryString = "username=" + username + "&password=" + password;

   //发送请求,处理结果
   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(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方式没有什么太大的区别,
同样的也需要拼装字符串
var queryString = "username=" + username + "&password=" + password;
同样的也需要传一个时间戳
xmlHttp.open("POST","${basePath}/PostServlet?time=" + new Date().getTime());
语法部分不同的地方:
open("POST"…)用的是POST, PostServlet?time="这里只打问号传了一个时间戳,没有传用户名和密码过去
需要加上一句: xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
send方法需要传拼装好的参数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方式:
当使用POST方式时，浏览器把各表单字段元素及其数据作为HTTP消息的实体内容发送给Web服务器，而不是作为URL地址的参数进行传递，使用POST方式传递的数据量要比使用GET方式传送的数据量大的多。

向服务器传送XML
<%@page contentType="text/html; charset=utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set var="basePath" value="${pageContext.request.contextPath}" />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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数据类型向服务器传送对象
在前面我们已经看到可以向服务器传送XML数据类型,需要注意的是后台接收时是采用字符流的形式来获取的.

什么是JSON数据类型?
它就是我们以前学JS自定义对象中的对象直接量的写法.
比如我们定义一个学生类,可以这样写:
var student = {
"uname":"张三",
"age":22,
"address":"武汉"
};
定义一个学生对象数组,可以这样写
var students=[{
"uname":"张三",
"age":22,
"address":"武汉"
},
{
"uname":"李四",
"age":22,
"address":"武汉"
}];
我们在调用这个对象时,可以这样直接调用:
alert(students[0].uname);
alert(students[1].uname);

在Ajax中,可以将这种以”{“开始,以”}”的字符串传送到后台,服务器接收后,可以像对象一样使用前台传过来的数据
它相对比XML的优势:
Json有一点很引以为豪, 这就是它是一个轻量级的数据互换格式,如果用XML来描述同样的学生对象,如下所示:
<student>
<uanme>张三</uanme>
<age>22</age>
<address>武汉</address>
</student>
显然:JSON编码比XML编码精简许多.JSON编码比较小,所以如果在网络上发送大量数据,可能会带来显著的性能差别.

通过JSON数据类型,我们向服务端发送我们的JS自定义对象,有助于我们的程序更符合面向对象的理念.
JSON提供了两个插件供我们使用
json2.js 此JS文件提供了方法,可以将我们new 的自定义对象,转换为{..}这种格式
json.jar 此Jar包提供了方法,供我们解析{…}这种格式的数据.

示例:
<%@page contentType="text/html; charset=utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set var="basePath" value="${pageContext.request.contextPath}" />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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();
}
}
分享到：
| iframe父子页面互相调用、控制
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Ajax传值到java的方法中

    Ajax传值到Java方法中的实现 Ajax技术是当前Web开发中最流行的技术之一，能够实现页面的异步刷新和数据交互。但是，Ajax传值到Java方法中的实现却不是那么简单，需要了解Ajax的原理和Java的Web开发机制。 首先，...

    asp.net的ajax传值

    在ASP.NET中，实现AJAX传值通常涉及到以下关键知识点： 1. **UpdatePanel**：ASP.NET AJAX控件工具箱中的UpdatePanel是实现部分页面更新的基础。它可以将一个或多个控件包裹起来，当这些控件触发事件时，...

    AJAX传值与评论实例

    **AJAX传值与评论实例详解** 在Web开发中，AJAX（Asynchronous JavaScript and XML）是一种不刷新整个页面即可实现局部数据更新的技术。通过AJAX，我们可以向服务器异步发送请求，获取数据并动态更新页面，从而提高...

    通过Jquery实现Ajax传值.rar

    本示例“通过Jquery实现Ajax传值.rar”着重讲解如何在MVC（Model-View-Controller）架构中利用jQuery的Ajax功能来传递数据，避免了传统表单提交带来的页面刷新问题。 首先，理解MVC模式是至关重要的。MVC是一种软件...

    ajax实现完美传值

    AJAX传值，由于自己最近在开发一个项目，需要在动态控件的事件中，运用JS技术实现增改查删功能，由于删除功能我不想另外建立页面，所以就一直有问题。学习视频，查看各种资料，终于弄明白了是怎么回事，真心不容易 ...

    CakePHP使用ajax传值

    CakePHP框架中实现Ajax传值是通过AJAX (Asynchronous JavaScript and XML) 技术与后端的CakePHP控制器进行数据交换的一种方式。通常在Web开发中，Ajax用于创建更为动态和响应快速的用户界面。当用户与页面上的元素...

    ajax传值到servlet

    以上就是关于“ajax传值到servlet”的详细知识点，涵盖了Ajax请求的创建、数据传递、Servlet接收与处理、以及响应的处理等多个方面。在实际开发中，这些知识能帮助我们构建更加流畅的用户交互体验。

    原生ajax传值

    遇到一个问题需要用原生ajax传值

    jquery的get()方法ajax传值php实例

    在Web开发中，jQuery是一个非常流行的JavaScript库，它极大地简化了DOM操作、事件处理和Ajax交互。本实例将深入探讨如何使用jQuery的`get()`方法进行Ajax请求，将数据传递到PHP服务器，并接收JSON格式的响应。让我们...

    jsp实现checkbox的ajax传值实例.docx

    这通常是通过AJAX（Asynchronous JavaScript and XML）技术来实现的。在本例中，我们将关注如何在JSP（JavaServer Pages）环境中，利用AJAX技术处理复选框（checkbox）的选择状态并传递其值到后台。以下是一个具体的...

    jQuery Ajax传值到Servlet出现乱码问题的解决方法

    在开发Web应用时，我们经常会遇到字符编码的问题，特别是在使用jQuery AJAX与Servlet进行交互时。本文将详细讨论如何解决jQuery AJAX向Servlet传递...遵循这些步骤，一般可以有效解决AJAX传值到Servlet时的乱码问题。

    .NET，C#（ajax 传值） 实现支付宝功能

    在.NET和C#环境下，通过Ajax技术实现实现支付宝支付功能是现代Web应用程序中的常见需求。这涉及到异步通信、接口调用以及第三方支付平台的API集成。以下将详细讲解这个过程涉及的关键知识点： 1. **Ajax技术**：...

    ajax例子servlet传值

    ### AJAX与Servlet交互详解 #### 一、引言 在Web开发中，AJAX（Asynchronous JavaScript and XML）技术被广泛应用于实现网页的部分更新而无需重新加载整个页面，从而提升了用户体验。本文将通过一个具体的例子来...

    jquery ajax 异步传值并把值赋予在div标签内

    jquery ajax 异步传值并把值赋予在div标签内 很简单的jquery ajax异步传值 让您清楚了解jquery ajax运作 点击按钮的时候 程序会通过ajax去获取某个PHP文件的输出值 获取PHP文件的输出值的那一刻下面的程序会继续执行...

    AJAX post 传值

    **AJAX（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。在本示例中，我们将深入探讨如何使用AJAX进行POST方法的数据传递，这对于前端与后端交互以及实现页面...

    ajax\HTML 页面与页面之间传值

    1. **利用URL参数传递**：最简单的页面间传值方法是通过URL查询字符串。在超链接或表单提交中，我们可以把参数附加到URL后面，例如`跳转&lt;/a&gt;`。在目标页面(child.html)中，可以通过`window.location.search`获取这些...

    jsp实现checkbox的ajax传值实例

    本文实例讲述了jsp实现checkbox的ajax传值用法。分享给大家供大家参考。具体分析如下： 今天我想用ajax把选中的所有的chekbox的值全部都传到后台做一个处理，但在后台接收值的时候，我遇到了麻烦，以为没有经过跳转...

    ajax请求传值Struts2+jsp

    在Web开发中，AJAX（Asynchronous JavaScript and XML）是一种技术，用于在不刷新整个页面的情况下与服务器交换数据并更新部分网页内容。本教程将详细讲解如何在Struts2（版本2.3.24.1）框架下，结合JSP页面实现AJAX...

    ajax返回datatable绑定下拉框.docx

    Ajax 返回 DataTable 绑定下拉框 Ajax 是一种使用 JavaScript 和 XML 实现异步请求的技术，主要用于在不刷新整个网页的情况下更新页面的一部分内容。在这个示例中，我们将使用 Ajax 来从服务器端获取数据，并将其...

Magicbox
Global site tag (gtag.js) - Google Analytics