原生JS发送ajax请求

最新推荐文章于 2025-05-23 11:03:41 发布

BB_____

最新推荐文章于 2025-05-23 11:03:41 发布

阅读量5.4k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： ajax javascript 异步

本文链接：https://blog.youkuaiyun.com/BB_____/article/details/78088804

javascript 专栏收录该内容

3 篇文章

订阅专栏

这篇博客介绍了如何使用原生JavaScript实现AJAX请求，包括创建XMLHttpRequest对象和使用open()方法设置请求方式，强调了异步特性，并指出在不同浏览器版本中的实现差异。

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

开门见山，直入主题。
既然要发送ajax请求，那ajax是什么呢？

AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。
通俗点来说就是可以让你在不刷新（重载）网页的情况下和你的后台交换数据，从而更新你的网页。

大多数开发者都是使用jQuery框架中封装好的方法 $.ajax 来发送异步请求的，那我们如何用原生的JS来实现呢？想知道的继续看~

1、先创建 XMLHttpRequest 对象

所有现代浏览器 (IE7+、Firefox、Chrome、Safari 以及 Opera) 都内建了 XMLHttpRequest 对象。

通过一行简单的 JavaScript 代码，我们就可以创建 XMLHttpRequest 对象。

var xhr=new XMLHttpRequest();
IE7之前的版本可以使用： var xhr = new ActiveXObject(“Microsoft.XMLHttp”);

        //返回一个XMLHttpRequest对象
        function getXhr(){

            var xhr = null;
            if(window.XMLHttpRequest){
                //非IE浏览器
                xhr = new XMLHttpRequest();
            }else{
                //IE浏览器
                xhr = new ActiveXObject("Microsoft.XMLHttp");
            }
            return xhr;
        }

2、拿到XMLHttpRequest对象后，使用open()方法发送请求，请求方式有两种——get，post

open语法：open(method, url, async, username, password);
method: 请求类型（GET | POST | HEAD）
url：请求主体，大多数浏览器实施了一个同源安全策略，并且要求这个 URL 与包含脚本的文本具有相同的主机名和端口。
async: 是否发送异步请求( false | true )
username,password: 参数是可选的，为 url 所需的授权提供认证资格。如果指定了，它们会覆盖 url 自己指定的任何资格。

        xhr.open('get','你要访问的url',true);
        //每当readyState改变时就会触发onreadystatechange函数
        //0: 请求未初始化
        //1: 服务器连接已建立
        //2: 请求已接收
        //3: 请求处理中
        //4: 请求已完成，且响应已就绪
        xhr.onreadystatechange = function(){
            //处理服务器返回的数据
            if(xhr.readyState == 4 && xhr.status==200){
                //获取服务器返回的数据
                var txt = xhr.responseText;
                //通过拿到的数据更新页面
            }
        }   
        xhr.send(null);

        xhr.open('post','你要访问的url',true);
        xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
        xhr.onreadystatechange = function(){
            if( xhr.readyState==4 && xhr.status==200){
                var txt = xhr.responseText;
                //拿到数据后更新页面
            }
        }
        xhr.send('uname=BB','password=123');