原生javascript实现AJAX的代码示例

本篇文章给大家带来的内容是关于原生javascript实现AJAX的代码示例,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

原生js使用ajax使用代码,代码如下

var xhr1 = new XMLHttpRequest;        xhr1.open("POST", 'http://47.92.121.171:17788', true);        xhr1.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');        xhr1.onreadystatechange = function () {            if (xhr1.readyState == 4 && xhr1.status == 200) {                console.log("打印用户信息1" + xhr1.responseText);            }        }        xhr1.send("code=p_001&name=aaaaaa&pas=123456&belong=aabbccdd");

登录后复制

如果需要ajax运行方法完成后调用结果的话 需要使用回调函数 或者 promise

回调函数

     private loadXMLDoc(url, sendcode, cfunc) {        this.xmlhttp = new XMLHttpRequest;        this.xmlhttp.open("POST", url, true);        this.xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');        this.xmlhttp.onreadystatechange = cfunc;        this.xmlhttp.send(sendcode);    }    private myFunction() {        this.loadXMLDoc("http://47.92.121.171:17788", "code=p_001&name=aaaaaa&pas=123456&belong=aabbccdd",()=>{            if (this.xmlhttp.readyState == 4 && this.xmlhttp.status == 200) {                console.log("3")                console.log("打印用户信息1" + this.xmlhttp.responseText)             }        });    }

登录后复制

使用promise

this.getGameServer().then(function (res) {            console.log("res" + res);        }).catch(function (rej) {            console.log("rej" + rej);        });private getGameServer() {        return new Promise(function (resolve, reject) {            var xhr = new XMLHttpRequest;            xhr.open("POST", 'http://47.92.121.171:9002/rout/get_game_servers', true);            xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');            xhr.onreadystatechange = function () {                        if (xhr.readyState == 4 && xhr.status == 200) {                    resolve(xhr.responseText);                }            }            xhr.send("game=1&shang=common");        });    }

登录后复制

立即学习“Java免费学习笔记(深入)”;

以上就是原生javascript实现AJAX的代码示例的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2737837.html

(0)
上一篇 2025年3月8日 01:40:37
下一篇 2025年2月28日 10:07:48

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • javascript中如何判断对象的数据类型?

    本篇文章给大家带来的内容是关于javascript中如何判断对象的数据类型?,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 对js中不同数据的布尔值类型总结:false:空字符串;null;undefined;0;nan。…

    编程技术 2025年3月8日
    200
  • 使用node express框架实现文件的上传(代码示例)

    本篇文章给大家带来的内容是关于使用node express框架实现文件的上传(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 本文主要采用node express框架实现,模板引擎用的是ejs 这是app.js文…

    编程技术 2025年3月8日
    200
  • javascript事件接收与发送机制理解(代码示例)

    本篇文章给大家带来的内容是关于javascript事件接收与发送机制理解(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 其实事件的发送与接收机制很简单,只是没有去思考而已 在node模块中使用的就会比较的多如 …

    编程技术 2025年3月8日
    200
  • web接口前置的性能优化讲解

    本篇文章给大家带来的内容是关于web接口前置的性能优化讲解,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 上个Q做了一波web性能优化,积累了一点点经验 记录分享一下。 先分享一个比较常用的接口前置 的优化方案吧 优化前首…

    2025年3月8日 编程技术
    200
  • 如何用JavaScript将字符串进行大小写转换(图文详解)

    javascript是前端开发中非常重要的一部分,它可以实现页面的功能,正在学习javascript的小伙伴,你知道如何用js将一个小写字符串转换为大写吗?这篇文章就和大家讲讲js字符串大小写转换的方法,有一定的参考价值,感兴趣的小伙伴可以…

    2025年3月8日
    200
  • JavaScript如何获取鼠标点击的位置?获取的三种方法汇总

    其实我们一直都在dom中和元素打交道,这也是手机交互的一个比较常用的方面,但是很多程序员比较失望,在不同的浏览器中,会出现不同的结果,下面我们就来讲一下利用js如何获取鼠标点击的位置,并且为您总结详细的教程。 一:鼠标相对于屏幕 如果我们涉…

    2025年3月8日
    200
  • Node.js中操作MySQL数据库的基础教程

    本篇文章给大家带来的内容是关于node.js中操作mysql数据库的基础教程,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 本文是一篇使用mysql这个npm模块操作MySQL数据库的基础教程。 不涉及MySQL的安装和配…

    2025年3月8日 编程技术
    200
  • js中运行机制的详细分析(示例解析)

    本篇文章给大家带来的内容是关于js中运行机制的详细分析(示例解析),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 一、引子 本文介绍JavaScript运行机制,这一部分比较抽象,我们先从一道面试题入手: console.…

    2025年3月8日
    200
  • vue实现的三个步骤讲解(附代码)

    本篇文章给大家带来的内容是关于vue实现的三个步骤讲解(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 Vue是当今热门的框架,他可以进行数据双向绑定,为什么vue会大受欢迎,我知道的原因大致如下? 1.传统改变d…

    编程技术 2025年3月8日
    200
  • javascript的数据类型与其转换的详解

    本篇文章给大家带来的内容是关于javascript的数据类型与其转换的详解,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 一、简介 JavaScript 语言的每一个值,都属于某一种数据类型。JavaScript 的数据类…

    编程技术 2025年3月8日
    200

发表回复

登录后才能评论