前端Ajax-Day32

标签：调用 请求 前端 Day32 send xhr Ajax open onreadystatechange

XMLHttpRequest：用于请求服务器上的资源。

 

 

使用XMLHttpRequest发起get请求：

① 创建xhr对象

② 调用xhr.open函数：请求类型和请求地址

③ 调用xhr.send函数

④ 监听xhr.onreadystatechange事件

　　　　　  // 创建xhr对象
        let xhr = new XMLHttpRequest();

        // 调用open函数
        xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks');
        
        // 调用send函数
        xhr.send();

        // 监听onreadystatechange事件
        xhr.onreadystatechange = function() {
            if(xhr.readyState === 4 && xhr.status === 200) {
                // 获取服务器响应数据
                console.log(xhr.responseText);
            }
        }

 

xhr对象的readyState属性：表示当前ajax请求的状态

 

使用xhr发起带参数的请求：在open方法内的url属性里写入？和指定参数，若有多个参数则使用&进行连接。

 

查询字符串：

 

GET请求携带参数的本质：将参数以查询字符串的形式追加到url后

URL编码：使用英文字符表示非英文字符。

 

encodeURI进行编码，decodeURI进行解码。

 

使用xhr发起post请求：

① 创建xhr对象

② 调用xhr.open函数

③ 设置Content-Type属性：setRequestHeader（'Content-Type'，'application/x-www-form-urlencoded'）

④ 调用xhr.send函数，将数据以查询字符串的方式发送给服务器

⑤ 监听xhr.onreadystatechange事件

 

　　　　　// 创建xhr对象
        let xhr = new XMLHttpRequest();

        // 调用open函数
        xhr.open('POST', 'http://www.liulongbin.top:3006/api/addbook');

        // 设置Content-Type属性
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

        // 调用send函数，指定发送数据
        xhr.send('bookname=水浒传&author=施耐庵&publisher=上海图书出版社');

        // 监听onreadystatechange事件
        xhr.onreadystatechange = function() {
            if(xhr.readyState === 4 && xhr.status === 200) {
                console.log(xhr.responseText);
            }
        } 

 

标签：调用,请求,前端,Day32,send,xhr,Ajax,open,onreadystatechange
From： https://www.cnblogs.com/LWHCoding/p/16704220.html