ajax请求及其用法详解

什么是ajax

首先，ajax中的四个字母的意思分别是：
a : async 异步
j : JavaScript
a : and
x : XML
ajax请求是一个异步的 JavaScript 和 XML 的数据交互

ajax技术最初只能和 XML格式的内容进行交互
现在发展到可以和任意的后端程序内容进行交互

现在是前后端数据交互的主要手段

超链接跳转传参和form表单跳转传参
都必须要跳转页面,而且是去后端程序页面
不利于前端开发
ajax发送请求，完成数据交互的优点是：

• 不用跳转页面,在当前页,就可以显示数据交互的结果
• 所有的页面渲染操作,生成页面操作,都是在前端完成,减轻服务器的操作压力
• 不用跳转,减轻服务器压力

基本步步骤过程

1. 创建一个ajax对象
   const xhr = new XMLHttpRequest();

2. 配置定义请求信息内容
   xhr.open( ‘请求方式’ , ‘请求地址?键名=数值&键名=数值…’ );
   get方式可以在请求地址之后,拼接参数

3. 发送ajax请求
   xhr.send();

4. 接收相应内容
   xhr.onload = function(){}

小结

ajax请求的本质

通过JavaScript方式,与后端程序以及数据库,进行交互
之前的方式是 form表单 或者 超链接 都属于 HTML方式

ajax请求的基本过程原理

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

优点

1. 不用跳转页面,也可以在局部进行发送请求,获取响应结果
2. 页面渲染,可以通过前端操作完成,减轻后端程序压力

程序执行步骤

1,创建ajax实例化对象
    const xhr = new XMLHttpRequest();

2,设定ajax对象,请求信息
    请求的方式
    请求的对象地址

    如果是get方式,可以在请求地址之后拼接参数

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

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

3,如果是post方式,必须要设定请求头,确保可以正确传参
  get方式不要设定

    语法形式是固定格式的内容
    xhr.setRequestHeader('content-type' , 'application/x-www-form-urlencoded');

4,发送请求

    如果是get方式,是直接发送请求
    xhr.send()

    如果是post方式,需要在send()中定义参数
    xhr.send('键名=数值&键名=数值...')

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

为了使用方便，我们可以将ajax请求的两种方式，分别封装成函数：

ajax的最基本封装

get请求

// 将 get请求方式 和 post请求方式 封装为两个函数
function getAjaxSend(url , cb){
    // 1,创建ajax实例化对象
    const xhr = new XMLHttpRequest();

    // 2,设定ajax请求信息
    // 不需要定义请求的参数,直接拼接在url之后就可以了
    xhr.open('get' , url);

    // 3,发送请求
    xhr.send();

    // 4,接收相应
    xhr.onload = function(){
        // 调用参数函数,执行内容是响应体
        cb(xhr.response);
    }
}

post请求

// post请求方式
// 要比get方式,多设定一个请求头
// 还要多设定一个请求参数的数据
function postAjaxSend(url , cb , dataStr){
    // 1,创建ajax实例化对象
    const xhr = new XMLHttpRequest();

    // 2,设定ajax请求信息
    xhr.open('post' , url);

    // post方式,必须要设定请求头
    xhr.setRequestHeader('content-type' , 'application/x-www-form-urlencoded');

    // 3,发送请求
    xhr.send(dataStr);

    // 4,接收相应
    xhr.onload = function(){
        // 调用参数函数,执行内容是响应体
        cb(xhr.response);
    }
}

ajax 的兼容处理

创建ajax对象的方法

标准浏览器

const xhr = new XMLHttpRequest();

低版本IE浏览器

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

兼容语法

if(XMLHttpRequest){
    var xhr = new XMLHttpRequest();
}else{
    var xhr = new ActiveXObject('Microsoft.XMLHTTP');
}

接收响应时,也要做兼容处理

标准方法

// 当请求结束时，触发程序
xhr.onload = function(){
    // 判断请求是否成功   
    if(xhr.readyState == 4 && /^2\d{2}$/.test(xhr.status)){}
}

兼容低版本IE语法

注：ajax状态码解释在本段内容下面

当ajax请求状态码发生改变时,触发程序

