js中ajax

一、ajax请求发送

发送ajax请求有三步,分别是:
1.创建 xhr 对象
2.配置 xhr 对象
3.请求配置完成,发送请求

// 1. 创建 xhr 对象
let xhr = new XMLHttpRequest();
// 2. 配置 xhr 对象;
xhr.open( 请求方式 , 请求路径 , 是否启用异步 - 这个参数默认忽略)
// 3. 请求配置完成,发送请求; 
xhr.send( null );

二、ajax响应接收

获取响应数据,通过xhr.onload函数中的xhr.responseText获取响应数据

let xhr = new XMLHttpRequest();
xhr.open( 请求方式 , 请求路径 , 是否启用异步 - 这个参数默认忽略)
xhr.send( null );
xhr.onload = function(){
    // 通过 xhr.reponseText 获取响应数据; 
    // console.log( xhr.responseText )
}

三、get请求

在xhr.open中,配置请求方式、请求路径,get请求的参数是拼接在url后面的,使用ajax发送get请求的代码如下:

let xhr = new XMLHttpRequest();
xhr.open("GET" , "http://xxxxxxx?key1=value1&key2=value2" );
xhr.send();
xhr.onload = function(){
    if( xhr.status === 200 ){
        console.log( xhr.responseText );
    }
}

四、post请求

在xhr.open中,配置请求方式、请求路径,post请求的参数是放在请求体中,所以需要在xhr.send中传输数据;另外,post请求有时需要配置请求头,配置方式是xhr.setRequestHeader(请求头);使用ajax发送post请求的代码如下:

let xhr = new XMLHttpRequest();
xhr.open("POST" , "http://xxxxxx");
// 给POST请求添加请求头
xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
xhr.send(" key1=value1&key2=value2");
xhr.onload = function(){
    if( xhr.status === 200 ){
        console.log( xhr.responseText );
    }
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值