前端基础-JSDom操作+Ajax

最新推荐文章于 2023-10-17 19:01:48 发布

春花.

最新推荐文章于 2023-10-17 19:01:48 发布

阅读量241

点赞数

文章标签：前端 javascript ajax

本文链接：https://blog.csdn.net/smile__w/article/details/129538521

版权

一、DOM模型

1、DOM，文档对象模型，通过程序解析结构化文档，生成包含当前结构化文档中的所有内容的一个对象模型。
2、DOM模型就是结构化文档在内存中的另外一种表现形式
在这里插入图片描述

3、document对象
每个载入浏览器的html文档都会成为document对象，文档中都是节点，里面的标签就是元素节点。
获取document对象

爱好：<input type="checkbox" name="hobby" id="ct"/>唱跳
<input type="checkbox" name="hobby"/>rap
<input type="checkbox" name="hobby" />篮球

城市：
	<select>
		<option>重庆</option>
		<option>成都</option>
		<option>昆明</option>
		<option>大理</option>
	</select>
	
	<script type="text/javascript">
		var ct = document.getElementById("ct");
		console.log(ct)
		
		var hobby = document.getElementsByName("hobby");
		console.log(hobby)
		
		var arr = document.getElementsByTagName("option");
		console.log(arr)
		
		var body = document.body;
		console.log(body)
		
		var html = body.parentNode;
		console.log(html)
	</script>

4、JavaScript事件
JavaScript事件绑定：

<input type="button" onclick="f1(this)" value="单击"/><br>
<input type="button" ondblclick="f2()" value="双击"/><br>

<div id="div" style="width: 200px;height: 200px">div</div><br>
<input type="text" onfocus="f3(this)" onblur="f4(this)"/>

<script type="text/javascript">
	function f1(t){
		t.value = "暴富"
	}
	function f2(){
		alert(666)
	}
	var div = document.getElementById("div")
	div.onmouseover = function(){
		div.style.backgroundColor = "tomato"
	}
	
	div.onmouseout = function(){
		div.style.backgroundColor = "yellow"
	}
	
	function f3(t){
		t.style.backgroundColor = "red"
	}
	
	function f4(t){
		t.style.backgroundColor = "white"
	}
</script>

5、DOM操作
DOM操作的核心就是文本操作、属性样式操作、元素操作

<div id="d1">
	I'm <span style="font-size: 15px;color: red">Chinese!</span>

</div>

<script type="text/javascript">
	var div = document.getElementById("d1");
	var html = div.innerHTML; //可以获取元素标签
	console.log(html)
	var text = div.innerText;//只能获取文本信息
	console.log(text)
	
	//div.innerHTML="<h1>云南</h1>"
	//div.innerText="<h1>云南</h1>"
</script>

6、属性和样式操作

<style type="text/css">
.c{
	width: 100px;
	height: 100px;
	background-color: tomato;
}
</style>
</head>
<body>
<input type="button" value="按钮" id="d1">

<script type="text/javascript">
	var d1 = document.getElementById("d1")
	d1.value = "666"
	console.log(d1.value)
	
	d1.setAttribute("type","text")
	console.log(d1,getAttribute("type"))
	
	//移除属性名
	d1.removeAttribute("type")
	
	//操作样式
	d1.style.color="red"
	
	//批量操作
	d1.className = "c"
</script>

7、元素操作

<button id="ws">武松</button>

<script type="text/javascript">
	//添加节点
	var btn = null;
	
	window.setTimeout("f1()",3000);//过三秒出现老虎
	function f1(){
		//创建一个按钮并获取
		btn = document.createElement("button")
		btn.innerHTML = "老虎";//把按钮的内容改为老虎
		//在body下面插入一个子标签
		document.body.appendChild(btn)
	}
	
	//单击武松，老虎消失
	var ws = document.getElementById("ws")
	ws.onclick = function(){
		document.body.removeChild(btn)//移除
	}
</script>

二、Ajax
Ajax是异步JavaScript和xml，是改善用户体验的网页开发技术。
传统交互方式：
在这里插入图片描述

Ajax交互方式

在这里插入图片描述

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

1、同步和异步
同步：你先做完我再做
异步：各做各的互不干扰

2、获取Ajax对象

//提取方法
	function getXHR(){
		var xhr = null;
		if(window.XMLHttpRequest){//针对其他浏览器
			xhr = new XMLHttpRequest();
		}else{//针对低版本ie
			xhr = new ActiveXObject('Microsoft.XMLHTTP');
		}
		return xhr;
	}
	console.log(getXHR());

3、onreadystatechange事件
格式：

xhr.onreadystatechange=function(){
//… … 
//处理返回的数据
//此函数中最需要的目的是为了获取正确的数据（成功接收数据，并且是正确的数据）
};

4、readyState请求状态
0：没有调用send（）方法
1：已经调用send()，正在发送请求
2：send()调用完成，已接收全部响应内容
3：正在解析响应内容
4：响应内容解析完毕，可以在客户端获取并使用了。
状态判断书写代码格式：

xhr.onreadystatechange=function(){
if(xhr.readyState == 4){//已经接收到服务器响应的内容了
var txt = xhr.responseText;
//展示数据到页面
}//这里最后不要写else，因为状态从0-1-2-3都会触发else
};

5、实现步骤

<script type="text/javascript">
	//提取方法
	function getXHR(){
		var xhr = null;
		if(window.XMLHttpRequest){//针对其他浏览器
			xhr = new XMLHttpRequest();
		}else{//针对低版本ie
			xhr = new ActiveXObject('Microsoft.XMLHTTP');
		}
		return xhr;
	}
	console.log(getXHR());
	
	
	//获取Ajax对象
	var xhr = getXHR();
	//准备请求 参数  请求方式get或post  请求地址
	xhr.open("get","/login?name=xiao&&password=123");
	//设置回调函数    主要处理响应结果
	xhr.onreadystatechange = function(){
		//判断请求是否成功
		if(xhr.status == 200 && xhr.readyState == 4){
			//处理响应结果
			xhr.responsText;
		}
	}
	//发送请求
	xhr.send();
</script>

春花.

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端基础-JSDom操作+Ajax

学习Ajax就是使用浏览器的ajax（XMLHttpRequest对象）发送异步请求，将响应的数据局部更新到页面。1、DOM，文档对象模型，通过程序解析结构化文档，生成包含当前结构化文档中的所有内容的一个对象模型。每个载入浏览器的html文档都会成为document对象，文档中都是节点，里面的标签就是元素节点。2、DOM模型就是结构化文档在内存中的另外一种表现形式。DOM操作的核心就是文本操作、属性样式操作、元素操作。4：响应内容解析完毕，可以在客户端获取并使用了。实质：Ajax代码就是js代码，
复制链接

扫一扫