B043-JavascriptDOM&Ajax
目录
-
-
- JavascriptDOM
-
- 01_事件绑定方式
- 02_文本操作
- 03_移入移出事件+文本操作
- 04_属性和样式操作
- 05_元素操作-打老虎
- Ajax
-
- 发送ajax get请求
-
JavascriptDOM
01_事件绑定方式
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title>
<script type="text/javascript">
// 点击事件 绑定方式一:
function btn1(){
alert("我出来了。。。。")
}
// 方式二：
// 先获取元素： 通过id获取元素
// 页面加载事件： 页面加载完成之后再去执行，可以不管上下顺序
window.onload=function(){
var btn = document.getElementById("b1"); //需要添加页面加载事件，因为代码自上往下执行，先到这里时按钮二还没有加载到内存中
// 在这个按钮上绑定一个单机事件
btn.onclick=function(){
alert("我又出来了。。。。")
}
}
script>
head>
<body>
<button onclick="btn1()">按钮一button>
<button id="b1">按钮二button>
body>
html>
02_文本操作
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title>
<script type="text/javascript">
// 页面加载事件
window.onload=function(){
var sp = document.getElementById("sp");
// 添加文本
// innerHTML 会解析标签
// sp.innerHTML="啊哈哈哈哈
";
// innerText:不会解析文本中的内容
// sp.innerText="啊哈哈哈哈
";
// 获取文本 没有给值就是获取
// 获取的是所有内容，包括子标签
var sph = sp.innerHTML;
alert(sph)
// 获取的是纯文本
var spt = sp.innerText;
alert(spt);
}
script>
head>
<body>
<span id="sp"><h1>javah1>span>
body>
html>
03_移入移出事件+文本操作
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title>
<style>
#dv{
border: 1px solid red;
height: 200px;
width: 200px;
background: green;
}
style>
<script type="text/javascript">
//onmouseover 鼠标指针移动到对象上。
//onmouseout 鼠标指针移出对象。
// 绑定事件 div
// 页面加载完成
window.onload=function(){
// 获取div元素
var dv = document.getElementById("dv");
// 绑定移入事件
dv.onmouseover=function(){
// 敌人来了
dv.innerHTML="敌人来了。。。。。"
}
// 绑定移出事件
dv.onmouseout=function(){
dv.innerHTML="敌人走了";
}
}
script>
head>
<body>
<div id="dv" >div>
body>
html>
04_属性和样式操作
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title>
<style>
.aa{
color: red;
}
style>
<script type="text/javascript">
// 页面加载事件
window.onload=function(){
// 获取a标签
var arr = document.getElementsByTagName("a");
console.debug(arr);
// 遍历
for(var i=0;i<arr.length;i++){
// 绑定鼠标移入事件
arr[i].onmouseover=function(){
this.style.backgroundColor="yellow";
}
// 绑定移出事件
arr[i].onmouseout=function(){
this.style.backgroundColor="white";
}
// 绑定点击事件
arr[i].onclick=function(){
// 动态的添加class属性 ，并且class的是aa
this.className="aa";
}
}
}
script>
head>
<body>
<a href="javascript:;"><file>file>a>
<a href="javascript:;">Edita>
<a href="javascript:;">Edita>
<a href="javascript:;">Edita>
<a href="javascript:;">Edita>
body>
html>
05_元素操作-打老虎
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title>
head>
<body>
<button id="btn">武松button>
<script type="text/javascript">
var tiger;
setTimeout(function(){
tiger = document.createElement("input");
tiger.type="button";
tiger.value="大老虎"; //
// 把input添加到body中
document.body.appendChild(tiger);
},3000);
// 打老虎
document.getElementById("btn").onclick=function(){
// 把新添加的input移出
document.body.removeChild(tiger);
}
script>
body>
html>
Ajax
发送ajax get请求
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title heretitle>
head>
<body>
<form action="/user/register" method="get">
用户名:<input type="text" name="username" id="username" /><span id="sp">span><br/>
密码: <input type="password" name="password" id="password" /><br/>
<input type="submit" value="注册">
form>
<script type="text/javascript">
// 定义一个函数 返回一个ajax对象
function getXhr(){
var xhr = null;
if(window.XMLHttpRequest){//针对非低版本ie浏览器
xhr = new XMLHttpRequest();
}else{//针对低版本的ie浏览器
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
return xhr;
}
// get请求
// 绑定失去焦点事件
document.getElementById("username").onblur=function(){
// 获取当前输入的用户名 为了给后台判断的
var username = this.value;
// 1.获取ajax对象；
var xhr = getXhr();
// 2.准备发送请求
xhr.open("get","/user/checkName?name="+username);
// 3.设置回调函数（主要是获取服务器返回的正确数据）：
xhr.onreadystatechange = function(){
// 正确的结果
if(xhr.readyState==4 && xhr.status==200){
// 接受后台数据
var msg = xhr.responseText;
// alert(msg);
if(msg.indexOf("ok")!=-1){
// 用户名可用
// 获取span标签
document.getElementById("sp").innerHTML="用户名可用";
}else{
// 用户名不可用
document.getElementById("sp").innerHTML="用户名已存在";
}
}
}
// 4.发送请求
xhr.send();
}
script>
body>
html>
UserController
@Controller
public class UserController {
@RequestMapping("/user/checkName")
@ResponseBody // 不走视图解析器了
public String checkName(String name){
if("tom".equals(name)){
return "no";
}
return "ok";
}
}
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title heretitle>
head>
<body>
<form action="/user/register" method="post">
用户名:<input type="text" name="username" id="username" /><span id="sp">span><br/>
密码: <input type="password" name="password" id="password" /><br/>
<input type="submit" value="注册">
form>
<script type="text/javascript">
// 定义一个函数 返回一个ajax对象
function getXhr(){
var xhr = null;
if(window.XMLHttpRequest){//针对非低版本ie浏览器
xhr = new XMLHttpRequest();
}else{//针对低版本的ie浏览器
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
return xhr;
}
var flag;
// 绑定失去焦点事件
document.getElementById("username").onblur=function(){
// 获取当前输入的用户名 为了给后台判断的
var username = this.value;
// 1.获取ajax对象（已经获取）；
var xhr = getXhr();
// 2.准备发送请求
xhr.open("post","/user/checkName");
//3.设置回调函数（主要是获取服务器返回的正确数据）：
xhr.onreadystatechange = function(){
// 正确的结果
if(xhr.readyState==4 && xhr.status==200){
// 接受后台数据
var msg = xhr.responseText;
if(msg.indexOf("ok")!=-1){
// 用户名可用
flag = true;
// 获取span标签
document.getElementById("sp").innerHTML="用户名可用";
}else{
// 用户名不可用
flag = false;
document.getElementById("sp").innerHTML="用户名已存在";
}
}
}
// 4.设置一个头信息
xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
// 5.发送请求
xhr.send("name="+username);
}
function subFun(){
return flag;
}
script>
body>
html>
UserController
@Controller
public class UserController {
@RequestMapping("/user/checkName")
@ResponseBody // 不走视图解析器了
public String checkName(String name){
if("tom".equals(name)){
return "no";
}
return "ok";
}
}