几种请求之原生ajax请求

最新推荐文章于 2024-12-08 20:47:17 发布

原创最新推荐文章于 2024-12-08 20:47:17 发布 · 568 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#ajax

前端同时被 2 个专栏收录

6 篇文章

订阅专栏

ajax

1 篇文章

订阅专栏

本文详细介绍了JavaScript中AJAX的GET与POST请求方法，包括创建XMLHttpRequest对象，设置请求方式、URL及请求头，发送请求数据，以及如何通过onreadystatechange事件处理响应。同时，提供了封装请求方法的示例，以便于日常开发中的调用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

js ajax 请求

get 请求

//1.创建异步对象
var ajax = new XMLhttpRequest();
//2.设置请求参数 请求方式 和 请求地址
ajax .open ('get','xxxx/xxxx?xx=xxxx');
//3.发送请求
ajax.send();
//4.注册事件 onreadystatechange 状态改变就会调用
ajax.onreadystatechange = function (){
    if(ajax.readyState == 4 && ajax.staus == 200 ){
    //5.请求成功
        console.log(ajax.responsetext)
    }
}

post 请求

// 1.创建异步对象
var xhr = new XMLHttpRequest();
// 2.设置请求方式和请求地址
//  post 请求要设置请求头
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.open('post','xxx/xxxx');
//3.发送请求
// a.不需要数据的时候
xhr.send()
// b.需要发送data
xhr.send('name=xl&age=22')
//4.注册事件 onreadystatechange 状态改变就会调用
xhr.onreadystatechange = function (){
    if(xhr.readyState == 4 && xhr.staus == 200 ){
    //5.请求成功
        console.log(xhr.responsetext)
    }

总结:

1.创建XMLHTTPRequest对象

2.使用open方法设置和服务器的交互信息

3.设置发送的数据，开始和服务器端交互

4.注册事件

5.更新界面

为了方便使用,我们可以把他封装进方法里面,要用的时候,直接调用就好了

function ajax_method(url,data,method,success) {
    // 异步对象
    var ajax = new XMLHttpRequest();

    // get 跟post  需要分别写不同的代码
    if (method=='get') {
        // get请求
        if (data) {
            // 如果有值
            url+='?';
            url+=data;
        }else{
        }
        // 设置 方法 以及 url
        ajax.open(method,url);
        // send即可
        ajax.send();
    }else{
        // post请求
        // post请求 url 是不需要改变
        ajax.open(method,url);
        // 需要设置请求报文
        ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        // 判断data send发送数据
        if (data) {
            // 如果有值 从send发送
            ajax.send(data);
        }else{
            // 木有值 直接发送即可
            ajax.send();
        }
    }
    // 注册事件
    ajax.onreadystatechange = function () {
        // 在事件中 获取数据 并修改界面显示
        if (ajax.readyState==4&&ajax.status==200) {
            // console.log(ajax.responseText);

            // 将 数据 让 外面可以使用
            // return ajax.responseText;

            // 当 onreadystatechange 调用时 说明 数据回来了
            // ajax.responseText;

            // 如果说 外面可以传入一个 function 作为参数 success
            success(ajax.responseText);
        }
    }

}