AJAX二

二.简单的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连接

会出现跨域错误。要使用服务器开启页面的方式打开

http://127.0.0.1:8080/01_ajax.html

2.404，接口或者资源位置出错，前后台代码都需要排查

3.500 服务器代码错误，黑窗口会给你提示

4.不显示不报错----------一步一打桩