二、DOM操作(简单DOM操作)
- Ajax 提交请求, 不使用 form 表单但是form表单自带收集数据的功能如果不使用 form, 就没有自动收集数据的功能了需要手写 DOM 操作, 收集数据
-
完整的 JavaScript 组成
1、js 核心代码: Ecmascript ES6
2、DOM: Document Object Model 文档对象模型
为了能够操作 html 中元素的(内容, 值, 样式)。
3、BOM: Browser Object Model 浏览器对象模型
让 JS 动态的操作浏览器 -
使用 JS 的 DOM 获取页面的数据
① 找到元素对象获取 HTML 的元素对象
<input type="text" id="uname" >
var obj = document.getElemenetById("uname")
② 通过这个对象获取/修改数据
1、input 对象的数据, 是使用 value 属性
obj.value = "123"
设置
var res = obj.value
获取2、所有的双标签, 使用 innerHTML 获取/修改 数据
obj.innerHTML = "123"
设置
var res = obj.innerHTML
获取③ ES6的简化
ES6 提出, 可以使用元素的 id 直接代表这个元素的对象
所以, 代码简化为以下
<input type="text" id="msg" >
<h4 id="h"></h4>
h.innerHTML = msg.value
④ innerHTML 详解
使用 html 可以动态的给双标签添加内容
这里的内容只可以添加其他元素⑤ 事件
通过用户的行为来激发的操作, 就是事件
onclick 点击
onblur 焦点移除事件, 元素失去焦点, 执行事件回调
onfocus 获取焦点事件, 元素获取焦点, 执行事件回调
三、Ajax
-
名词解释
① 同步 Synchronous在一个任务进行时, 不能开始其他任务
同步访问: 浏览器在向服务器发送请求时, 只能等待服务器的响应, 不能做其他事
出现场合
1、地址栏输入 url, 访问页面
2、a 标签的跳转
3、form 表单的提交② 异步 Asynchronous
在一个任务开启时可以进行其他任务
异步访问: 浏览器向服务器发送请求时, 用户还能再页面上做其他操作
出现场合
1、用户名注册的验证
2、百度的搜索建议
3、股票软件 -
什么时 Ajax
Asynchronous JavaScript And XML
异步的 JS 和 XML(数据的承载方式)本质: 使用 JS 提供的异步对象 XMLHttpRquest(xhr)
异步的向服务器发送请求
并且接收服务器响应回来的数据 -
使用 Ajax
① 创建异步对象var xhr = new XMLHttpRquest()
② 创建请求
xhr.open(method, url, isAsyn)
method
: 请求的方法, 注意必须是字符串的形式 “get” “post”
url
: 请求的接口URL, 必须为字符串
isAsyn
: 是不是要使用异步, boolean值, true/falsexhr.open("get", "http://127.0.0.1:8080/login", true);
③ 发送请求
xhr.send(formdata)
注意, get 方法没有 formdata 请求主体
所以在使用 get 方法时, 这里的参数可以不填写, 也可以写 null④ 绑定监听, 接收响应数据
1、xhr.readyState 属性
用于表示 xhr 这个对象的请求状态,一共有 5 个状态:
0: 请求尚未初始化
1: 已经打开服务器连接, 正在发送请求
2: 接收响应头
3: 接收响应主体
4: 响应接收完毕练习:创建接口 /myajax_1 返回一个响应 res.send(“我又一遍”)
创建 02_ajax_html 一个按钮点击后获取上面响应 -
带参数的 get 方法
① 服务器
② ajax 代码xhr.open("get", URL, true)
var url = "/demo/get_login?uname="+$_uname+"&upwd="+$_upwd
错误总结
![]()
在本地打开的 html 文件, 进行 ajax 连接, 出现 跨域错误
要使用服务器打开的方式
![]()
404, 接口或资源位置出错, 前后台代码都需要排查
![]()
500 服务器代码错误, 服务器控制台会有提示
- 不显示不报错 ——————> 一步一打桩