AJAX请求的简单介绍

什么是ajax?

a : async   异步

j : JavaScript

a : and

x : XML

一个异步的 JavaScript 和 XML 的数据交互

ajax请求

ajax请求的本质:通过JavaScript方式,与后端程序以及数据库,进行交互

ajax请求的基本过程原理

 通过 ajax请求 向JavaScript定义好的程序，向后端发送请求以及数据，后端程序跟发送的请求以及数据,对数据库进行操作,并且获取操作结果，ajax请求,通过响应体,获取后端操作结果

优点

1,不用跳转页面,也可以在局部进行发送请求,获取响应结果

2,页面渲染,可以通过前端操作完成,减轻后端程序压力

程序执行步骤

1,创建ajax实例化对象

const xhr = new XMLHttpRequest();

2,设定ajax对象,请求信息

请求的方式

请求的对象地址

get方式

xhr.open('get' , 'url地址?键名=数值&键名=数值...');

post方式

必须要设定请求头,确保可以正确传参

xhr.setRequestHeader('content-type' , 'application/x-www-form-urlencoded');

xhr.open('post' , 'url地址');

3,发送请求

get方式,是直接发送请求

xhr.send()

post方式,需要在send()中定义参数         

xhr.send('键名=数值&键名=数值...')

4，接收响应体

 xhr.onload = function(){
                        请求结束后要执行的内容
                        请求结果,也就是响应体
                        存储在 xhr.response 中
                    }

ajax的兼容处理

创建ajax对象的方法

标准浏览器 

const xhr = new XMLHttpRequest();

低版本IE浏览器   

const xhr = new ActiveXObject('Microsoft.XMLHTTP');

接收响应，兼容处理

xhr.onload = function(){
            // 判断请求是否成功   
            if(xhr.readyState == 4 && /^2\d{2}$/.test(xhr.status)){}
        }

 ajax执行的状态码   xhr.readyState

即时请求失败,也会走完所有的执行步骤

            0 : 表示创建了ajax对象

            1 : 表示设定了ajax对象的open()方法

            2 : 表示浏览器接收到响应体,但是存储在响应报文中,无法使用

            3 : 表示浏览器正在从响应报文中分离响应体

            4 : 表示浏览器分离响应体成功,可以正常使用响应体

ajax请求的响应状态码  xhr.status

 以 2 开头 200-299 表示请求成功

                response中会有正确的响应体

            400-499 500-599 表示请求错误 

                response中会有报错信息

ajax的异步请求

ajax的请求实际上执行分为4步

1,定义建立 ajax对象   --- 同步程序

2,定义 ajax对象.open() 请求内容 --- 同步程序

参数1:请求方式

参数2:请求url地址

参数3:是否异步

     默认:异步 true

            设定:同步 false

3,发送ajax请求  --- 看 open()的设定 

根据open()的设定,来判断是否是异步

open() --- true 或者 没有第三个参数 是异步

open() --- false 是异步

4,接收请求内容