`
yifeng
  • 浏览: 52960 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

AJAX基础与实践(五)

    博客分类：
  • Ajax
AjaxServletXMLJavaScriptJavaEE 
阅读更多
 

发送请求参数

Ø 目前我们已经讲了

1、 使用Ajax技术向服务器发送请求

2、 也知道了可以采用多种方法解析服务器的响应。

Ø 只缺少一个内容，就是未将任何数据作为请求的一部分发送给服务器。

GET方法发送请求参数

Ø GET方法：作为名/值对放在请求URL 中传递。

      *　资源URL 的问号后面就是名/值对。

      *　名/值对用 name=value 的形式，

       *  用与号(&)分隔。

Ø 例如：

http://localhost:8080/projectName?name=yifeng&password=hello

POST 方法发送请求参数

Ø POST 方法：将参数串放在请求体中发送。

*　参数编码为名/值对，形式为name=value，

*　用与号(&)分隔。

使用GET和POST的建议

Ø 获取数据时应当使用GET 方法。

    *　数据处理不改变数据模型的状态。

Ø 存储、更新数据，使用POST 方法。

    *　操作改变了数据模型的状态。

Ø 特点。

*　GET 请求的参数编码到请求URL 中，可以为该URL 建立书签。（不过，如果是异步请求就没有什么用。）

*　GET 请求发送的数据量通常是固定的，而POST 方法可以发送任意量的数据。

DEMO AJAX以名/值对发送请求参数

Ø 使用GET请求和POST请求，创建查询字符串技术是一样的。

Ø 唯一的区别是，GET发送请求时，查询字符串追加到请求URL中，

Ø POST方法时，在XHR对象的send()方法时发送查询串。

Ø DEMO

n getAndPostExample.html文件

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

        "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

    <title>Dynamically Editing Page Content</title>

    <script type="text/javascript" language="javascript">

        var xmlHttp;

        function createXMLHttpRequest() {

            if (window.ActiveXObject) {

                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

            } else if (window.XMLHttpRequest) {

                xmlHttp = new XMLHttpRequest();

            }

        }

        function createQueryString() {

            var firstName = document.getElementById("firstName").value;

            var middleName = document.getElementById("middleName").value;

            var birthday = document.getElementById("birthday").value;

            var queryString = "firstName=" + firstName + "&middleName=" + middleName + "&birthday=" + birthday;//名/值对

            return queryString;

        }

        function doRequestUsingGET() {

            createXMLHttpRequest();

            var queryString = "GetAndPostExample?";

            queryString = queryString + createQueryString() + "&timeStamp=" + new Date().getTime();

            xmlHttp.onreadystatechange = handleStateChange;

            xmlHttp.open("GET", queryString, true);

            xmlHttp.send(null);

        }

        function doRequestUsingPOST() {

            createXMLHttpRequest();

            var url = "GetAndPostExample?timeStamp=" + new Date().getTime();

            //相同方法生成名/值对

            var queryString = createQueryString();

            xmlHttp.open("POST", url, true);

            xmlHttp.onreadystatechange = handleStateChange;

            xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

            xmlHttp.send(queryString);

        }

        function handleStateChange() {

            if (xmlHttp.readyState == 4) {

                if (xmlHttp.status == 200) {

                    parseResults();

                }

            }

        }

        function parseResults() {

            var responseDiv = document.getElementById("serverResponse");

            if (responseDiv.hasChildNodes()) {

                responseDiv.removeChild(responseDiv.childNodes[0]);

            }

            var responseText = document.createTextNode(xmlHttp.responseText);

            responseDiv.appendChild(responseText);

        }

    </script>

</head>

<body>

<h1>Entery your first name, middle name, and birthday:</h1>

<table>

    <tbody>

        <tr>

            <td>First name:</td>

            <td><input type="text" id="firstName"/></td>

        </tr>

        <tr>

            <td>Middle name:</td>

            <td><input type="text" id="middleName"></td>

        </tr>

        <tr>

            <td>Birthday:</td>

            <td><input type="text" id="birthday"/></td>

        </tr>

    </tbody>

</table>

<form action="#">

    <input type="button" value="Send parameters using GET" onclick="doRequestUsingGET();"/>

    <br/><br/>

    <input type="button" value="Send parameters using POST" onclick="doRequestUsingPOST();"/>

</form>

<br/>

<h2>Server Response:</h2>

<div id="serverResponse"></div>

</body>

</html>

n GetAndPostExample.java文件

package org.yifeng.webapp.servlet;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import javax.servlet.ServletException;

import java.io.IOException;

import java.io.PrintWriter;

/**

 * Copyright:       晟软科技

 * WebSit:          http://www.shengruan.com

 * Author:          忆风

 * QQ:              583305005

 * MSN:             YiFengs@msn.com

 * Email:           zhdqCN@gmail.com

 * CreationTime:    2008-8-25 22:44:44

 * Description:

 */

public class GetAndPostExample extends HttpServlet {

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        response.setContentType("text/xml");

        String firstName = request.getParameter("firstName");

        String middleName = request.getParameter("middleName");

        String birthday = request.getParameter("birthday");

        StringBuilder responseText = new StringBuilder();

        responseText.append("Hello, ").append(firstName).append(" " + middleName)

                .append(". Your birthday is " + birthday + ".")

                .append("[Method: " + request.getMethod() + "]");

        PrintWriter out = response.getWriter();

        out.println(responseText);

        out.flush();

        out.close();

    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        doPost(request, response);

    }

}

n Web.xml配置

<?xml version="1.0" encoding="UTF-8"?>

<web-app xmlns="http://java.sun.com/xml/ns/javaee"

           xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

           xsi:schemaLocation="http://java.sun.com/xml/ns/javaee

                    http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"

           version="2.5">

    <servlet>

        <servlet-name>GetAndPostExample</servlet-name>

        <servlet-class>org.yifeng.webapp.servlet.GetAndPostExample</servlet-class>

    </servlet>

    <servlet-mapping>

        <servlet-name>GetAndPostExample</servlet-name>

        <url-pattern>/GetAndPostExample</url-pattern>

    </servlet-mapping>

    <welcome-file-list>

        <welcome-file>getAndPostExample.html</welcome-file>

    </welcome-file-list>

</web-app>

n 如果以点击“Send parameters using GET”按钮，如下图：

n 如果以点击“Send parameters using POST”按钮，如下图：

n 也许你会疑问，为什么要在URL后面追加时间呢？

* 有时浏览器会把多个XMLHttpRequest 请求的结果缓存在同一个URL.

* 如果对每个请求的响应不同，这就会带来不好的结果.

* 把当前时间戳追加到 URL的最后，就能确保URL 的唯一性，从而避免浏览器缓存结果.

* IE有这种缓存问题，但是Firefox没有。你可以去试试，哈哈。

AJAX以 XML 发送请求数据

Ø 只是使用一个包含名/值对的简单查询串，这可能不够健壮，

Ø 不足以向服务器传递大量复杂的模型变化.

Ø 可以应用XML

Ø 如何向服务器发送XML 呢?

Ø 可以把XML 作为请求体的一部分发送到服务器，

Ø 这与POST 请求中将查询串作为请求体的一部分进行发送异曲同工.

Ø 服务器可以从请求体读到XM L，并加以处理。

Ø DEMO

Ø postingXML.html

DEMO AJAX以 XML 发送请求数据

Ø 撰写“postingXML.html”文件，如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

        "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

    <title>Sending and XML Request</title>

    <script type="text/javascript">

        var xmlHttp;

        function createXMLHttpRequest() {

            if (window.ActiveXObject) {

                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

            } else if (window.XMLHttpRequest) {

                xmlHttp = new XMLHttpRequest();

            }

        }

        /**

         * 生成XML

         */

        function createXML() {

            var xml = "<pets>";

            var options = document.getElementById("petTypes").childNodes;

            var option = null;

            for (var i = 0; i < options.length; i++) {

                option = options[i];

                if (option.selected) {

                    xml = xml + "<type>" + option.value + "<"/type>";

                }

            }

            xml = xml + "<"/pets>";

            return xml;

        }

        function sendPetTypes() {

            createXMLHttpRequest();

            var xml = createXML();

            var url = "PostingXMLExample?timeStamp=" + new Date().getTime();

            xmlHttp.open("POST", url, true);

            xmlHttp.onreadystatechange = handleStateChange;

            xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

            xmlHttp.send(xml);

        }

        function handleStateChange() {

            if (xmlHttp.readyState == 4) {

                if (xmlHttp.status == 200) {

                    parseResults();

                }

            }

        }

        function parseResults() {

            var responseDiv = document.getElementById("serverResponse");

            if (responseDiv.hasChildNodes()) {

                responseDiv.removeChild(responseDiv.childNodes[0]);

            }

            var responseText = document.createTextNode(xmlHttp.responseText);

            responseDiv.appendChild(responseText);

        }

    </script>

</head>

<body>

<h1>Select the types of pets in your home:</h1>

<form action="#">

    <select id="petTypes" size="6" multiple="true">

        <option value="cats">Cats</option>

        <option value="dogs">Dogs</option>

        <option value="fish">Fish</option>

        <option value="birds">Birds</option>

        <option value="hamsters">Hamsters</option>

        <option value="rabbits">Rabbits</option>

    </select>

    <br/><br/>

    <input type="button" value="Submit Pets" onclick="sendPetTypes();"/>

</form>

<h2>Server Response:</h2>

<div id="serverResponse"></div>

</body>

</html>

Ø 撰写“PostingXMLExample.java”文件，如下：

package org.yifeng.webapp.servlet;

import org.w3c.dom.Document;

import org.w3c.dom.NodeList;

import org.xml.sax.SAXException;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import javax.servlet.ServletException;

import javax.xml.parsers.DocumentBuilderFactory;

import javax.xml.parsers.ParserConfigurationException;

import java.io.IOException;

import java.io.BufferedReader;

import java.io.ByteArrayInputStream;

/**

 * Copyright:       晟软科技

 * WebSit:         http://www.shengruan.com

 * Author:          忆风

 * QQ:              583305005

 * MSN:             YiFengs@msn.com

 * Email:           zhdqCN@gmail.com

 * CreationTime:    2008-8-25 23:30:41

 * Description:

 */

public class PostingXMLExample extends HttpServlet {

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        String xml = readXMLFromRequestBody(request);//获得XML字符串

        Document xmlDoc = null;

        try {

            xmlDoc = DocumentBuilderFactory.newInstance().newDocumentBuilder().parse(new ByteArrayInputStream(xml.getBytes()));

        } catch (SAXException e) {

            System.out.println("SAXException: " + e);

        } catch (ParserConfigurationException e) {

            System.out.println("ParserConfigurationException: " + e);

        }

        /**

         * Java与JavaScript均有W3C DOM的实现，比如getElementByTagName和getNodeValue方法

         */

        NodeList selectedPetTypes = xmlDoc.getElementsByTagName("type");

        String type = null;

        String responseText = "Selected Pets: ";

        for (int i = 0; i < selectedPetTypes.getLength(); i++) {

            type = selectedPetTypes.item(i).getFirstChild().getNodeValue();

            responseText = responseText + " " + type;

        }

        response.setContentType("text/xml");

        response.getWriter().print(responseText);

    }

    private String readXMLFromRequestBody(HttpServletRequest request) {

        StringBuilder xml = new StringBuilder();

        String line = null;

        try {

            BufferedReader reader = request.getReader();

            while ((line = reader.readLine()) != null) {

                xml.append(line);

            }

        } catch (Exception e) {

            System.out.println("Error reading XML: " + e.toString());

        }

        return xml.toString();

    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        doPost(request, response);

    }

}

Ø 运行，显示如下：




作者：周大庆（zhoudaqing）
网址：http://www.blogjava.net/yifeng
>>>转载请注明出处！<<<

分享到：
| AJAX基础与实践(四)
评论
发表评论

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

相关推荐

    ajax基础与实践教程(含php json实例)

    在"ajax基础与实践教程(含php json实例)"中，可能包含了如何使用Ajax与PHP结合，通过JSON进行数据交换的详细步骤。例如，创建一个PHP脚本生成JSON数据，然后在JavaScript中创建Ajax请求，解析返回的JSON数据并更新...

    AJAX的综合应用，AJAX基础与实践

    **AJAX基础与实践** AJAX（Asynchronous JavaScript and XML）是一种在不重新加载整个网页的情况下，能够更新部分网页的技术。这种技术的核心在于利用JavaScript创建XMLHttpRequest对象，通过这个对象与服务器进行...

    Ajax基础与实践教程（含源码）

    **Ajax基础与实践教程** Ajax，全称Asynchronous JavaScript and XML，是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换，使网页实现异步更新。Ajax的核心是...

    Ajax模式与最佳实践英文原版

    1. **XMLHttpRequest对象**：Ajax的基础，用于在后台与服务器通信。理解它的生命周期、方法（如open、send、onreadystatechange等）以及状态码是掌握Ajax的关键。 2. **数据格式**：虽然名字中包含XML，但现代Ajax...

    精通Ajax 基础概念.核心技术与典型案例

    ## **一、Ajax基础概念** 1. **异步通信**：Ajax的核心是JavaScript对象XMLHttpRequest，它允许在后台与服务器进行通信，不阻塞用户对页面的操作。 2. **局部刷新**：Ajax可以只更新网页的部分区域，而不是整个页面...

    AJax与PHP基础教程.

    **第一章 - Ajax基础** 在这一章中，你将学习到Ajax的基本概念，包括异步通信的重要性、XMLHttpRequest对象的使用以及如何创建简单的Ajax请求。了解如何通过JavaScript与服务器进行交互，实现页面内容的动态加载，...

    Ajax基础实例讲解

    Ajax（Asynchronous JavaScript and XML）是一种在...Ajax是Web开发中的重要技术，理解并掌握Ajax的基本原理和实践，能帮助你构建更加动态、响应式的网页应用。通过不断练习和项目实战，你可以更好地理解和运用Ajax。

    14ajax课程_AJAX基础_

    **AJAX基础详解** 在现代Web开发中，AJAX（Asynchronous JavaScript and XML）是一种核心技术，它使得网页能够实现异步数据交换，无需刷新整个页面即可更新部分内容。本教程将深入探讨AJAX的基础知识，帮助你理解其...

    AJAX基础教程

    **五、AJAX实践** 在实际应用中，我们常使用库如jQuery、axios等简化AJAX操作。例如，使用jQuery的$.ajax()方法： ```javascript $.ajax({ url: 'url', type: 'GET', dataType: 'json', success: function(data)...

    Ajax 基础教程中文版.pdf

    **Ajax（Asynchronous JavaScript and XML）**是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。...通过阅读"Ajax基础教程中文版"，你可以深入了解Ajax的工作原理，学会如何在实践中运用它。

    Ajax基础与实战.jar

    这个名为“Ajax基础与实战.jar”的压缩包，很可能包含了学习和实践Ajax技术的相关资料。 在学习Ajax的基础知识时，你需要了解以下几个关键点： 1. **XMLHttpRequest对象**：这是Ajax的核心，用于在后台与服务器...

    ajax入门基础教程

    在文章的最后部分，作者分享了自己的学习经历，提到了通过与专家的互动以及多次的交流和编程实践，能够更快地深入理解AJAX技术，并掌握相关的开发技巧。这也从另一个侧面强调了实践经验对于学习编程技术的重要性。

    AJAX基础教程－5 Ajax Validate

    **标题：“AJAX基础教程－5 Ajax Validate”** 在学习Web开发时，AJAX（Asynchronous JavaScript and XML）技术是一个重要的组成部分，它允许我们在不刷新整个页面的情况下与服务器进行交互，提升用户体验。本教程...

    Ajax的入门与实践.pdf

    Ajax 入门与实践 Ajax 是基于 XML 的异步 JavaScript， 是当前 Web 创新的重要组成部分。Ajax 这个术语源自描述从基于同页的 Web 应用到基于数据应用的转换。在基于数据的应用中，用户需要的数据，如联系人列表，...

    AJAX基础到精通教程

    **AJAX基础到精通教程** AJAX（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换，使网页实现异步更新，大大提升了用户...

    Ajax基础教程

    **Ajax基础教程** Ajax（Asynchronous JavaScript and XML）是一种在无需刷新整个网页的情况下，能够更新部分网页的技术。这种技术在现代Web开发中被广泛应用，极大地提升了用户体验，因为它允许页面在后台与服务器...

    ajax基础教程和ajax从入门到精通

    **Ajax基础教程** Ajax（Asynchronous JavaScript and XML）是一种在无需刷新整个网页的情况下，能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换，使网页实现异步更新，提升了用户体验，使得用户在...

    精通Ajax-基础概念、核心技术与典型案例 数据光盘

    **Ajax（Asynchronous JavaScript and XML）**是一种在无需重新加载整个网页...无论是前端开发者还是全栈工程师，都需要对Ajax有深入的理解和实践。通过学习和运用Ajax，我们可以构建更加互动、高效和流畅的网页应用。

    ajax框架与实践

    涵盖Web应用的发展，Ajax基础，Web通讯，XMLHttpRequest对象详解，同时详细讲解和推荐了Ajax开发工具箱，例如JSDoc,Firefox拓展，DOMInspector，JSLint等等，以及JsUnit测试等。同时为了提升前端技术，第八章详细...

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