`

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父子页面互相调用、控制
评论
发表评论

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

相关推荐

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