二.简单的dom操作
2.使用js的dom获取页面数据
|
由于ajax不使用form 而form具有自动收集数据的功能。 不使用form，就需要使用dom手写代码收集数据 |
①获得承载数据的元素对象
|
<input type="text" id="uname"> var obj=document.getElementById("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详解
|
使用innerHTML可以动态给双标签添加内容 这里的内容，指可以添加其他元素 |
⑤事件
|
通过用户的行为来激发的操作，就是事件 onclick 单击 onblur 焦点移除事件，元素失去焦点，马上调用js onfocus 获取焦点事件，元素获得焦点，马上调用js |
1.名词解释三.ajax
①同步Synchronous
|
在一个任务进行时，不能开启其他任务 同步访问：浏览器在向服务器发送请求，只能等待服务器的响应，不能做其他事情 出现场合 1.地址栏输入url，访问页面 2.a标签的跳转 3.form提交 |
②异步Asynchronous
|
在一个任务开启时，可以同时进行其他任务 异步访问：浏览器向服务器发送请求时，用户还能在页面上做其他操作 出现场合 1.用户名注册的验证 2.百度的搜索建议 3.股票软件 |
2.什么是Ajax
|
Asynchronous JavaScript and xml 异步的 js 和 xml(数据承载方式) 本质：使用js提供的异步对象XMLHttpRequest 异步的向服务器提交请求 并且接受服务器响应回来的数据 |
3.使用ajax
|
1.创建异步对象 2.创建请求 3.发送请求 4.接收响应数据 |
①创建异步对象
|
var xhr=new XMLHttpRequest(); |
②.创建请求
|
xhr.open(method,url,isAsyn); xhr.open("get","http://127.0.0.1:8080/login",true); method:请求的方法，注意必须是字符串的形式"get" "post" url:请求的url，注意必须是字符串 isAsyn:是不是要使用异步，boolean值，true/false |
③.发送请求
|
xhr.send(formdata); 注意，get方法，没有formdata请求主体 所以在使用get方法时，这里的参数可以不填写，也可以写null |
④.绑定监听，接收响应数据
|
1.xhr.readyState属性 用于表示xhr对象的请求状态，一共5个状态 0：请求尚未初始化 1: 已经打开服务器连接，正在发送请求 2：接收响应头 3：接收响应主体 4：响应数据接收完毕 |
①服务器4.代参数的get方法
②ajax代码
|
xhr.open("get",url,true) url="/demo/get_login?uname="+$uname+"&upwd="+$upwd |
错误总结
1.跨域错误
|
使用ctrl+b打开页面，进行ajax连接 会出现跨域错误。要使用服务器开启页面的方式打开 |
2.404，接口或者资源位置出错，前后台代码都需要排查
3.500 服务器代码错误，黑窗口会给你提示
4.不显示不报错----------一步一打桩