AJAX技术（4）

来源：互联网发布：淘宝水果店铺营业介绍编辑：程序博客网时间：2024/06/07 04:45

之前的AJAX技术都是处理服务器响应。

1、可以利用inHTML属性创建动态内容。

2、将响应解析为XML。

3、使用W3C DOM动态编辑页面。

现在利用AJAX技术发送请求参数。

方法一：使用基本的GET和POST方法。

实例：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>AJAX应用实例四</title><script type="text/javascript">var xhr ;function createXMLHttpRequest(){if(window.ActiveXObject){//ie浏览器xhr = new ActiveXObject("Microsoft.XMLHttp");}else if(window.XMLHttpRequest){//非ie浏览器xhr = new XMLHttpRequest();}}//得到用户输入的姓名和生日，将要传送给服务器的数据利用这个函数封装起来function createRequestString(){var firstname = document.getElementById("firstname").value;var middlename = document.getElementById("middlename").value;var birthday = document.getElementById("birthday").value;var requestString = "firstname="+firstname+" &middlename="+middlename+"&birthday="+birthday;return requestString;}//get方法function doRequstUsingGET(){createXMLHttpRequest();xhr.onreadystatechange = handleResponse;//将数据从这里传过去xhr.open("GET","getAndPostDemo?"+createRequestString()+"×tamp ="+new Date().getTime(),"true");xhr.send(null);}function doRequestUsingPOST(){createXMLHttpRequest();xhr.onreadystatechange = handleResponse;xhr.open("POST", "getAndPostDemo?timestamp = "+new Date().getTime(), true);xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;")xhr.send(createRequestString());}function handleResponse(){if(xhr.readyState==4){if(xhr.status == 200){var responseDiv = document.getElementById("serverResponse");//清楚之前responseDiv中可能有的内容if(responseDiv.hasChildNodes()){responseDiv.removeChild(responseDiv.childNodes[0]);}var responseText = document.createTextNode(xhr.responseText);responseDiv.appendChild(responseText);}}}</script></head><body><h1>Enter 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 = "doRequstUsingGET();"/><br/><br/><input type = 'button' value = 'Send parameters using POST' onclick = "doRequestUsingPOST();" /><br/><h2> Server Response:</h2><div id = "serverResponse" ></div></form></body></html>

2、GetAndPostServlet.java

package servlet;import java.io.IOException;import java.io.PrintWriter;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;public class GetAndPostServlet extends HttpServlet {public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {String firstName = request.getParameter("firstname");String middleName = request.getParameter("middlename");String birthday = request.getParameter("birthday");System.out.println(birthday);response.setContentType("text/xml");PrintWriter out = response.getWriter();String responseText = "Hello:"+firstName+""+middleName+", your Birthday is "+birthday;out.println(responseText);out.flush();out.close();}//和get方法的代码基本相同public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {String firstName = request.getParameter("firstname");String middleName = request.getParameter("middlename");String birthday = request.getParameter("birthday");response.setContentType("text/xml");PrintWriter out = response.getWriter();String responseText = "Hello:"+firstName+""+middleName+", your Birthday is "+birthday;out.println(responseText);out.flush();out.close();}}

虽然这个例子很简单。但是还是遇见了很多错误。比如说在向服务器传参数的时候，值一直传不过去。原因是因为取值的时候空格的问题。

0 0