一、DOM

DOM【Document Object Model】中文名：文档对象模型。

1、DOM概述

document对象下包含三种元素：标签元素、属性元素、文本元素

在这里插入图片描述

下面三种元素操作的内均为下面的内容

<body>
	<div id="mydiv">这是我的div</div>
	<div>
		<input type="text" name="username" />
		<input type="checkbox" name="hobboy" value="java" />java 
		<input type="checkbox" name="hobboy" value="C" />C 
		<span>那些年错过的大雨</span>
	</div>
</body>

2、标签元素操作

document.getElementById()——通过标签元素的ID获取到标签对象[id具有唯一性]
document.getElementsByName()——通过标签元素的name属性获取到标签对象，返回的是数组
document.getElementsByTagName()——通过标签名称获取到标签对象，返回的是数组
document.createElement()——创建新的元素
appendChild()——父节点追加子节点
removeChild()——父节点删除子节点

<script type="text/javascript">
	/* 要注意代码的加载顺序，要么放在需要操作的代码后面，要么加上weindow.onload文档加载事件，文档加载完毕之后，才执行内部的程序 */
	window.onload = function(){
     
     
		//通过标签元素的ID获取到标签对象[id具有唯一性]
		var div1 = document.getElementById("mydiv");
		console.debug(div1);
		//通过标签元素的name属性获取到标签对象，返回的是数组
		var div2 = document.getElementsByName("hobboy");
		console.debug(div2);
		//通过标签名称获取到标签对象，返回的是数组
		var div3 = document.getElementsByTagName("input");
		console.debug(div3);
		
		//添加标签元素
		var input = document.createElement("input");
		input.type = "text";//增加属性
		console.debug(input);
		//父节点追加子节点
		div1.appendChild(input);
		console.debug(div1);
		//删除
		div1.removeChild(input);
	}
</script>

3、属性元素操作

setAttribute(“type”,”button”) ——设置属性
getAttribute(“type”) ——获取属性值
removeAttribute()——删除某属性；
node.style.样式——设置样式
node.className——设置样式名

<style type="text/css">
	.div{
     
     
		background-color: purple;
	}
</style>
<script type="text/javascript">
	/* 要注意代码的加载顺序，要么放在需要操作的代码后面，要么加上weindow.onload文档加载事件，文档加载完毕之后，才执行内部的程序 */
	window.onload = function(){
     
     
		//1、查找属性元素
		var div1 = document.getElementById("mydiv");
		var id = div1.getAttribute("id")
		console.debug(id);
		//2、设置属性，修改属性
		div1.setAttribute("name","divid");
		console.debug(div1);
		//3、删除某属性；
		div1.removeAttribute("name");
		//4、 设置样式两种方式
		//方式一，常用设置样式名
		div1.className = "div"//类似于直接添加了一个属性class，通过css再calss加载设置样式
		//方式二，设置样式
		div1.style.backgroundColor="pink"
	}
</script>

4、文本元素操作

innerHTML (CRUD)——设置或者获取带有标签的元素
innerText (CRUD)——设置或者获取元素中的纯文本

<script type="text/javascript">
	/* 要注意代码的加载顺序，要么放在需要操作的代码后面，要么加上weindow.onload文档加载事件，文档加载完毕之后，才执行内部的程序 */
	window.onload = function(){
     
     
		var div1 = document.getElementById("mydiv");
		var div2 = document.getElementById("youdiv");
		//查找文本
		var text = div1.innerText;
		console.debug(text);//这是我的div
		var html = div2.innerHTML;
		console.debug(html);//获得所有代码
		//增加、修改、删除
		div1.innerText = "这是innerText";
		console.debug(text);//这是innerText
		div2.innerHTML = "这是innerHTML";
		console.debug(html);
		//区别，innerText只能操作纯文本，innerHTML可以操作元素
		div1.innerText = "<input type='checkbox' name='hi' value='java'/>java";
		div2.innerHTML = "<input type='checkbox' name='hi' value='java'/>java";
	}
</script>

5、事件注册的方式

onabort用户终止页面加载。
onblur 用户离开对象。失去焦点
onchange 用户改变对象的值。
onclick 用户点击对象。
ondblclick 用户双击对象。
onfocus（和onblur相反）用户激活对象。
onkeydown 按下键盘。
onkeypress 按压键盘。
onkeyup 松开键盘。
onload 页面完成加载。注释：在 Netscape 中，当页面加载时会发生该事件。
onmousedown 用户按鼠标按钮。
onmousemove 鼠标指针在对象上移动。
onmouseover 鼠标指针移动到对象上。
onmouseout 鼠标指针移出对象。
onmouseup 用户释放鼠标按钮。
onreset 用户重置表单。
onselect 用户选取页面上的内容。
onsubmit 用户提交表单。
onunload 用户关闭页面。

