Web前端之HTML基础（5）——DOM、Ajax

最新推荐文章于 2022-10-24 09:08:40 发布

百里一兔

最新推荐文章于 2022-10-24 09:08:40 发布

阅读量208

点赞数

分类专栏： Web_Html Web_Ajax Web_DOM 文章标签： 20190905

本文链接：https://blog.csdn.net/lb569484787/article/details/100546535

版权

Web_Html 同时被 3 个专栏收录

14 篇文章 0 订阅

订阅专栏

Web_Ajax

4 篇文章 0 订阅

订阅专栏

Web_DOM

2 篇文章 0 订阅

订阅专栏

一.简易dom操作

1.完整的javascript的组成
（1）js核心：ECMA Script ES5~ES6
（2）DOM：Document Object Model 文档对象模型
让js动态操作页面元素
（3）BOM：Browser Object Model 浏览器对象模型
让js动态操作浏览器

2.简化的获取元素对象

<div id="d1"></div>

var elem1=document.getElementById("d1");

H5支持直接使用id表示标签对象

3.获取/修改双标签的内容

console.log(d1.innerHTML)
d1.innerHTML=""

4.获取/修改input标签的值

t1.value

总结
dom操作标签内容（简化版）的总结
1° 要操作的标签，必须有id
2° 通过id直接调用innerHTML或者value属性
双标签 id.innerHTML
input标签 id.value

5.HTML元素的事件
允许通过用户的行为来激发的操作就是事件

onclick

文本框或者密码框失去焦点的事件 onblur
文本框或者密码框获取焦点的事件 onfocus

二.Ajax

1.名词解释
（1）同步 Synchronous
在一个任务进行中时，不能开启其它任务。
同步访问：浏览器向服务器发送请求时，浏览器只能等待服务器的响应，不能做其它的任何事情
出现场合
1° 地址栏输入网址访问网页(网速不好时，更明显)
2° a标签跳转
3° submit提交

（2）异步 Asynchronous
在一个任务开启时，可以开启其它的任务。
异步访问：浏览器在向服务器发送请求时，不耽误用户在网页的其它操作
出现场合
1° 用户名的验证
2° 聊天室
3° 搜索建议
4° 股票走势图

2.Ajax
Asynchronous javascript and Xml(现在使用json居多)
本质：使用js提供的异步对象(XMLHttpRequest)
异步向服务器发送请求，并接收响应回来的数据。
ajax可以无刷新的效果更改页面的布局内容

3.异步请求的步骤
（1）创建异步对象
（2）绑定监听事件(接收请求响应)
（3）打开链接（创建请求）
（4）发送请求

4.创建异步对象
标准创建 ie8以上的版本支持的创建方式

var xhr=new XMLHttpRequest();

IE8以下版本创建
通过判断 window.XMLHttpRequest 来判断浏览器是否支持标准创建

if(window.XMLHttpRequest){
  var xhr=new XMLHttpRequest();
}else{
 var xhr=new ActiveXObject("Microsoft.XMLHttp");
}

5.异步对象的属性和方法（绑定监听事件）
（1）readyState属性
值0~4，5个状态
0:请求未初始化
1:已经打开到服务器的连接，正在发送请求
2:接收响应头
3:接收响应主体
4:响应数据接收成功

（2）status 服务器的响应状态码
当status的值为200时，表示服务器正确处理了请求，并给出了响应

（3）onreadystatechange
当xhr对象的readyState属性值发生改变时自动的激发

xhr.onreadystatechange=function(){
 //此方法会被调用4次
 //最后一次，readyState==4
 //并且响应状态码为200时，才是我们要的响应结果 xhr.status==200
  if(xhr.readyState==4 && xhr.status==200){
   //把响应数据存储到变量result中
   var result=xhr.responseText;
   }
}

6.创建请求，打开连接

xhr.open(method,url,isAsyn);

method:请求的方法（get/post…），一个string格式
url：访问的服务器的地址（接口），string
isAsyn:是否采用异步的方式请求 boolean (true异步/false同步)

7.发送请求

xhr.send(body)

使用get方法，body为null，或者不写
使用post方法，要创建请求主体

练习
在demo路由中创建一个接口
响应输出一句话，“这是我的第一个ajax程序”
在demo路由中创建一个接口 /ajaxhappy
响应输出一句话"我终于不报错啦！开森开森开森！"

demo.js

const express=require('express');
var router=express.Router();
router.get('/ajaxDemo',(req,res)=>{
	res.send('这是我的第一个ajax程序');
})
router.get('/ajaxhappy',(req,res)=>{
	res.send('我终于不报错啦！开森开森开森！');
})
module.exports=router;

01_ajax.html 使用ajax异步得到响应，在页面的div中显示

const express=require('express');
const demoRouter=require('./demo.js');
var server=express();
server.listen(3000,()=>{
	console.log('创建服务器成功');
});
server.use(express.static('./public'));
server.use('/demo',demoRouter);

01_ajax.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>ajax练习</title>
</head>
<body>
    <div id="d1"> </div>
    <script type="text/javascript">
        var xhr=new XMLHttpRequest();
        xhr.onreadystatechange=function(){
            if(xhr.readyState==4 && xhr.status==200){ 
            var result=xhr.responseText;
            d1.innerHTML=result;
            console.log(result);
            }
        }
        xhr.open('get','/demo/ajaxDemo',true);
        xhr.send(null);
    </script>
</body>
</html>

8.使用get，发送带参数的请求

三、作业：

1.在demo.js中创建接口userlist
在接口中查询出所有用户数据，并响应给前端
2.创建网页getlist.html。在页面中添加一个按钮
点击按钮发送异步请求，获取后端userlist接口响应回来的数据

中午作业：完成密码框提示的部分
常见错误总结

有标点符号写错
Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
跨域错误，页面是在本地打开，要使用访问服务器的方式打开
127.0.0.1:3000/**.html

百里一兔

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Web前端之HTML基础（5）——DOM、Ajax

（待整理）一.简易dom操作1.完整的javascript的组成1.js核心：ECMA Script ES5~ES62.DOM：Document Object Model 文档对象模型让js动态操作页面元素3.BOM：Browser Object Model 浏览器对象模型让js动态操作浏览器2.简化的获取元素对象var elem1=document.getElementBy...
复制链接

扫一扫

专栏目录