Ajax（day02）

二、DOM操作（简单DOM操作）

• Ajax 提交请求, 不使用 form 表单但是form表单自带收集数据的功能如果不使用 form, 就没有自动收集数据的功能了需要手写 DOM　操作, 收集数据

1. 完整的 JavaScript 组成

   1、js 核心代码: Ecmascript ES6
   2、DOM: Document Object Model 文档对象模型
   为了能够操作 html 中元素的(内容, 值, 样式)。
   3、BOM: Browser Object Model 浏览器对象模型
   让 JS 动态的操作浏览器

2. 使用 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

1. 名词解释
   ① 同步 Synchronous

   在一个任务进行时, 不能开始其他任务
   同步访问: 浏览器在向服务器发送请求时, 只能等待服务器的响应, 不能做其他事
   出现场合
   1、地址栏输入 url, 访问页面
   2、a 标签的跳转
   3、form 表单的提交

   ② 异步 Asynchronous

   在一个任务开启时可以进行其他任务
   异步访问: 浏览器向服务器发送请求时, 用户还能再页面上做其他操作
   出现场合
   1、用户名注册的验证
   2、百度的搜索建议
   3、股票软件

2. 什么时 Ajax

   Asynchronous JavaScript And XML
   异步的 JS　和　XML（数据的承载方式）

   本质: 使用 JS 提供的异步对象 XMLHttpRquest（xhr）

   异步的向服务器发送请求
   并且接收服务器响应回来的数据

3. 使用 Ajax
   ① 创建异步对象

   var xhr = new XMLHttpRquest()

   ② 创建请求

   xhr.open(method, url, isAsyn)
method: 请求的方法, 注意必须是字符串的形式 “get” “post”
   url: 请求的接口URL, 必须为字符串
   isAsyn: 是不是要使用异步, boolean值, true/false

   xhr.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 一个按钮点击后获取上面响应

4. 带参数的 get 方法
   ① 服务器
   
   ② ajax 代码

   xhr.open("get", URL, true)
var url = "/demo/get_login?uname="+$_uname+"&upwd="+$_upwd

错误总结

1. 

在本地打开的 html 文件, 进行 ajax 连接, 出现 跨域错误
要使用服务器打开的方式

2. 

404, 接口或资源位置出错, 前后台代码都需要排查

3. 

500 服务器代码错误, 服务器控制台会有提示

4. 不显示不报错 ——————> 一步一打桩