<style type="text/css">
	.div{
     
     
		width:200px;
		height:200px;
		background-color: purple;
	}
</style>
<script type="text/javascript">
	/* 事件注册公用两种，
	(1)元素上直接注册
	(2)元素.事件名称 （常用）
	*/
	//第一种：缺点是js代码与html代码写在一起了
	function dian(){
     
     
		var div1 = document.getElementById("mydiv");
		div1.className="div";
	}
	//第二种：
	window.onload = function(){
     
     //文档加载事件
		var div2 = document.getElementById("youdiv");
		div2.onclick=function(){
     
     //元素.事件名称
			this.className="div";//谁调用函数，this就指代谁
		}
		//案例：显示密码于隐藏密码之间的切换
		var div3 = document.getElementById("but");
		div3.onclick=function(){
     
     
			var pwd = document.getElementById("pwd");
			if(pwd.type == "password"){
     
     
				pwd.type = "text";
			}else{
     
     
				pwd.type = "password";
			}
		}
	}
</script>
</head>
<body>
<div id="mydiv" onclick="dian()">这是我的div</div>
<div id="youdiv">你的div</div>
<input id="pwd" type="password" /><input id="but" type="button" value="切换" />
</body>

二、Ajax异步请求

1、Ajax概述

AJAX即Asynchronous Javascript And XML（异步JavaScript和XML），是改善用户体验的网页开发技术

传统交互方式：客户端（浏览器）向服务器发送请求，服务器接收请求并处理完毕后会重新加载一个完整的网页（而且这个网页与之前的网页几乎差不多），并且将响应数据返回给客户端（浏览器），浏览器解析网页显示给用户

在这里插入图片描述

Ajax交互方式：异步请求，发送请求的同事还可以继续操作页面。页面不销毁；返回部分数据，减少不必要的数据承传输，介绍网络资源。页面不刷新，而是更新页面部分数据；

在这里插入图片描述

总结：Ajax出现的缘由：更好的提升用户的体验，以及提升服务器的效率，减少网络中不必要的数据的传送

写ajax代码就是写js代码，学习ajax其实是学习使用浏览器的ajax（XMLHttpRequest对象）对象发异步请求，将响应的数据局部更新到页面

2、获取Ajax对象

两种创建方式：1、判断方式；2、try…catch…方式

<script type="text/javascript">
	/* 判断方式 */
	var xhr;
	if(window.XMLHttpRequest){
     
     //IE以外的浏览器  没有undefined false
		xhr = new XMLHttpRequest();
	}else{
     
     //IE浏览器
		xhr = new ActiveXObject();
	}
	console.debug(xhr)
	/* try...catch...方式 */
	var ajax;
	try {
     
     
		//如果是其它浏览器，这句代码可以成功,ajax对象就拿到了
		ajax = new XMLHttpRequest();
	} catch (e) {
     
     
		//如果是IE，上面肯定会报错，被抓取,就执行下面这句代码(IE支持)
		ajax = new ActiveXObject();
	}
	console.debug(ajax)
</script>

3、Ajax的API

https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/open

在这里插入图片描述

4、Ajax发送get请求（获取服务器时间）

SpringMVC环境搭建起来

(1) jar

(2) resource

(3) web.xml配置

(4) 配置运行环境

<%@ 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">
	//1、获取Ajax对象
	function createXhr(){
		var xhr;
		if(window.XMLHttpRequest){//有这个方法，则是其他浏览器
			xhr = new XMLHttpRequest();
		}else{//没有该方法则为undefined，则为ie浏览器
			xhr = new ActiveXObject();
		}
		return xhr;
	}
	//2、发送请求，获取服务器时间
	function getTime(){
		//获取ajax对象
		var xhr = createXhr();
		//创建请求
		xhr.open("get","/getTimer");
		//第一个参数：使用GET提交还是POST提交,第二个参数：请求的url地址,第三个参数(默认是true)：请求是同步还是异步
		//创建监听，对返回的状态做反馈
		xhr.onreadystatechange = function(){
			if(xhr.readyState == 4 && xhr.status == 200){
				//服务器返回一个文本
				var text = xhr.responseText;
				var span = document.getElementById("span");
				span.innerText = text;
			}
		}
		//发送请求
		xhr.send();
	}
	//做一个时间设定任务
	function start(){
		setInterval("getTime()", 2000);
	}
	</script>
</head>
<body>
	服务器时间:<span id="span"></span><input type="button" οnclick="start()" value="获取时间">
</body>
</html>

设置controller文件

