ajax请求:
是一种 前后端 数据交互方式
特点 :
1, 局部请求,不会造成页面跳转
2, 异步请求
3, 异步程序是在所有同步程序执行结束之后执行,不会影响同步程序的执行
原生的ajax请求有固定的请求步骤,只需要按照步骤执行就可以了
get 方式 , 请求步骤
1, 使用 JavaScript 定义的 内置构造函数
创建 ajax请求的 实力话对象
const xhr = new XMLHttpRequest();
2, 使用 ajax 实例化对象中的 open() 方法
给 ajax 请求, 设定 请求方式 和 请求url地址
xhr.open( 'get' , 'url地址?键名=数值&键名=数值...' );
get方式,发送请求,在url地址栏之后,拼接传参数据
语法 与 超链接传参语法相同
? 问号 间隔 url地址 和 参数数据
之后以 键值对的形式 设定键名和数值
多个键值对,使用, & 符号间隔
3, 使用 ajax 实例化对象中的 send() 方法 发送请求
get方式,send() 没有参数
xhr.send();
4, 使用 ajax 实例化对象中的 onload 方法 接收响应结果
xhr.onload = ()=>{ 请求结束,执行的程序 }
post方式,发送ajax请求
1, 创建 ajax 请求对象
const xhr = new XMLHttpRequest();
2, 通过open()设定请求方式为post,设定url请求地址
post方式,请求地址能写参数
xhr.open( 'post' , './demo.php' );
3, post方式,必须设定请求头
固定的设定语法
xhr.setRequestHeader( 'Content-Type' , 'application/x-www-form-urlencoded' );
4, 通过send()发送请求,并且携带参数
携带参数的语法与超链接语法相同,只是没有问号
xhr.send('name=张三&age=18&sex=男');
5, 通过 onload 执行 请求结束的程序
xhr.onload = ()=>{console.log(xhr);}
Comments | NOTHING