- 浏览: 53192 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
hw361062491:
mac 系统在那里配置呢???
Vibrant Ink Theme for IntelliJ IDEA -
godspeed666:
请教个问题,我第一次使用idea写s2sh,遇到个问题,str ...
IntelliJ IDEA 目录技巧 -
gongmingwind:
最后没有结束啊
LDAP学习者必看 -
spiritfrog:
没有图吗?
Vibrant Ink Theme for IntelliJ IDEA -
matrixbug:
SB!BS!
openldap界面管理工具—JXplorer
发送请求参数
Ø 目前我们已经讲了
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
>>>转载请注明出处!<<<
发表评论
-
jQuery中文入门指南,翻译加实例,jQuery的起点教程
2008-08-26 01:43 796jQuery中文入门指南,翻译加实例,jQuery的起点教程 ... -
AJAX基础与实践(一)
2008-08-26 02:29 762AJAX历史 Ø 2005年2月, Adaptive ... -
AJAX基础与实践(二)
2008-08-26 02:31 1044XMLHttpRequest(XHR) Ø 浏览器可以 ... -
AJAX基础与实践(三)
2008-08-26 02:39 734创建XHR发送请求 Ø 如下: ... -
AJAX基础与实践(四)
2008-08-26 02:42 742responseXML 将响应解析为XML Ø 浏览器 ... -
AJAX基础与实践(六)
2008-08-26 02:57 828AJAX以 JSON 发送请求数据 Ø 使用XML 向 ...
相关推荐
在"ajax基础与实践教程(含php json实例)"中,可能包含了如何使用Ajax与PHP结合,通过JSON进行数据交换的详细步骤。例如,创建一个PHP脚本生成JSON数据,然后在JavaScript中创建Ajax请求,解析返回的JSON数据并更新...
**AJAX基础与实践** AJAX(Asynchronous JavaScript and XML)是一种在不重新加载整个网页的情况下,能够更新部分网页的技术。这种技术的核心在于利用JavaScript创建XMLHttpRequest对象,通过这个对象与服务器进行...
**Ajax基础与实践教程** Ajax,全称Asynchronous JavaScript and XML,是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换,使网页实现异步更新。Ajax的核心是...
1. **XMLHttpRequest对象**:Ajax的基础,用于在后台与服务器通信。理解它的生命周期、方法(如open、send、onreadystatechange等)以及状态码是掌握Ajax的关键。 2. **数据格式**:虽然名字中包含XML,但现代Ajax...
## **一、Ajax基础概念** 1. **异步通信**:Ajax的核心是JavaScript对象XMLHttpRequest,它允许在后台与服务器进行通信,不阻塞用户对页面的操作。 2. **局部刷新**:Ajax可以只更新网页的部分区域,而不是整个页面...
**第一章 - Ajax基础** 在这一章中,你将学习到Ajax的基本概念,包括异步通信的重要性、XMLHttpRequest对象的使用以及如何创建简单的Ajax请求。了解如何通过JavaScript与服务器进行交互,实现页面内容的动态加载,...
Ajax(Asynchronous JavaScript and XML)是一种在...Ajax是Web开发中的重要技术,理解并掌握Ajax的基本原理和实践,能帮助你构建更加动态、响应式的网页应用。通过不断练习和项目实战,你可以更好地理解和运用Ajax。
### AJAX基础知识点详解 #### 一、AJAX概述 **AJAX**,全称为 **Asynchronous JavaScript and XML**(异步JavaScript与XML),是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。通过在后台与服务器...
**AJAX基础详解** 在现代Web开发中,AJAX(Asynchronous JavaScript and XML)是一种核心技术,它使得网页能够实现异步数据交换,无需刷新整个页面即可更新部分内容。本教程将深入探讨AJAX的基础知识,帮助你理解其...
**五、AJAX实践** 在实际应用中,我们常使用库如jQuery、axios等简化AJAX操作。例如,使用jQuery的$.ajax()方法: ```javascript $.ajax({ url: 'url', type: 'GET', dataType: 'json', success: function(data)...
**Ajax(Asynchronous JavaScript and XML)**是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。...通过阅读"Ajax基础教程中文版",你可以深入了解Ajax的工作原理,学会如何在实践中运用它。
这个名为“Ajax基础与实战.jar”的压缩包,很可能包含了学习和实践Ajax技术的相关资料。 在学习Ajax的基础知识时,你需要了解以下几个关键点: 1. **XMLHttpRequest对象**:这是Ajax的核心,用于在后台与服务器...
在文章的最后部分,作者分享了自己的学习经历,提到了通过与专家的互动以及多次的交流和编程实践,能够更快地深入理解AJAX技术,并掌握相关的开发技巧。这也从另一个侧面强调了实践经验对于学习编程技术的重要性。
**标题:“AJAX基础教程-5 Ajax Validate”** 在学习Web开发时,AJAX(Asynchronous JavaScript and XML)技术是一个重要的组成部分,它允许我们在不刷新整个页面的情况下与服务器进行交互,提升用户体验。本教程...
Ajax 入门与实践 Ajax 是基于 XML 的异步 JavaScript, 是当前 Web 创新的重要组成部分。Ajax 这个术语源自描述从基于同页的 Web 应用到基于数据应用的转换。在基于数据的应用中,用户需要的数据,如联系人列表,...
**AJAX基础到精通教程** AJAX(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换,使网页实现异步更新,大大提升了用户...
**Ajax基础教程** Ajax(Asynchronous JavaScript and XML)是一种在无需刷新整个网页的情况下,能够更新部分网页的技术。这种技术在现代Web开发中被广泛应用,极大地提升了用户体验,因为它允许页面在后台与服务器...
**Ajax基础教程** Ajax(Asynchronous JavaScript and XML)是一种在无需刷新整个网页的情况下,能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换,使网页实现异步更新,提升了用户体验,使得用户在...
**Ajax(Asynchronous JavaScript and XML)**是一种在无需重新加载整个网页...无论是前端开发者还是全栈工程师,都需要对Ajax有深入的理解和实践。通过学习和运用Ajax,我们可以构建更加互动、高效和流畅的网页应用。
涵盖Web应用的发展,Ajax基础,Web通讯,XMLHttpRequest对象详解,同时详细讲解和推荐了Ajax开发工具箱,例如JSDoc,Firefox拓展,DOMInspector,JSLint等等,以及JsUnit测试等。同时为了提升前端技术,第八章详细...