状态码 从 0 - 1 - 2 - 3 - 4 每次状态码改变,都会触发程序

位置不同,执行次数不同

情况1 : 写在  const xhr = new XMLHttpRequest(); 创建对象下
会监听到每一次的状态码的改变,一共是4次

情况2 : 写在  xhr.send() 后,也就是整个程序的最后
0-1 状态码的改变没有监听到,只会有之后3次的状态改变监听

不管如何,一定可以监听到最后状态码改变为4时的状态

/^2\d{2}$/.test(xhr.status)
2,开头,之后有2位数字  表示以2开头的,3位数值

200 - 299 之间  xhr.status >= 200 && xhr.status <= 299
两种都可以,哪个能理解,用那个

语法

xhr.onreadystatechange = function(){
    // 当状态码为4时,请求状态为2开头的3位数值时
    // 有正确的响应体内容
    if(xhr.readyState == 4 && /^2\d{2}$/.test(xhr.status)){
        // 执行程序
    }
}

兼容处理实例

<button></button>
<script>
	// 通过ajax方式来请求访问PHP程序
	
	const oBtn = document.querySelector('button');
	
	oBtn.addEventListener('click', () => {
	
	    if (XMLHttpRequest) {
	        const xhr = new XMLHttpRequest();
	    } else {
	        const xhr = new ActiveXObject('Microsoft.XMLHTTP');
	    }
	
	    console.log(xhr);
	
	    xhr.open('get', './ajax1.php');
	
	    xhr.send();
	
	    // 标准语法
	    // xhr.onload = function(){
	    //     console.log(xhr);
	    // }
	
	    // 兼容语法1 , 正则表达式
	    xhr.onreadystatechange = function () {
	        if (xhr.readyState == 4 && /^2\d{2}$/.test(xhr.status)) {
	            console.log('请求成功');
	        }
	    }
	
	    // 兼容语法2 
	    // xhr.onreadystatechange = function () {
	    //     if (xhr.readyState == 4 && (xhr.status >= 200 && xhr.status <= 299)) {
	    //         console.log('请求成功');
	    //     }
	    // }
	})
</script>

ajax 的状态码

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的异步请求

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

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

2,定义 ajax对象.open() 请求内容 --- 同步程序
    参数1:请求方式
    参数2:请求url地址
    参数3:是否异步
            默认:异步 true
            设定:同步 false

3,发送ajax请求  --- 看 open()的设定 
                   根据open()的设定,来判断是否是异步
                   open() --- true 或者 没有第三个参数 是异步
                   open() --- false 是异步

4,接收请求内容

实例

<button></button>
<script>
	// 通过ajax方式来请求访问PHP程序
	
	const oBtn = document.querySelector('button');
	
	oBtn.addEventListener('click', () => {
	
	 
	    const xhr = new XMLHttpRequest();
	
	    console.log(xhr);
	
	    // 没有第三个参数,或者定义为true,是异步执行
	    // 如果第三个参数,是false,表示同步执行
	    xhr.open('get', './ajax1.php' , false);
	
	    // ajax请求是同步执行,要先定义监听判断
	    xhr.onreadystatechange = function () {
	        if (xhr.readyState == 4 && /^2\d{2}$/.test(xhr.status)) {
	            console.log('请求成功');
	        }
	    }
	
	    // 如果是异步执行,虽然先写的 xhr.send(),但是实际执行是在 第4步之后
	    // 也就是在定义监听判断之后
	    // 也就是先监听,再执行发送请求,所有的ajax状态码的改变,都被监听2,3,4
	
	    // 如果是同步指定,先执行ajax请求,执行完ajax请求之后,也就是状态码已经是4
	    // 再来执行监听判断程序,状态码已经是4,不会再改变,无法起到监听效果
	    
	    // 如果是同步程序,监听判断,必须要写在 send()之前
	
	    // 实际项目中ajax请求绝对不会用同步
	    // 一定要是异步执行
	
	    xhr.send();
	})
</script>

小结:

1,ajax的同步设定
   open()第三个参数是false
2,ajax的同步异步的区别
   监听判断要写在send()之前
   send()要写在所有程序最后
3,实际项目中,绝对不会用同步形式