@Controller
public class TimeController {
    
    
	@RequestMapping("/getTimer")
	//记得响应注入
	@ResponseBody
	public String getTimer(){
    
    
		return new SimpleDateFormat("yyyy-MM-dd HH-mm-ss").format(new Date());
	}
}

5、Ajax发送Post请求（登录界面）

SpringMVC环境搭建起来

(1) jar

(2) resource

(3) web.xml

(4) 配置运行环境

<%@ 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">
	//先要获取ajax对象，同时判断IE和其他浏览器
	function createXhr(){
		var xhr;
		if(window.XMLHttpRequest){//有这个方法，则是其他浏览器
			xhr = new XMLHttpRequest();
		}else{//没有该方法则为undefined，则为ie浏览器
			xhr = new ActiveXObject();
		}
		return xhr;
	}
	//发送请求，获取服务器时间
	function login(){
		//获取ajax对象
		var xhr = createXhr();
		//创建请求
		xhr.open("post","/login");
		xhr.onreadystatechange = function(){//创建监听函数，对任何状态都进行监听
			if(xhr.readyState==4 && xhr.status==200){
				var text = xhr.responseText;//服务器返回文本
				if(text == "true"){
					alert("登陆成功");
				}else{
					alert("铁憨憨，账号、密码都记不住嘛");
				}
			}
		}
		//使用ajax的post提交，你要让后台传递参数，你还得设置请求头信息
		xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");//传递的参数是以普通文本传输的
		//设置参数
		var username = document.getElementById("uname").value;
		var password = document.getElementById("upwd").value;
		var param = "username="+username+"&password="+password;
		xhr.send(param);//发送请求
	}
	</script>
</head>
<body>
	用户名：<input type="text" id="uname" name="username" /><br/>
	密&emsp;码：<input type="password" id="upwd" name="password" /><br/>
	<input type="button" value="登录" οnclick="login()" />
</body>
</html>

设置controller文件

@RequestMapping("/login")
	//记得响应注入
	@ResponseBody
	public boolean login(String username,String password){
    
    //注意这的形参名要与前台传过来的一致
		//模拟数据库获取的数据
		String na = "wang";
		String pa = "12138";
		System.out.println(username+"--------"+password);
		//判断的时候可以用数据库的数据调用方法，避免遇到参数为null
		if (na.equals(username) && pa.equals(password)) {
    
    
			return true;
		}else{
    
    
			return false;
		}
	}

6、Ajax请求编码问题

1、解决GET请求时的乱码问题

Tomcat 8.0已经解决了这个问题

2、POST请求时的乱码问题

再web.xml设置过滤器

<!-- SpringMVC写好的过滤器 -->
	<filter>
		<!-- 这个名字可以换，只要与下面的对应 -->
		<filter-name>characterEncoding</filter-name>
		<filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
		<init-param>
			<!-- 不能变的名字 -->
			<param-name>encoding</param-name>
			<param-value>UTF-8</param-value>
		</init-param>
	</filter>
	<filter-mapping>
		<filter-name>characterEncoding</filter-name>
		<url-pattern>/*</url-pattern>
	</filter-mapping>

7、Ajax请求IE缓存问题

IE浏览器提供的AJAX对象，在发送GET请求时，会先查看是否访问过该地址，如果该地址已经访问过，那么浏览器不再发送请求

解决方式：

(1) 发送post请求
(2) 欺骗浏览器，请它以为我们正在发送不同的请求：

xhr.open(‘get’,‘random?r=’ + Math.random()); //通过随机数

xhr.open(‘get’,‘random?’ + (new Date()).getTime()); //通过时间戳
ncoding
UTF-8

characterEncoding
/*




## 7、Ajax请求IE缓存问题

IE浏览器提供的AJAX对象，在发送GET请求时，会先查看是否访问过该地址，如果该地址已经访问过，那么浏览器不再发送请求

解决方式：

- (1) 发送post请求

- (2) 欺骗浏览器，请它以为我们正在发送不同的请求：

  xhr.open('get','random?r=' + Math.random());		//通过随机数

  xhr.open('get','random?' + (new Date()).getTime());	//通过时间戳

Java小白学习指南【day40】---JavascriptDOM&Ajax请求

一、DOM

1、DOM概述

2、标签元素操作

3、属性元素操作

4、文本元素操作

5、事件注册的方式

二、Ajax异步请求

1、Ajax概述

2、获取Ajax对象

3、Ajax的API

4、Ajax发送get请求（获取服务器时间）

5、Ajax发送Post请求（登录界面）

6、Ajax请求编码问题

1、解决GET请求时的乱码问题

2、POST请求时的乱码问题

7、Ajax请求IE缓存问题

猜你喜欢