AJAX学习(1）测试服务器连接+模拟加载视频测试+注册用户名判断

最新推荐文章于 2024-08-16 09:56:21 发布

IT界de小鲜肉

最新推荐文章于 2024-08-16 09:56:21 发布

阅读量386

点赞数

分类专栏： ajax

本文链接：https://blog.csdn.net/xiaoaiqi/article/details/52831112

版权

ajax 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="index.js"></script>
</head>
<body> 
          <input type="button" name="ok" id="ok" value="测试服务器连接">
          <input type="button" name="jiazai" id="jiazai" value="加载">
          <div id="jz"></div>
          <hr/>
          <input type="text" id="name" name="name"/>
          <span id="error"></span>     
</body>
</html>

index.js

//当页面加载完毕之后，执行以下代码
window.onload = function(){
	document.getElementById("ok").onclick = function(){
		 var xhr = ajaxFunction();
		 xhr.open("POST","./ajax?c=6",true);
		 xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
		 xhr.send("a=6&b=9");	
	}
	document.getElementById("jiazai").onclick = function(){
		 var xhr = ajaxFunction();	
		 xhr.onreadystatechange = function(){
			if(xhr.readyState==1){
				document.getElementById("jz").innerHTML = "<img src='loading33.gif'></img> 正在连接";
				
			}else if(xhr.readyState==2){
				document.getElementById("jz").innerHTML = "<img src='loading33.gif'></img> 正在加载";
				
			}else if(xhr.readyState==3){
				document.getElementById("jz").innerHTML = "<img src='loading33.gif'></img> 正在处理";
				
			}else if(xhr.readyState==4){
				document.getElementById("jz").innerHTML = "显示视频页面";
			}else{
				document.getElementById("jz").innerHTML = "视频页面加载失败";
			}
		 }
		 xhr.open("POST","../loadServlet?timeStamp="+new Date().getTime(),true);
		 xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
		 xhr.send(null);
	}
	document.getElementById("name").οnblur=function(){
		var name = document.getElementById("name").value;
		var xhr=ajaxFunction();
		xhr.onreadystatechange = function(){
			if(xhr.readyState==4){
				if(xhr.status==200){
					var data = xhr.responseText;		//获取文本
					document.getElementById("error").innerHTML = data;
				}
			}
		}
		xhr.open("POST","./ajax2?timeStamp="+new Date().getTime(),true);
		xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
		xhr.send("name="+name);	
	}
}

function ajaxFunction(){
   var xmlHttp;
   try{ // Firefox, Opera 8.0+, Safari
        xmlHttp=new XMLHttpRequest();
    }
    catch (e){
	   try{// Internet Explorer
	         xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
	      }
	    catch (e){
	      try{
	         xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
	      }
	      catch (e){}
	      }
    }

	return xmlHttp;
 }

Servlet

package servlet;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class ajax
 */
@WebServlet("/ajax")
public class ajax extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public ajax() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		System.out.println("connection server success!");
		System.out.println("a = "+request.getParameter("a"));
		System.out.println("b = "+request.getParameter("b"));
		System.out.println("c = "+request.getParameter("c"));
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

}

package servlet;

import java.io.IOException;
import java.io.PrintWriter;

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

/**
 * Servlet implementation class ajax2
 */
@WebServlet("/ajax2")
public class ajax2 extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public ajax2() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
	String name= request.getParameter("name").trim();
	PrintWriter out=response.getWriter();
	System.out.println("name="+name);
	if(name==null||name.equals("")){
		out.println("null");
	}else if(name.equals("123")){
		out.println("ok");
	}else{
		out.println("no");
	}		
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

}

效果图：