原生ajax的请求过程

最新推荐文章于 2023-05-15 11:59:13 发布

5.24 ต

最新推荐文章于 2023-05-15 11:59:13 发布

阅读量247

点赞数 1

分类专栏： Ajax

本文链接：https://blog.csdn.net/weixin_42243479/article/details/101102346

版权

Ajax 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文详细解析了原生Ajax中的GET和POST请求。首先介绍了GET请求的使用场景和工作原理，接着深入探讨了POST请求及其数据提交方式。通过对这两个基本请求类型的掌握，能更好地实现异步数据交互。

摘要由CSDN通过智能技术生成

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&amp;&amp;ajax.status==200) {
        // console.log(ajax.responseText);

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

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

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