ajax2019-04-23

Ajax这种技术能够向服务器请求额外的数据而无须卸载页面(即刷新）

一.实现同步流程：

1、得到核心对象XMLHttpRequest对象

var xhr = new XMLHttpRequest();

2、准备/打开请求

open(请求类型GET/POST,请求的路径,是否异步true/false);

3、发送请求

send(参数/null);

注：如果是get请求，参数直接跟在请求路径后面，send()方法中设置null;

如果是post请求，有参数则设置参数，无参数设置为null;

4、解析响应数据

1、判断响应是否成功 status=200 （404=未找到资源;500=服务器异常;200=成功）

2、得到后台响应数据  responseText

例子：

二.实现异步流程：

1.得到核心对象XMLHttpRequest对象

var xhr = new XMLHttpRequest();

2.准备/打开请求

open(请求类型get/post,请求的路径，是否异步true/false);

3.发送请求

send(参数/null);

注：如果是get请求 ，参数直接跟在请求路径后面，send()方法中设置null；

        如果是post请求，有参数则设置参数，无参数设置为null；

4.解析响应数据：

        1.判断响应是否成功  status=200  (404=未找到资源；500=服务器异常；200=成功连接)

        2.得到后响应数据  responseText

例子：

三.post请求

实现流程：

异步：

1、得到核心对象XMLHttpRequest对象

var xhr = new XMLHttpRequest();

2、准备/打开请求

open(请求类型GET/POST,请求的路径,是否异步true/false);

3、发送请求

send(参数/null);

注：如果是get请求，参数直接跟在请求路径后面，send()方法中设置null;

如果是post请求，有参数则设置参数，无参数设置为null;

4、解析响应数据

1、判断响应是否成功 status=200 （404=未找到资源;500=服务器异常;200=成功）

2、得到后台响应数据  responseText

例子：

四.封装

实现流程：同异步流程

例子：