前端开发与动态网页交互-优快云博客

本文链接：https://blog.youkuaiyun.com/klpyang/article/details/7768315

DOM基本使用

基本的DOM方法
document对象,取得节点
getElementById(id)
getElementsByName(name)
getElementsByTagName(tagname)
getAttribute()
setAttribute()
如var elementNode = document.getElementById(“id");
var newImage = document.createElement("img");
newImage.setAttribute("src", "rabbit-hat.gif");

DOM属性
childNodes 任一元素的所有子元素，数组
nodeName 元素节点的名称 返回结果全为大写！
nodeType 
nodeValue 文本节点的值，元素节点返回空
firstChild lastChild 孩子节点，node,childNodes[node.childNodes.length-1]
parentNode 
nextSibling 下一个兄弟节点

改变网页结构的DOM方法
document.createElement(tagname) 创建新元素节点
node.appendChild(node) 
document.createTextNode(text)
node.insertBefore(newNode,targetNode)
node.replaceChild(newChild,oldChild)
node.removeChild(node)

应用，替换一张图片：
1.使用replaceChild()函数
imgParent.replaceChild(newImage, hatImage);
2.直接修改图片的src属性
hatImage.setAttribute("src", "rabbit-hat.gif");
3.使用html DOM方法
hatImage.src = “rabbit-hat.gif”;
button.onclick=hideRabbit;

DOM测试

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
function check(){
		//var p=document.getElementById("a");
		//var p2=document.getElementsByName("b")[0];
		//var p3=document.getElementsByTagName("p")[1];
		//alert(p1.getAttribute("id"));
		//p.setAttribute("name","abc");
		//alert(p.id);
		//p.setAttribute("style","color:#FOO");
		//节点操作 动态创建
		//alert(p.nodeName);//p
		//alert(p.nodeType);//1
		//alert(p.nodeValue);//null
		//alert(p.childNodes[0].nodeValue);//取标签内部值，通用
		//alert(p.innerHTML);//get inner value,so easy 
		//var div=document.getElementById("div");
		//var p=document.createElement("p");
		//var txt=document.createTextNode("hello");
		//p.appendChild(txt);
		//div.appendChild(p);
		var t=document.getElementById("table");
		var txt1=document.createTextNode("AA");
		var txt2=document.createTextNode("BB");
		var td1=document.createElement("td");
		var td2=document.createElement("td");
		var tr=document.createElement("tr");
		//var tbody=document.createElement("tbody");//ie6兼容
		td1.appendChild(txt1);
		td2.appendChild(txt2);
		tr.appendChild(td1);
		tr.appendChild(td2);
		t.appendChild(tr);
		//tbody.appendChild(tr)
		//t.appendChild(tbody);
		
		
	}
</script>
</head>

<body>
<input type="button" value="button" onclick="check();" />
<p id="a">hello,world</p>
<p name="b">Hello,DOM</p>
<div id="div">
<table id="table" width="80%">
</table>
</div>
</body>
</html>

实验用，最原始

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
  <title>al.html</title>

  <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  <meta http-equiv="description" content="this is my page">
  <meta http-equiv="content-type" content="text/html; charset=GB18030">

  <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
  <script type="text/javascript">
function check(){
    //定义变量 
 var req=false;
 //firefox chrome safari
 if (window.XMLHttpRequest) {
 req = new XMLHttpRequest();
 }
 //ie
 else if (window.ActiveXObject) {
 req = new ActiveXObject("Microsoft.XMLHTTP");
 }
 //判断对象是否为空
 if(req){
 //打开连接，访问
 req.open("GET", "http://localhost:8888/ajax/servlet/HelloServlet", true);
 //注册回调函数，没括号，算指向函数的指针
 req.onreadystatechange = callback;
 //发送请求
 req.send(null);
 }
 //回调函数
 function callback(){
  //响应内容解析完毕
  if(req.readyState==4){
   //正常返回值 
   if(req.status==200){
    //alert(req.responseText);
    //var div=document.getElementById("div");
    //var txt=document.createTextNode(req.responseText);
    //div.innerHTML=req.responseText();只能用在网页文件中
    //div.appendChild(txt);
    var t=document.getElementById("t");
    var xml=req.responseXML;
    var ids=xml.getElementsByTagName("id");
    for(var i=0;i<ids.length;i++){
     alert(ids[i]);
    }
   }
  }
 }
}
</script>
 </head>

 <body>
  <input type="button" value="button" onclick="check();">
  <table>
  <tbody id="t">
  
  </tbody>
  </table>
 </body>
</html>

HelloServlet.java

package com.neusoft.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;

public class HelloServlet extends HttpServlet {

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

  response.setContentType("text/xml");
  PrintWriter out = response.getWriter();
  StringBuffer buff=new StringBuffer();
  //out.println("Hello,ajax!");
  buff.append("<data>");
  
  buff.append("<stu>");
  buff.append("<id>100</id>");
  buff.append("</stu>");
  
  buff.append("<stu>");
  buff.append("<id>101</id>");
  buff.append("</stu>");
  
  buff.append("<stu>");
  buff.append("<id>102</id>");
  buff.append("</stu>");
  
  buff.append("</data>");
  
  out.println(buff.toString());
  out.flush();
  out.close();
 }

 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\">");
  out.println("<HTML>");
  out.println("  <HEAD><TITLE>A Servlet</TITLE></HEAD>");
  out.println("  <BODY>");
  out.print("    This is ");
  out.print(this.getClass());
  out.println(", using the POST method");
  out.println("  </BODY>");
  out.println("</HTML>");
  out.flush();
  out.close();
 }

}

