博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
原生ajax的请求封装get和post
阅读量:4486 次
发布时间:2019-06-08

本文共 996 字,大约阅读时间需要 3 分钟。

一个完整的AJAX请求包括五个步骤:

  1.创建XMLHTTPRequest对象

  2.使用open方法创建http请求,并设置请求地址

  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);
        }
    }
}

转载于:https://www.cnblogs.com/lxl0419/p/8522753.html

你可能感兴趣的文章
博客园博文生成章节目录
查看>>
ruby 模块 的引入
查看>>
CI Weekly #21 | iOS 持续集成快速入门指南
查看>>
xml 校验
查看>>
Jquery获取输入框属性file,ajax传输后端,下载图片
查看>>
深入浅出Visual_C动态链接库(Dll)编程(宋宝华)----整理(word)
查看>>
docker运行环境安装-后续步骤(二)
查看>>
Python学习——02-Python基础——【3集合与函数】
查看>>
NPOI导出excel表格应用
查看>>
tensorflow从入门到放弃-0
查看>>
解锁scott用户
查看>>
多态的理解
查看>>
AspNet Core 发布到Linux系统和发布IIS 注意项
查看>>
Windows添加.NET Framework 3.0 NetFx3 失败 - 状态为:0x800f0950
查看>>
隐藏显示终端的光标(shell echo,linux c printf)
查看>>
SQL Server 存储过程
查看>>
JSP 标准标签库(JSTL)(JSP Standard Tag Library)
查看>>
导入项目遇到的问题: Some projects cannot be imported because they already exist in the workspace....
查看>>
华为:字符集合
查看>>
用Okhttp框架登录之后的Cookie设置到webView中(转)
查看>>