Ajax的使用

Ajax的使用

注册界面案例详解

实现Ajax主要的类是XMLHttpRequest，四个步骤：

1、创建XMLHttpRequest对象
2、准备发送网络请
3、开始发送网络请求
4、指定回调函数

当前端界面需要从服务器获取数据的时候，其实就只要访问一个u地址，制定特定的参数即可。

模拟了页面的跳转，请求url

创建对象；

做兼容处理（IE6）

​ if 变量声明；else

准备发送

​ POST、GET请求（php接口文件）

返回数据字符串格式。

/* 根目录

./*当前目录

实例

Get

post

xhr.setRequestHeader（"Content-Type"，"application/x-www-form-urlencoded"）

将字符串转换为对象

​ 满足json格式

1、将Ajax请求改为同步请求。

open（'get'，'./server/checkUsername.php？username='+uname,false）

出现：

第一：界面会卡顿，卡顿多长时间，取决于网络速度

第二：xhr.onreadystatechange的回调将不会被执行，需要修改代码后才能获取到数据，将回调去除即可。

同步异步的原理

js顺序向下执行，单线程；

事件队列，存储回调函数的“容器”，js执行完毕后才执行；

异步：单线程+事件队列。

浏览器并非单线程！改变值之后会触发这个方法的调用。

数据格式

XML

类似于html标签，取数类似于数组

JSON

类似于键值对，json.parse()转换为数组

Ajax的封装