JavascriptDOM文档对象模型和Ajax技术

JavascriptDOM文档对象模型和Ajax技术

DOM文档对象模型(介绍)

本质:就是文档[HTML文档、xml文档]加载到内存的表现–>文档在内存中的一种表现形式

  • 当文档被加载到内存时,会生成一个document对象。
  • 文档中所有的节点(元素节点、文本节点、属性节点)也会生成一个一个的对象。
  • 这些对象之间一一定的层级关系连接起来,通过层级关系可以方便的定位想要操作的节点。
  • JavascriptDOM文档对象模型和Ajax技术_第1张图片

DOM操作

  1. 创建元素
    document.createElement(“input”)【没有指定在Dom对象中的节点位置,所以页面不会发生改变】

  2. 删除元素
    父节点.removeChild(“子节点”)
    JavascriptDOM文档对象模型和Ajax技术_第2张图片

  3. 添加元素

    1. 父节点.applidChild(“子节点”)
      JavascriptDOM文档对象模型和Ajax技术_第3张图片

    2. 父节点.insertBefore(“子节点”,“参考节点”)
      JavascriptDOM文档对象模型和Ajax技术_第4张图片

  4. 获取元素的方式

<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>
  1. 文本操作
    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="嘀嘀嘀"
			//以文本的形式添加
			div1.innerText="哒哒哒"
		}
	</script>
</body>
创建一个div,鼠标进入的差别

JavascriptDOM文档对象模型和Ajax技术_第5张图片

  1. 属性样式操作

    动态设置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="用户名可以使用"
			}else if(msg.indexOf("error")!=-1){
     
				//不可用
				document.getElementById("span").innerHTML="用户名重复!!";
			}
		}
}	
//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);
}

你可能感兴趣的:(WEB,ajax,dom,javascript,web开发)