`

ajax学习笔记一

    博客分类:
  • ajax
阅读更多

1.新建工程ajax_demo01

2.在src下面新建一个包com.ajax.test并在这个包下新建一个servlet

   AjaxTest.java

  

package com.ajax.test;

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 AjaxTest extends HttpServlet {
	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		doPost(request,response);

	}
	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		response.setContentType("text/html");
		PrintWriter out = response.getWriter();
		out.println("<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\">");
		String name=request.getParameter("name");
		if(name!=null)
		{
			out.println("error");
		}else
		{
			out.println("success");
		}
	}

}

 

然后在WebRoot下面新建一个文件夹js在这个文件夹新建一个文件

    verify.js

   

   

		var req; //定义变量,用来创建xmlhttprequest对象
        function creatReq() // 创建xmlhttprequest,ajax开始
        {
           // var url="servlet/AjaxTest"; //要请求的服务端地址
            if(window.XMLHttpRequest) //非IE浏览器,用xmlhttprequest对象创建
            {
                req=new XMLHttpRequest();
            }
            else if(window.ActiveXObject) //IE浏览器用activexobject对象创建
            {
                req=new ActiveXObject("Microsoft.XMLHttp");
            }
            
            if(req) //成功创建xmlhttprequest
            {
            	var userName=document.getElementById("userName").value;
                req.open("GET","servlet/AjaxTest?name"+userName,true); //与服务端建立连接(请求方式post或get,地址,true表示异步)
                req.onreadystatechange = callback; //指定回调函数,的属性名不能加括号
                req.send(null); //发送请求
            }
        }
        
        function callback() //回调函数,对服务端的响应处理,监视response状态
        {
            if(req.readystate==4) //请求状态为4表示成功
            {
                if(req.status==200) //http状态200表示OK
                {
                    Dispaly(); //所有状态成功,执行此函数,显示数据
                }
                else //http返回状态失败
                {
                    alert("服务端返回状态" + req.statusText);
                }
            }
            else //请求状态还没有成功,页面等待
            {
                document .getElementById ("result").innerHTML ="数据加载中";
            }
        }
        
        function Dispaly() //接受服务端返回的数据,对其进行显示
        {
            document .getElementById ("result").innerHTML =req.responseText;
        }

 最后在你的主页面index.jsp编写一个简单的验证

  

<%@ page language="java" 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>ajax测试实例一</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 language="javascript" src="js/verify.js" charset="utf-8"></script>
	
  </head>
  
  <body>
    <h1>ajax测试实例一</h1>
    <hr>
    <br/>
    <input type="text" id="userName">
    <input type="submit" value="检验" onclick="creatReq()">
    <span id="result"></span>
  </body>
</html>

 

 

分享到:
评论

相关推荐

    AJAX学习笔记1

    **标题:“AJAX学习笔记1”** 在Web开发中,AJAX(Asynchronous JavaScript and XML)是一种创建动态网页的技术,允许在不重新加载...而“AJAX学习笔记1”的主题,无疑是一个很好的起点,引导我们探索这一领域的深度。

    ajax 学习笔记源代码

    ajax 学习笔记源代码ajax 学习笔记源代码ajax 学习笔记源代码ajax 学习笔记源代码ajax 学习笔记源代码ajax 学习笔记源代码ajax 学习笔记源代码ajax 学习笔记源代码ajax 学习笔记源代码ajax 学习笔记源代码ajax 学习...

    16ajax学习笔记1

    在本篇16ajax学习笔记1中,我们将探讨Ajax的基础概念、使用方法以及jQuery库中的Ajax实现。 1、发送请求: Ajax的首要任务是创建XMLHttpRequest对象,这是浏览器提供的API。在JavaScript中,我们可以通过new ...

    AJAX学习笔记(内含实例)

    AJAX学习笔记。内含Java调用的两个实例,及JavaScript的ajax工具函数,可快速入门,也可当手册使用。个人精心整理,值得收藏。 更多:http://download.csdn.net/user/daillo/all

    Ajax 学习笔记,超详细的噢!不看后悔

    在这份超详细的Ajax学习笔记中,我们将深入探讨以下几个关键知识点: 1. **基础概念**:Ajax的核心是JavaScript对象XMLHttpRequest,它使得前端和后端能够进行异步通信。异步意味着用户在等待服务器响应时可以执行...

    ajax学习笔记

    ### AJAX学习笔记 #### 一、引言 Ajax(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新。...

    Ajax学习笔记个人总结

    ### Ajax学习笔记个人总结 #### 一、XMLHttpRequest对象简介 **XMLHttpRequest** 对象是 AJAX 技术的核心,它负责在客户端与服务器之间发送异步请求,无需刷新整个页面即可实现局部数据更新。要使用 ...

    web前端开发AJAX学习笔记

    web前端开发AJAX学习笔记

    Ajax 学习笔记(1).

    Ajax 学习笔记(1).rtf

    jQuery+AJAX学习笔记

    jQuery+AJAX学习笔记

    AJAX学习笔记忘记了看一眼

    AJAX学习笔记忘记了看一眼

    ajax学习笔记代码

    **Ajax学习笔记代码详解** Ajax,全称Asynchronous JavaScript and XML,是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换,使网页实现异步更新。这种技术的...

    经典ajax学习笔记

    以下是一份详细的Ajax学习笔记,涵盖了其基本概念、工作原理、优势与限制,以及实际应用。 ### 一、基本概念 Ajax的核心是JavaScript对象XMLHttpRequest(XHR),它允许浏览器在后台与服务器进行通信,而不会打断...

    Ajax学习笔记.zip

    1. **XMLHttpRequest对象**:这是Ajax的基础,它创建了一个与服务器端通信的通道。通过调用其open()方法设置请求类型(GET或POST)、URL和是否异步,然后使用send()方法发送请求。当服务器响应时,XMLHttpRequest...

    ZK-AJAX学习笔记

    从给定的文件信息来看,这是一份详细的ZK-AJAX学习笔记,记录了从准备环境、下载运行ZK到深入学习各个组件的过程。ZK是一款基于Ajax的开源Web应用框架,它允许开发者使用类似桌面应用的组件来构建Web应用,而无需...

    Ajax和jQuery学习笔记

    ### Ajax和jQuery学习笔记 #### 一、Ajax基础与原理 **1.1 什么是Ajax?** Ajax(Asynchronous JavaScript and XML,异步JavaScript和XML)是一种用来创建快速动态网页的技术,通过在后台与服务器进行少量数据...

    Head First Ajax学习笔记

    ### Head First Ajax 学习笔记知识点总结 #### 一、异步请求与AJAX概念 - **异步请求**:允许页面在发送请求时继续执行后续任务,无需等待服务器响应,提高了用户体验。 - **AJAX (Asynchronous JavaScript and ...

    Ajax学习脑图笔记1

    Ajax学习脑图笔记1

Global site tag (gtag.js) - Google Analytics