原生js发送ajax请求---ajax请求篇(一)

这篇具有很好参考价值的文章主要介绍了原生js发送ajax请求---ajax请求篇(一)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

在原生js中我们使用的是XMLHttpRequest对象来发送ajax请求

主要步骤就是:

    1.创建XMLHTTPRequest对象

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

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

  4.注册事件

  5.更新界面

(1) get方式

//步骤一:创建异步对象
var ajax = new XMLHttpRequest();
//步骤二:设置请求的url参数,参数一是请求的类型,参数二是请求的url,可以带参数,动态的传递参数starName到服务端
ajax.open('get','getStar.php?starName='+name);
//步骤三:发送请求
ajax.send();
//步骤四:注册事件 onreadystatechange 状态改变就会调用
ajax.onreadystatechange = function () {
   if (ajax.readyState==4 &&ajax.status==200) {
    //步骤五 如果能够进到这个判断 说明 数据 完美的回来了,并且请求的页面是存在的
    console.log(ajax.responseText);//输入相应的内容
    }
}

 (2)post方式

//创建异步对象  
var xhr = new XMLHttpRequest();
//设置请求的类型及url
//post请求一定要添加请求头才行不然会报错
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
 xhr.open('post', '02.post.php' );
//发送请求
xhr.send('name=fox&age=18');
xhr.onreadystatechange = function () {
    // 这步为判断服务器是否正确响应
  if (xhr.readyState == 4 && xhr.status == 200) {
    console.log(xhr.responseText);
  } 
};

 二、也可以对原生js发送ajax请求进行封装

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

}

以上就是使用原生方式的ajax请求。

原生js发送ajax请求---ajax请求篇(一),前端,javascript,javascript,ajax,前端

 文章来源地址https://www.toymoban.com/news/detail-650911.html

到了这里,关于原生js发送ajax请求---ajax请求篇(一)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • AJAX 使用 JavaScript 的 `XMLHttpRequest` 对象来向服务器发送异步请求

    AJAX 是一种使用异步 HTTP (Ajax) 请求获取和发送数据的技术。它使得网页能够进行异步更新,而不需要重新加载整个页面。通过使用 AJAX,可以在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页内容。 AJAX 使用 JavaScript 的 XMLHttpRequest 对象来向服务器发送异步请

    2024年01月16日
    浏览(53)
  • 前端如何中断请求 ( axios、原生 ajax、fetch)

    使用场景 在前端开发中,我们经常需要中断请求来优化性能或处理特定的业务需求。以下是一些常见的使用场景: 比如 重复请求:当页面中多个组件并发调用同一个接口时,在第一个请求返回后,我们可能需要中断其他组件对该接口的调用,以避免重复请求和冗余数据。这

    2024年02月04日
    浏览(50)
  • Java对接百度文心一言,Java发送POST请求,类似前端AJAX

    这是项目中使用的对接百度文心一言后端代码

    2024年02月15日
    浏览(36)
  • 原生js XMLHttpRequest发送 get post 请求 解决跨域 及 注意事项

    2、使用xhr发起GET请求 四个步骤: ①:创建 xhr对象 ②:调用 xhr的open()函数(open中传递两个参数,参数一是GET/POST请求方式,参数二是请求的URL地址) ③:调用 xhr.send()函数 ④:监听 xhr.onreadystatechange事件 xhr发起GET请求的完整代码 直接上示例 报错内容是这个 Failed to execute

    2024年02月16日
    浏览(55)
  • 【AJAX】使用JQ发送AJAX发送请求

    运行结果  获取的响应是字符串,如何把字符串变成JSON对象 方法一:JSON.parse(data) 方法二:设置响应数据类型为json格式 // $.get/post(发送地址, 发送参数{key:value,key:value...} 回调函数(function(data){}[data:响应体]),,\\\'json)     $.get(\\\'http://127.0.0.1:8000/server\\\', { a: 100, b: 200 }, function (data) {

    2024年02月13日
    浏览(46)
  • 【Ajax】笔记-使用fetch函数发送AJAX请求

    fetch()是XMLHttpRequest的升级版,用于在JavaScript脚本里面发出 HTTP请求,本文章向大家介绍fetch()的用法,主要包括fetch()的用法使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。 Fetch() 是 window.fetch 的 JavaScript polyfill。 全局 fetc

    2024年02月15日
    浏览(41)
  • 【Ajax】笔记-Axios与函数发送AJAX请求

    1、Axios是一个基于Promise的HTTP库,而Ajax是对原生XHR的封装; 2、Ajax技术实现了局部数据的刷新,而Axios实现了对ajax的封装。 ajax: 本身是针对MVC的编程,不符合现在前端MVVM的浪潮 基于原生的XHR开发,XHR本身的架构不清晰,已经有了fetch的替代方案 JQuery整个项目太大,单纯使用

    2024年02月16日
    浏览(43)
  • 【AJAX】axios发送请求

    引入axios 以下是axios的GET请求格式: 以下是axios的POST请求格式: 注意:params中的键值对数据是拼接在url上,无论是post还是get请求。 axios

    2024年02月13日
    浏览(56)
  • django中使用ajax发送请求

    浏览器向网站发送请求时 是以URL和表单的形式提交的post 或get 请求,特点是:页面刷新 除此之外,也可以基于ajax向后台发送请求(异步) 依赖jQuery 编写ajax代码 1、在django 中使用ajax发送post请求,通过下面方法免除csrf_token 2、想要去数据库中获取数据时:可以是对象也可以

    2024年02月13日
    浏览(40)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包