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

来源：互联网发布：linux wget命令 404 编辑：程序博客网时间：2024/06/06 04:35

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").onblur=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 stubSystem.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 stubdoGet(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 stubString 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 stubdoGet(request, response);}}

效果图：

0 0