DOM&ajax

最新推荐文章于 2023-03-14 19:49:03 发布

weixin_48871652

最新推荐文章于 2023-03-14 19:49:03 发布

阅读量106

点赞数

文章标签： ajax java javascript

本文链接：https://blog.csdn.net/weixin_48871652/article/details/107740998

版权

1.DOM
1.1DOM概述
在这里插入图片描述

1.2元素操作

这是我的div

java C 那些年错过的大雨

查找：

document.getElementById()
通过标签元素的ID获取到标签对象[id具有唯一性]
document.getElementsByName()
通过标签元素的name属性获取到标签对象，返回的是数组
document.getElementsByTagName()
通过标签名称获取到标签对象，返回的是数组
[node].parentNode：父节点，返回Node
获取指定元素的父节点
doocument.documentElement:获取根节点   <html>
document.body: 获取body节点  <body>
创建和添加：
document.createElement()
创建新的元素
insertBefore(newnode, refnode)
在childNodes中的refnode之前插入newnode，返回Node
appendChild()
父节点追加子节点
删除：
removeChild()
   父节点删除子节点

1.3属性和样式操作

setAttribute(“type”,”button”) --  node.type=’button’
	设置属性
getAttribute(“type”) -- node.type
	获取属性值
removeAttribute()				
删除某属性；
node.style.样式
    设置样式
node.className
    设置样式名

1.4文本操作

innerHTML
设置或者获取带有标签的元素
innerText
设置或者获取元素中的纯文本
1.5事件注册方式
API

onabort用户终止页面加载。
onblur	用户离开对象。失去焦点
onchange	用户改变对象的值。
onclick	用户点击对象。
ondblclick	用户双击对象。
onfocus（和onblur相反）	用户激活对象。
onkeydown	按下键盘。
onkeypress	按压键盘。
onkeyup	松开键盘。
onload	页面完成加载。注释：在 Netscape 中，当页面加载时会发生该事件。
onmousedown	用户按鼠标按钮。
onmousemove	鼠标指针在对象上移动。
onmouseover	鼠标指针移动到对象上。
onmouseout	鼠标指针移出对象。
onmouseup	用户释放鼠标按钮。
onreset	用户重置表单。
onselect	用户选取页面上的内容。
onsubmit	用户提交表单。
onunload	用户关闭页面。
1.注册事件通常有二种方式：

1)元素上直接注册
function $b t n 1 () c o n s o l e . d e b u g (^{'} 我点了^{'}); < i n p u t t y p e = " b u t t o n " i d = " b t n 1 " v a l u e = " 我点 " o n c l i c k = "$ btn1();" />

2)元素.事件名称

var $btn2 = document.getElementById(“btn2”);
$btn2.onclick = function() {
console.debug(‘我又点了’);
}

2.ajax
2.1ajax概述
①传统请求
在这里插入图片描述

②异步请求
在这里插入图片描述

2.2获取ajax对象

创建方式1：判断方式

function getXhr(){
var xhr = null;
if(window.XMLHttpRequest){//针对其他浏览器
xhr = new XMLHttpRequest();
}else{//针对低版本的ie浏览器
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
return xhr;
}

创建方式2：try…catch…方式

var ajax;
try {
//如果是其它浏览器，这句代码可以成功,ajax对象就拿到了
ajax  = new XMLHttpRequest(); 
} catch (e) {
//如果是IE，上面肯定会报错，被抓取,就执行下面这句代码(IE支持)
ajax = new ActiveXObject("Microsoft.XMLHTTP"); 
}

2.3ajax的API

https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/open
在这里插入图片描述

2.4Ajax发送get请求
/* 创建ajax的核心对象 */

function createXhr(){
	try{
		return new XMLHttpRequest();//主流浏览器是支持的
	}catch(e){
		return new ActiveXObject("Microsoft.XMLHTTP"); //针对低版本的IE浏览器支持创建的 核心对象
	}
}
function getTimer(){
	//创建ajax的核心对象
	var xhr = createXhr();
	/*
		发送请求的准备工作
			1.第一个参数：使用GET提交还是POST提交
			2.第二个参数：请求的url地址
			3.第三个参数：请求是同步还是异步
					true:异步
					false:同步
	*/
	xhr.open("GET","/getTimer",true);
	//准备监听函数，监听ajax发送请求状态的改变和响应状态码
	xhr.onreadystatechange = function(){
		//当readyState=4的时候，就代表后台数据已经响应完成
		if(xhr.readyState==4 && xhr.status==200){
			var text = xhr.responseText;
			alert(text);
		}
	}
	//发送请求
	xhr.send();
}

2.5Ajax发送Post请求

function login(){
		//获取用户名的值
		var username = document.getElementById("username").value;
		//获取密码的值
		var password = document.getElementById("password").value;
		//创建ajax的核心对象
		var xhr = new XMLHttpRequest();
		//发送请求的准备工作
		xhr.open("POST","/login",true); 
		//准备监听函数，监听请求状态的改变和状态码的值
		xhr.onreadystatechange = function(){
			//4代表后台响应完毕，200代表响应码成功			
			if(xhr.readyState==4&&xhr.status==200){
				//返回后台相应的数据
				var text = xhr.responseText;
				if("true"==text){
					//跳转到新界面
					location.href="/success.html";
				}else{
					alert("登陆失败!!用户名或者密码错误!!");
				}
			}
		}
		//使用ajax的post提交，你要让后台传递参数，你还得设置请求头信息
		xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");//传递的参数是以普通文本传输的
		//准备参数
		var param = "username="+username+"&password="+password;
		//发送请求
		xhr.send(param);
		//send的语法格式： xhr.send([param]);  注意：只有post提交传递参数才放到send方法内部
	}

2.6ajax解决编码问题

2.6.1解决GET请求时的乱码问题
前台：
1.使用encodeURI对请求地址进行编码。encodeURI会使用utf-8对请求地址中的中文参数进行编码：xhr.open(“get”, encodeURI(uri) , true);
后台：指定字符集进行解码（tomcat8及其以上不需要，默认就是UTF-8）
1.Tomcat可以修改conf/server.xml文件中 ,使得tomcat按UTF-8方式解码；
2.6.2POST请求时的乱码问题
1.因为所有浏览器在进行POST方式提交时都是使用UTF-8方式进行编码的，到了服务器端则默认使用ISO-8859-1方式来解码；
2.所以只需要修改服务器端的解码格式，保证是UTF-8的方式来解码就可以避免乱码：request.setCharacterEncoding(“UTF-8”)；

2.7ajax解决IE缓存问题
(1)发送post请求
(2)欺骗浏览器，请它以为我们正在发送不同的请求：
xhr.open(‘get’,‘random?r=’ + Math.random()); //通过随机数
xhr.open(‘get’,‘random?’ + (new Date()).getTime()); //通过时间戳

weixin_48871652

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
DOM&ajax

1.DOM1.1DOM概述1.2元素操作这是我的div java C 那些年错过的大雨查找：document.getElementById()通过标签元素的ID获取到标签对象[id具有唯一性]document.getElementsByName()通过标签元素的name属性获取到标签对象，返回的是数组document.getElementsByTagName()通过标签名称获取到标签对象，返回的是数组[node].parentNode：父节点，返回Node获取指定元
复制链接

扫一扫