`
aijuans
  • 浏览: 1558383 次
社区版块
存档分类
最新评论

ajax传统的方式制作ajax

    博客分类:
  • Ajax
阅读更多

//这是前台的代码

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
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>
 <meta http-equiv="pragma" content="no-cache">
 <meta http-equiv="cache-control" content="no-cache">
 <meta http-equiv="expires" content="0">   
 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
 <meta http-equiv="description" content="This is my page">
 <!--
 <link rel="stylesheet" type="text/css" href="styles.css">
 -->
 <script type="text/javascript">
  /*onload = function (){
    //这是判断浏览器是IE还是FireFox
    if(navigator.appName == 'Netscape'){
     alert('这是火狐浏览器');
    }else if(navigator.appName == 'Microsoft Internet Explorer')
    {
     alert('这是IE浏览器');
    }
     if(window.XMLHttpRequest)//判断浏览器是否属于Mozilla,Sofari
       {
           alert("firefox");
       }
        else if(window.ActiveXObject)//判断浏览器是否属于IE
       {
    alert('这是IE浏览器');
    }
   }*/
   
   
   
   //这是最传统的ajax
   //第一步:创建核心对象
   onload = function(){
   var xmlRequest = null;
   if (window.XMLHttpRequest)
      {// code for IE7+, Firefox, Chrome, Opera, Safari
       xmlRequest=new XMLHttpRequest();
      }
   else if(window.ActiveXObject)
     {// code for IE6, IE5
    
      xmlRequest=new ActiveXObject("Microsoft.XMLHTTP");
     }
   if(!xmlRequest)
   {
     
    alert("创建核心对象错误!!!");
    return fasle;
   }
   //第二部:打开并发送请求
   //1、这是get发送请求的方式,并且还带有参数
   /*
    第一个参数是请求的方式,最好的大写,第二个参数是请求的路径(这里的路径千万不要用到${pageContext,request.contextPath),也不要
    在前面加上'/',例如:/test?p=test&namecaohuan,这也会访问不到路径,第三个参数表示是异步进行还是同步进行,XMLHttpRequest
    对象如果要用于AJAX的话其open()方法的第三个参数必须设置为 true,一般我们ajx都是进行异步的操作,所以一般是true
   */
  /* xmlRequest.open('GET','test?p=test&name=caohuan',true);
   //发送请求,get发送请求并带有参数send中并不带有参数,只有post请求才带有参数
   xmlRequest.send();*/
   //2、这是post发送请求,并且带有参数
   xmlRequest.open('POST','test?p=test',true);
   //注意这里post发送请求带有参数的形式,要用post发送请求带有参数,必须要加上下面的第一行的代码,否则后台根本接收不到参数
   xmlRequest.setRequestHeader("Content-type","application/x-www-form-urlencoded");
   xmlRequest.send("name=caohuan&id=2");
   //第三部:接受返回数据
   xmlRequest.onreadystatechange = function(){
   
    //判断请求是否发送成功,并且返回数据,这里注意readyState的state的s是大写,我经常犯这种错误
    if(xmlRequest.readyState == 4 && xmlRequest.status == 200)
    {
     //responseText这是接受字符窜的数据,responseXML是接受xml格式的数据
     var  value = xmlRequest.responseText;
     alert(value);
    }
   }
   
  }
  
  
 </script>
  </head>
 
  <body>
  
  </body>
</html>

 

//这是后台的代码

package cn.itcast.servlets;


import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class AjaxTestServlet extends HttpServlet {
 
 @Override
 protected void service(HttpServletRequest request, HttpServletResponse response)
   throws ServletException, IOException {
   request.setCharacterEncoding("UTF-8");
   response.setContentType("text/html;charset=utf-8");
   String p = request.getParameter("p");
   if("test".equals(p))
   {
    doTest(request, response);
   }
 }
 
 protected void doTest(HttpServletRequest request, HttpServletResponse response)
 throws ServletException, IOException {
  String name = request.getParameter("name");
  String id = request.getParameter("id");
  response.getWriter().print(name+"-->" +id);
  
 }
 

}


 

分享到:
评论

相关推荐

    ajax技术制作得在线歌词搜索功能

    传统的网页操作模式在用户提交表单后需要重新加载整个页面,这种方式不仅耗时较长,而且用户体验较差。为了解决这些问题,AJAX(Asynchronous JavaScript and XML)技术应运而生,它允许网页在不重新加载整个页面的...

    asp.net+ajax 制作一个简单的社区聊天室

    文件名"制作一个简单的社区聊天室(AJAX)"可能包含以下内容: - HTML/CSS文件:构成用户界面,包括输入框、发送按钮和聊天消息列表。 - JavaScript文件:包含AJAX请求和DOM操作的代码。 - ASP.NET后台代码文件(如....

    表格制作软件中实现ajax跨域异步单点登录的方法

    本文将详细介绍在FineReport表格制作软件中,如何通过ajax技术实现跨域异步单点登录的方法。 首先,我们需要了解单点登录的基本概念。单点登录是指用户只需要进行一次身份认证,便可以访问多个应用系统,无需重复...

    ajax交互式电子相册

    1. **图片加载**:在传统的相册展示方式中,用户每翻一页都需要重新加载页面。而采用AJAX技术,可以通过异步加载的方式,在用户翻页时仅加载新出现的图片,大大提高了用户体验。 2. **评论系统**:用户在浏览相册的...

    Ajax技术在矿用考勤系统中的应用

    针对传统的Web考勤系统使用submit方式进行数据交互导致的响应时间长、用户体验差等问题,提出了采用Ajax技术设计矿用考勤系统的方案,分析了Ajax技术原理,介绍了基于Ajax技术的矿用考勤系统实现过程。Ajax技术通过...

    基于AJAX方式实现的STM32H7_WebServer源码

    功能说明: 本程序根据原子哥STM32H7开发板源码...刷新问题:网页通过ajax方式对指定的数据进行更新,开发板源码上传需要更新的数据,整体网页不变。 关于资源的说明详情见:https://mp.csdn.net/postedit/101171210

    利用ajax制作的简单的留言本

    在本项目“利用ajax制作的简单的留言本”中,我们将深入探讨Ajax在实际开发中的运用,以及如何结合PHP、CSS和SQL数据库来构建一个互动式的留言系统。 1. **Ajax基础**:Ajax的核心是JavaScript对象XMLHttpRequest,...

    jquery ajax file upload

    jQuery 是一个广泛使用的JavaScript库,它简化了JavaScript的DOM操作、事件处理、动画制作和Ajax交互。通过使用jQuery,开发者可以以更简洁、易读的方式来编写JavaScript代码。 ### AJAX(异步JavaScript和XML) ...

    Java EE应用中的异步通信技术AJAX

    ### AJAX实现方式 1. **原生JavaScript**:直接使用XMLHttpRequest对象,手动编写处理请求和响应的代码。 2. **jQuery库**:jQuery简化了AJAX调用,提供了`$.ajax()`, `$.get()`, `$.post()`等函数,使得异步请求...

    AJAX在网络多媒体课件制作系统中的应用

    如Hibernate(Java持久化框架)、JSP(Java Server Pages)、Struts(MVC框架)和Spring(轻量级Java EE框架),这些技术可以与AJAX结合,构建更强大的网络多媒体课件制作系统。例如,Hibernate可以用于数据库操作,...

    基于AJAX的聊天室

    在互联网应用中,实时交互性是提高用户体验的关键因素之一,而基于AJAX(Asynchronous JavaScript and XML)的聊天室就是这样一种实现方式。AJAX允许网页在不刷新整个页面的情况下与服务器交换数据并更新部分网页...

    Ajax技术在教学论坛制作中的应用.pdf

    本文档首先介绍了传统的ASP技术在教学论坛制作中的缺陷,然后引入了Ajax技术的概念和实现机制,接着讨论了Ajax技术在教学论坛中的应用,包括快速反应的操作、用户注册审核机制、文章审核机制、版主管理界面、虚拟...

    java ajax注册

    在本文中,我们将深入探讨如何使用Java和Ajax技术实现一个用户注册系统,该系统通过服务器端验证并连接到MySQL数据库。Ajax(异步JavaScript和XML)允许我们在不刷新整个页面的情况下与服务器进行交互,提高用户体验...

    JSP+Jquery+JSON 集合实现AJAX

    在AJAX场景中,jQuery提供了一种简单的方式来发起异步请求,如`$.ajax()`或`$.getJSON()`函数,可以轻松地从服务器获取数据。 **AJAX** AJAX的核心在于XMLHttpRequest对象,它是浏览器提供的API,用于在后台与...

    Ajax联动菜单

    **Ajax联动菜单**,是一种在用户选择某项内容时,能够即时响应并展示与之相关的另一组选项的菜单设计方式。这一过程涉及前端与后端的交互,前端负责收集用户的操作,通过Ajax异步请求向服务器发送数据,服务器处理...

    ASP + Ajax 分页实例

    传统的分页通常会加载整个页面,而使用Ajax分页,只需要向服务器请求当前页的数据,然后在客户端动态更新,这样可以显著减少数据传输量,提高页面响应速度。 具体实现步骤可能包括以下几点: 1. **前端准备**:在...

    ajax jquery的使用

    jQuery 是一个 JavaScript 库,它简化了 JavaScript 的使用,包括对 DOM 操作、事件处理、动画制作以及,当然,Ajax 请求。 ### 1. jQuery 的引入 首先,要在项目中使用 jQuery,你需要在 HTML 文件的 `&lt;head&gt;` ...

    ajax、javascript、jquery详细课件

    `$.ajax()`函数提供了一种灵活的方式来发送Ajax请求,可以配置各种参数,如URL、数据类型、请求类型(GET或POST)以及回调函数。此外,还有简化的版本,如`.get()`、`.post()`、`.getJSON()`等,它们针对常见需求...

    深入浅出Ajax(英文版).pdf

    首先,通过“Webpages: the old-fashioned approach”这部分内容,回顾了传统的网页制作方法,即每提交一次表单或请求,都需要重新加载整个页面。这种方式在用户体验上存在很大的不足。 接着,在“Webpages ...

Global site tag (gtag.js) - Google Analytics