一、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/>
密 码:<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()); //通过时间戳