【实现一个最简单的ajax动态用户名、密码验证模子】

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>login.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=gb2312">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript">
	function checkId(){
		var req=false;
		var username=document.getElementsByName("username")[0].value;
		if(window.XMLHttpRequest){
			req=new XMLHttpRequest;
		}
		else if(window.ActiveXObject){
			req=new ActiveXObject("Microsoft.XMLHTTP");
		}
		if(req){
			req.open("GET", "http://localhost:8888/myajax/servlet/loginIdServlet?username="+username, true);
			req.onreadystatechange=callback;
			req.send(null);
		}
		function callback(){
		if(req.readyState==4){
			if(req.status==200){
				var xml=req.responseXML;
				var idError=xml.getElementsByTagName("idError")[0].childNodes[0].nodeValue;
				var idSpan=document.getElementById("idSpan");
				if(idSpan.childNodes.length!=0){
				idSpan.removeChild(idSpan.childNodes[0]);
				}
				var txt=document.createTextNode(idError);
				idSpan.appendChild(txt);
				//idSpan.value=txt;
				
				}
			}
		}
}
	
	function checkPwd(){
		var req=false;
		var password=document.getElementsByName("password")[0].value;
		if(window.XMLHttpRequest){
			req=new XMLHttpRequest;
		}
		else if(window.ActiveXObject){
			req=new ActiveXObject("Microsoft.XMLHTTP");
		}
		if(req){
			req.open("GET", "http://localhost:8888/myajax/servlet/loginPwdServlet?password="+password, true);
			req.onreadystatechange=callback;
			req.send(null);
		}
		function callback(){
		if(req.readyState==4){
			if(req.status==200){
				var xml=req.responseXML;
				var pwdError=xml.getElementsByTagName("pwdError")[0].childNodes[0].nodeValue;
				var pwdSpan=document.getElementById("pwdSpan");
				if(pwdSpan.childNodes.length!=0){
				pwdSpan.removeChild(pwdSpan.childNodes[0]);
				}
				var txt=document.createTextNode(pwdError);
				pwdSpan.appendChild(txt);
				}
			}
		}
	}
</script>
  </head>
  
  <body>
   <h1>欢迎光临</h1>
   <hr/>
   <form>
   请输入您的用户名：<input type="text" name="username" onblur="checkId();"/><span id="idSpan"></span>
   <br/><br/>
   请输入您的密码 ：<input type="password" name="password" onblur="checkPwd();"/><span id="pwdSpan"></span>
   <br/>
   <p>
   <input type="button" value="登陆" />
   <input type="reset" value="重置"/>
   </p>
   </form>
  </body>
</html>

loginIdServlet.java

package com.neusoft.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;

public class loginIdServlet extends HttpServlet {

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

		response.setContentType("text/xml");
		response.setCharacterEncoding("gb2312");
		PrintWriter out = response.getWriter();
		StringBuffer buff=new StringBuffer();
		String idError=null;
		String username=request.getParameter("username");
		if(!login(username)){
			idError="用户名长度为4到14个字符!";
		}
		else{
			idError="该用户名可用!";
		}
		buff.append("<idError>");
		buff.append(idError);
		buff.append("</idError>");
		out.println(buff.toString());
		out.flush();
		out.close();
	}

	public static boolean login(String username){
		boolean log=true;
		if(username.length()<4||username.length()>14){
			log=false;
		}
		return log;
	}
	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\">");
		out.println("<HTML>");
		out.println("  <HEAD><TITLE>A Servlet</TITLE></HEAD>");
		out.println("  <BODY>");
		out.print("    This is ");
		out.print(this.getClass());
		out.println(", using the POST method");
		out.println("  </BODY>");
		out.println("</HTML>");
		out.flush();
		out.close();
	}

}

loginPwdServlet.java

package com.neusoft.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;

public class loginPwdServlet extends HttpServlet {

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

		response.setContentType("text/xml");
		response.setCharacterEncoding("gb2312");
		PrintWriter out = response.getWriter();
		StringBuffer buff=new StringBuffer();
		String pwdError=null;
		String password=request.getParameter("password");
		if(!pwd(password)){
			pwdError="密码长度必须为6位!";
		}
		else{
			pwdError="该密码可用!";
		}
		buff.append("<pwdError>");
		buff.append(pwdError);
		buff.append("</pwdError>");
		out.println(buff.toString());
		out.flush();
		out.close();
	}
	public static boolean pwd(String password){
		boolean pd=true;
		if(password.length()!=6){
			pd=false;
		}
		return pd;
	}
	
	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\">");
		out.println("<HTML>");
		out.println("  <HEAD><TITLE>A Servlet</TITLE></HEAD>");
		out.println("  <BODY>");
		out.print("    This is ");
		out.print(this.getClass());
		out.println(", using the POST method");
		out.println("  </BODY>");
		out.println("</HTML>");
		out.flush();
		out.close();
	}

}

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" 
	xmlns="http://java.sun.com/xml/ns/javaee" 
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
	http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
  <servlet>
    <servlet-name>loginIdServlet</servlet-name>
    <servlet-class>com.neusoft.servlet.loginIdServlet</servlet-class>
  </servlet>
  <servlet>
    <servlet-name>loginPwdServlet</servlet-name>
    <servlet-class>com.neusoft.servlet.loginPwdServlet</servlet-class>
  </servlet>


  <servlet-mapping>
    <servlet-name>loginIdServlet</servlet-name>
    <url-pattern>/servlet/loginIdServlet</url-pattern>
  </servlet-mapping>
  <servlet-mapping>
    <servlet-name>loginPwdServlet</servlet-name>
    <url-pattern>/servlet/loginPwdServlet</url-pattern>
  </servlet-mapping>
  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>
</web-app>

ajax最基础