Ajax已经是很古老的话题了,可对于我这类的菜鸟来说"车轮"还是很有必要来造的,通过几个月来的工作体验,让我深深的感受到了基础的重要性,有一个人之前跟我说过这样一句话"当你有一天真正感受到基础的重要性时,那么你就逐步在走向更高层次的迈进",那会我是不以为然,而今让我深受体会,也在其中栽了大跟头,......今天这里就来做一下简单的Ajax封装类的应该!!!
这是Servlet代码:
package com.huawei.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;
/**
*
* @name 何枫
* @date 2011-3-23
* @action AjaxServlet.java
* @time 下午11:47:06
* @package_name com.huawei.servlet
* @project_name ajaxTest
*/
public class AjaxServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
System.out.println("doGet方式来请求");
process(request, response);
}
//抽取方法()
private void process(HttpServletRequest request,
HttpServletResponse response) throws IOException {
String v1 = request.getParameter("v1");
String v2 = request.getParameter("v2");
System.out.println("v1=" + v1 +", v2=" + v2);
String v3 =String.valueOf(Integer.valueOf(v1)+Integer.valueOf(v2));
PrintWriter out = response.getWriter();
// try {
// Thread.sleep(5000);
// } catch (InterruptedException e) {
// // TODO Auto-generated catch block
// e.printStackTrace();
// }
//System.out.println("doGet方法调用!!!");
//清空缓存的小技巧
response.setHeader("pragma", "no-cache");
response.setHeader("cache-control", "no-cache;");
out.print(v3);
out.flush();
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponseresponse)
throws ServletException, IOException {
System.out.println("doPost方式来请求");
this.process(request, response);
}
}
这是Ajax简单封装的核心代码:
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<html>
<head>
<meta http-equiv="pragma" content="no-cache; charset=ISO-8859-1">
<meta http-equiv="cache-control" content="no-cache; charset=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript">
//var xmlHttpRequest = null; //声明一个空对象以接收XMLHttpRequest对象
/*
function Ajax(){
if(window.ActiveXObject) //IE浏览器
{
xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest) //除IE外的其他浏览器实现
{
xmlHttpRequest = new XMLHttpRequest();
}
//xmlHttpRequest = window.XMLHttpRequest ? new ActiveXObject("Microsoft.XMLHTTP"):new XMLHttpRequest() ;
if(null != xmlHttpRequest)
{
v1 = document.getElementById("value1ID").value;
v2 = document.getElementById("value2ID").value;
//Servlet doGet方式来请求
//xmlHttpRequest.open("GET","AjaxServlet?v1=" + v1 + "&v2=" + v2,true);
xmlHttpRequest.open("POST","AjaxServlet",true);
//关联好ajax的回调函数
xmlHttpRequest.onreadystatechange = ajaxCallback;
//真正向服务器端发送数据
//xmlHttpRequest.send(null);
//Servlet doPost方式来请求
//用doPost提交必须加上如下一行
xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlHttpRequest.send("v1=" + v1 + "&v2=" + v2);
}
}
*/
function ajax(getorpost,url,data){
var xmlHttpRequest;
if(window.ActiveXObject){ //IE浏览器
xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");
}
else{//除IE外的其他浏览器实现
xmlHttpRequest = new XMLHttpRequest();
}
var statechange = function(){
if(xmlHttpRequest.readyState == 4)
{
if(xmlHttpRequest.status == 200)
{
var responseText = xmlHttpRequest.responseText;
document.getElementById("div1").innerHTML=responseText;
}
}
};
//关联好ajax的回调函数
xmlHttpRequest.onreadystatechange = statechange;
if(getorpost=="post"){
xmlHttpRequest.open(getorpost,"AjaxServlet ",true);
//用doPost提交必须加上如下一行
xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlHttpRequest.send("v1=" + v1 + "&v2=" + v2);
}
//Servlet doGet方式来请求
else if(getorpost=="get"){
xmlHttpRequest.open(getorpost,url,true);
//真正向服务器端发送数据
xmlHttpRequest.send(null);
}
}
function test(){
v1 = document.getElementById("value1ID").value;
v2 = document.getElementById("value2ID").value;
var URL= "AjaxServlet?v1=" + v1 + "&v2=" + v2;
new ajax("get",URL,true);
}
</script>
</head>
<body>
<input type="button" value="get content from server" onclick="test();"><br/>
<input type="text" name="value1" id="value1ID"><br/>
<input type="text" name="value2" id="value2ID"><br/>
<div id="div1"></div>
</body>
</html>
这里是jQuery的Ajax的应用,相比上面的简单了一大把!
servlet的dopost方法
/*
* 清除页面缓存!!!
*/
response.setHeader("pragma", "no-cache");
response.setHeader("cache-control", "no-cache");
int parm1 = Integer.parseInt(request.getParameter("parm1"));
int parm2 = Integer.parseInt(request.getParameter("parm2"));
PrintWriter out = response.getWriter();
out.print(String.valueOf(parm1+parm2));
out.flush();
======================================================
<%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<script type="text/javascript" src="javascript/jquery-1.4.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#button1").click(function(){
//alert("EEE");
$.ajax({
url: "jsonServlet",
type: "GET",
dateType: "html",
data: {'parm1':$("#parm1").val(), 'parm2':$("#parm2").val()},
success: function(returnedData){
$("#text1").val(returnedData);
}
});
});
});
</script>
</head>
<body>
<input type="text" id="parm1"/>+
<input type="text" id="parm2"/>=
<input type="text" id="text1" />
<input type="button" id="button1" value="ckick Servlet">
</body>
</html>
分享到：
相关推荐
"简单封装，使用简单"意味着这个AJAX类设计的目标是易于理解和应用，可能减少了复杂的配置选项，更注重易用性。 **标签分析：** "AJAX类"标签表明这是一个与AJAX相关的代码实现，可能是一个JavaScript对象或函数，...
### AJAX代码及简单封装知识点详解 #### 一、引言 AJAX（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换来实现这一功能...
【简单封装Ajax】这篇文章主要探讨的是如何在JavaScript中对原生的XMLHttpRequest对象进行简单的封装，以便于在实际开发中更方便地进行异步数据请求。在Web开发中，Ajax（Asynchronous JavaScript and XML）是一种...
**AjaxTest 实用简单封装** Ajax（Asynchronous JavaScript and XML）技术是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换，使网页实现异步更新，大大提升了...
8. **jQuery和其他库**：jQuery等JavaScript库封装了AJAX操作，使其变得更简单易用。例如，$.ajax()、$.get()和$.post()是jQuery中的AJAX函数，它们提供了更友好的API和更丰富的功能。 9. **Promise和async/await**...
这个压缩包"原生js的AJAX封装以及实例展示.zip"包含了对AJAX的简单封装以及一个具体的增删改查（CRUD）操作实例，这将帮助我们深入理解如何在实际项目中应用AJAX。 首先，让我们了解一下AJAX的基本原理。AJAX的核心...
以下是一个简单的Ajax函数封装示例： ```javascript function ajaxRequest(url, method, callback, data) { var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (xhr.readyState === 4 ...
**简单Ajax示例：** ```javascript var xhr = new XMLHttpRequest(); xhr.open('GET', 'data.json', true); xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { var data ...
**AJAX（Asynchronous JavaScript and XML）*...综上所述，AJAX简单易用模式主要涉及异步通信、数据格式、跨域策略、库的封装和现代编程范式。理解并熟练运用这些知识点，可以帮助开发者构建更加互动和高效的网页应用。
总之，“ajax封装的dll”是一个将Ajax功能模块化的实践，它旨在提供一种方便、高效的方式来处理Web应用程序中的异步请求。通过合理利用和管理这样的DLL，开发者可以更好地组织代码，提高开发效率，但同时也需要注意...
以下是一个简单的Ajax封装示例： ```javascript function ajax(url, type, callback, data) { var xhr = new XMLHttpRequest(); xhr.open(type, url, true); // 如果是POST请求，设置请求头 if (type === '...
**Ajax技术简单应用** Ajax（Asynchronous JavaScript and XML）是一种在无需刷新整个网页的情况下，能够更新部分网页的技术。它的核心是利用JavaScript与服务器进行异步数据交换，通过XML或者JSON格式传输数据，...
DWR通过JavaScript接口封装了底层的Ajax通信，使得Web应用的开发变得更加高效和便捷。 总结来说，Ajax技术通过异步通信提高了用户体验，减少了页面的加载时间，而DWR等框架进一步简化了开发过程，使得Ajax的应用...
**Ajax（Asynchronous JavaScript and XML）**是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。...同时，现代前端框架如React、Vue和Angular等都提供了对Ajax操作的高级封装，简化了开发者的工作。
在Web开发中，Ajax（Asynchronous JavaScript and XML）技术被广泛应用于实现页面的异步更新，提升用户体验。jQuery库通过其简单易用的API，极大地简化了Ajax操作，使得开发者无需关注底层的XMLHttpRequest对象，...
在这个“小程序使用es6封装ajax源码案例”中，我们将深入探讨如何利用ES6的Promise和模块化特性来优雅地实现Ajax请求，并将其应用到微信小程序的开发中。 首先，让我们理解一下核心概念： 1. **ES6**：这是...
这个Web项目实例展示了如何利用jQuery封装的AJAX功能实现异步加载，通过与Servlet配合，实现了客户端与服务器间JSON数据的交换。理解这些概念和实践，对于提升Web应用的用户体验和性能至关重要。通过深入学习和实践...
在这个例子中，我们看到一个简单的Ajax应用，用于向后台发送数据并接收响应。 首先，页面中引入了jQuery库，这使得Ajax操作更加简便。`myajax`函数是封装的Ajax方法，它使用jQuery的`$.ajax`方法。`type`参数设置为...
通过封装，我们可以将复杂的Ajax交互抽象成简单易用的类或函数，使得开发者可以专注于业务逻辑，而不是底层的网络通信细节。了解和掌握Ajax封装，对于提升Web应用的用户体验和开发效率有着显著的帮助。
以下是一个简单的Ajax类结构： ```javascript class AjaxRequest { constructor(url) { this.url = url; this.timeout = 5000; // 默认超时时间为5秒 this.request = null; } send() { if (this.request) {...