JavascriptDOM文档对象模型和Ajax技术
DOM文档对象模型（介绍）
本质：就是文档[HTML文档、xml文档]加载到内存的表现–>文档在内存中的一种表现形式
- 当文档被加载到内存时，会生成一个document对象。
- 文档中所有的节点(元素节点、文本节点、属性节点)也会生成一个一个的对象。
- 这些对象之间一一定的层级关系连接起来，通过层级关系可以方便的定位想要操作的节点。
DOM操作
-
创建元素
document.createElement(“input”)【没有指定在Dom对象中的节点位置，所以页面不会发生改变】 -
删除元素
父节点.removeChild(“子节点”)
-
添加元素
-
父节点.applidChild(“子节点”)
-
父节点.insertBefore(“子节点”,“参考节点”)
-
-
获取元素的方式
<body>
性别：<input type="radio" name="sex" value="1"/>男
<input type="radio" name="sex" value="0"/>女
<br />
爱好：<input type="checkbox" name="hobby" value="0"/>球
<input type="checkbox" name="hobby" value="1"/>跳
<input type="checkbox" name="hobby" value="2"/>rap
<script type="text/javascript">
var arr = document.getElementById("hobby")
console.debug(arr);
var inparr = document.getElementsByTagName("input")
console.debug(inparr)
var body1 = document.body;
alert(body1);
</script>
</body>
- 文本操作
innerHTML：里面的HTML文本 （会解析文本）
innerText：里面的纯文本
举个栗子
<body>
<div id = "div1" style="width: 100px; height: 100px; background-color: yellowgreen;"></div>
<script type="text/javascript">
var div1 = document.getElementById("div1");
div1.onmouseover = function(){
//以标签的形式添加
// div1.innerHTML="<a href='http://www.baidu.com'>嘀嘀嘀</a>"
//以文本的形式添加
div1.innerText="<a href='#'>哒哒哒</a>"
}
</script>
</body>
创建一个div，鼠标进入的差别
-
属性样式操作
动态设置class div.className="div1" 修改节点的stylr属性 div.style.backgroundColor="rosybrown"
JS事件绑定
<body>
<input type="button" id="btn1" value="按钮11" onclick="btn11()"/>
<input type="button" id="btn2" value="按钮22"/>
<script type="text/javascript">
//事件绑定1
function btn11 (){
alert("来了老弟")
}
//事件绑定方式2
var btn22 = document.getElementById("btn2")
btn22.onclick=function(){
alert("我又来了");
}
</script>
</body>
Ajax技术
(1)什么是Ajax
- 全称是Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
- Ajax是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
- Ajax 并不算是一种新的技术，而是已有技术的组合，主要用来实现客户端与服务器端的异步通信效果，实现页面的局部刷新。
(2)Ajax的作用
- 可以通过在后台与服务器进行少量数据交换。ajax可以使网页实现异步更新。
(3)Ajax发送异步请求的步骤（set）
- 异步请求：发送方发出数据后，不等接收方发回响应，接着发送下个数据包的通讯方式。
关于异步请求：
举个栗子：我们在申请账号时，填写用户名的同时页面发送用户名到服务器匹配做出响应和处理—>你的用户名重复或者格式错误了，响应结果实时反映到页面。反映的过程中你仍然可以填写其他内容（注册表单的其他信息）。（各做各的，互不干扰）即使服务器提示你用户名重复，只是输入框旁进行提示，并没有重新刷你的页面。所有的填写错误会实时的显示出来，这个过程中，你不会有整个页面的提交和等待。
//1.获取ajax对象
function getXhr(){
//window.XMLHttpRequest - 代表是非ie浏览器
return window.XMLHttpRequest?new XMLHttpRequest()
:new ActiveXObject("Microsoft.XMLHTTP");
}
var xhr = getXhr()
//2.创建请求-->没有发送到后台
xhr.open('post',"/checkName"); [open('get',{},url)]
//3.设置监听事件：监听请求的状态
xhr.onreadystatechange=function(){
// 判断发送请求成功，并且响应成功
if(xhr.readyState == 4 && xhr.status == 200){
//接收响应数据
var msg = xhr.responseText;
//判断
if(msg.indexOf("ok")!=-1){
//同户名可以用
document.getElementById("span").innerHTML="<font color ='green'>用户名可以使用</font>"
}else if(msg.indexOf("error")!=-1){
//不可用
document.getElementById("span").innerHTML="<font color='red'>用户名重复！！</font>";
}
}
}
//4.发送请求到后台
xhr.send();
(4)Ajax发送异步请求的步骤（post）
function checkName(name){
var span = document.getElementById("d1");
span.innerText = "正在检查用户名...";
//1.获取ajax对象
var xhr = getXhr();
//2.准备请求，get请求参数写在地址栏后面
xhr.open('post','/checkName');
//3.绑定请求状态监听事件：只要请求状态一改变就触发
xhr.onreadystatechange = function(){
//请求成功了并且响应了正确的数据
if(xhr.readyState==4 && xhr.status == 200){
//接收服务器响应的数据
var result = xhr.responseText;
if(result.indexOf("ok")!=-1){//这个字符串中包含ok
span.innerText = "用户名可以使用";
span.style.color = "green";
}else{
span.innerText = "用户名被占用";
span.style.color = "red";
}
}
}
//设置请求头
xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
//4.发送请求
xhr.send("username="+name);
}