伤城文章网 > 计算机软件及应用 > ajax应用的基本流程及简单实例

ajax应用的基本流程及简单实例


ajax 应用的基本流程 1、从 web 表单中获取需要的数据 2 、建立到服务器的 url 3 、打开到服务器的连接 4、 设置服务器在完成后要运行的函数 5 、发送请求
getAndPostExamplel.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>getAndPostExamplel.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> <script type="text/javascript"> var xmlHttp; //创建XMLhttpRequest对象 function createXMLHttpRequest() { if (window.ActiveXObject) { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");//ie } 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; } //点击按钮响应的Get方法主函数 //Get方法把参数值以名=值方式在xmlHttp.open("GET", queryString, true) 中传递,queryString的形式为URL?参数名=值&参数名=值...;而xmlHttp.send(null); //火狐

function doRequestUsingGET() { createXMLHttpRequest();//第一步:创建XMLHttpRequest对象 var queryString = "GetAndPostExample?"; queryString = queryString + createQueryString() + "&timeStamp=" + new Date().getTime();//第二步:定义传递的参数 值字符串 xmlHttp.open("GET", queryString, true);//第三步:建立与服务器的 请求 xmlHttp.onreadystatechange = handleStateChange;//第四步:监听 状态-->转到监听状态函数 xmlHttp.send(null);//第五步:发送请求,并且立即返回 } //点击按钮响应的POST方法主函数 //POST方法把参数值以名=值方式在xmlHttp.send(queryString)中传 递,queryString的形式为参数名=值&参数名=值...; function doRequestUsingPOST() { createXMLHttpRequest();//第一步:创建XMLHttpRequest对象 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();//-->转到函数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>Enter your first name, middle name, and birthday:</h1> <table> <tbody> <tr> <td>First name:</td> <td><input type="text" id="firstName"/> </tr> <tr> <td>Middle name:</td> <td><input type="text" id="middleName"/> </tr> <tr> <td>Birthday:</td> <td><input type="text" id="birthday"/> </tr> </tbody> </table> <form action="#"> <input type="button" value="Send parameters using GET" onclick="doRequestUsingGET();"/><!--调用Get方法主函数--> <br/><br/> <input type="button" value="Send parameters using POST" onclick="doRequestUsingPOST();"/><!--调用POST方法主函数--> </form> <br/> <h2>Server Response:</h2> <div id="serverResponse"></div> </body> </html>

package com.ajax1; 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 GetAndPostExample extends HttpServlet { protected void processRequest(HttpServletRequest request, HttpServletResponse response, String method) throws ServletException, IOException { //把响应内容类型设置为 text/xml response.setContentType("text/xml"); //得到用户参数值 String firstName = request.getParameter("firstName"); String middleName = request.getParameter("middleName"); String birthday = request.getParameter("birthday"); //生成包含用户参数值的返回字符串 String responseText = "Hello " + firstName + " " + middleName + ". Your birthday is " + birthday + "." + " [Method: " + method + "]"; //写回浏览器 PrintWriter out = response.getWriter(); out.println(responseText); out.close(); } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //Get主函数调用processRequest,完成Get方法的参数接受, 返回的过程 processRequest(request, response, "GET"); } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //POST主函数调用processRequest,完成POST方法的参数接受, 返回的过 程 processRequest(request, response, "POST"); } }


搜索更多“ajax应用的基本流程及简单实例”

网站地图

All rights reserved Powered by 伤城文章网 5xts.com

copyright ©right 2010-2021。
伤城文章网内容来自网络,如有侵犯请联系客服。zhit325@126.com