JavascriptDOM&Ajax
1. DOM
1.1.DOM概述 document Object Model
1.2. 元素操作
<div id="mydiv">这是我的div</div>
<div>
<input type="text" name="username" />
<input type="checkbox" name="hobboy" value="java"/>java
<input type="checkbox" name="hobboy" value="C"/>C
<span>那些年错过的大雨</span>
</div>
查找：
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
设置样式名
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.div {
background-color: green;
}
</style>
<script type="text/javascript">
window.onload = function() { //页面加载完成之后才执行函数
/*属性操作*/
var mydiv = document.getElementById("mydiv")
//添加属性
mydiv.setAttribute("name", "littlevv")
mydiv.setAttribute("name", "Bigvv")
/*样式的操作part1*/
//css
mydiv.style.backgroundColor = "palevioletred"
/*样式的操作part2*/
document.getElementById("div").className = "div";
}
</script>
</head>
<body>
<div id="mydiv">这是我的div</div>
<div id="div">
<input type="text" name="username" value="username" />
<input type="checkbox" name="hobboy" value="java" />java
<input type="checkbox" name="hobboy" value="C++" />C
<span>那些年错过的啊炜</span>
</body>
</html>
1.4.文本操作
innerHTML
设置或者获取带有标签的元素
innerText
设置或者获取元素中的纯文本
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.div {
background-color: aqua;
}
</style>
<script type="text/jscript">
window.onload = function() { //页面加载事件：页面加载完成之后才执行函数
/*文本操作：innerText*/
var div = document.getElementById("div");
/*添加*/
div.innerText = "scsccccc";
//覆盖修改
div.innerText = "<input type='text' value='123456'>";
//删除
div.innerText = "";
/*查*/
var text = div.innerText;
console.debug(text)
/*文本操作：innerHTML*/
/**/
div.innerHTML = "dfasdfasd"
div.innerHTML = "<input type='text' value='123456'>"
console.debug(div.innerHTML)
</script>
</head>
<body>
<div id="mydiv">这是div</div>
<div id="div">
</body>
</html>
1.5. 事件注册方式
\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() { console.debug('我点了'); } <input type="button" id="btn1" value="我点" οnclick=" btn1()console.debug(′我点了′);<inputtype="button"id="btn1"value="我点"onclick="btn1();" />
-
元素.事件名称
var $btn2 = document.getElementById(“btn2”);
$btn2.onclick = function() {
console.debug(‘我又点了’);
}
API
onabort用户终止页面加载。
onblur 用户离开对象。失去焦点
onchange 用户改变对象的值。
onclick 用户点击对象。
ondblclick 用户双击对象。
onfocus（和onblur相反） 用户激活对象。
onkeydown 按下键盘。
onkeypress 按压键盘。
onkeyup 松开键盘。
onload 页面完成加载。注释：在 Netscape 中，当页面加载时会发生该事件。
onmousedown 用户按鼠标按钮。
onmousemove 鼠标指针在对象上移动。
onmouseover 鼠标指针移动到对象上。
onmouseout 鼠标指针移出对象。
onmouseup 用户释放鼠标按钮。
onreset 用户重置表单。
onselect 用户选取页面上的内容。
onsubmit 用户提交表单。
onunload 用户关闭页面。
- 第一种注册
i. 直接在元素上绑定对应的方法
ii. 缺点：js代码与html代码写在一起了
- 第二种注册
i. 通过元素.事件名称去动态绑定
2.Ajax异步请求
2.1. Ajax概述
① 传统请求
② 异步请求
③ 异步请求的使用场景
④ 异步请求的实质
写ajax代码就是写js代码，学习ajax其实是学习使用浏览器的ajax（XMLHttpRequest对象）对象发异步请求，将响应的数据局部更新到页面；
2.2. 如何获取Ajax对象
如何获取Ajax对象
\1. AJAX对象本身是浏览器中的一个对象，但在低版本IE中表现为一个ActiveX。所以在使用JavaScript语言进行创建该对象时，Ajax没有标准化，需要区分不同的浏览器；
\2. 有时候我们会把XMLHttpRequest对象称为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.3. Ajax的Api
https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/open
2.4. Ajax发送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.5. Ajax发送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.6. Ajax请求编码问题
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.2. POST请求时的乱码问题
\1. 因为所有浏览器在进行POST方式提交时都是使用UTF-8方式进行编码的，到了服务器端则默认使用ISO-8859-1方式来解码；
\2. 所以只需要修改服务器端的解码格式，保证是UTF-8的方式来解码就可以避免乱码：request.setCharacterEncoding(“UTF-8”)；
2.7. Ajax请求IE缓存问题
\1. IE浏览器提供的AJAX对象，在发送GET请求时，会先查看是否访问过该地址，如果该地址已经访问过，那么浏览器不再发送请求；
\2. 表现在页面上是，第一次点击某功能会得到数据，但是如果多次反复点击想获取最新数据时页面不会有任何变化，因浏览器发现地址相同而拒绝发出请求；
\3. 但这种页面表现只出现在IE浏览器中，Chrome浏览器和Firefox浏览器都能够实现数据的获取和页面的刷新；
\4. 缓存问题演示：从后台获取随机数更新到页面
\5. 测试结果：ie浏览器存在缓存问题，其他浏览器正常
\6. 如何解决：
(1) 发送post请求
(2) 欺骗浏览器，请它以为我们正在发送不同的请求：
Ø xhr.open(‘get’,‘random?r=’ + Math.random()); //通过随机数
Ø xhr.open(‘get’,‘random?’ + (new Date()).getTime()); //通过时间戳
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
