ajax的步骤与封装ajax

最新推荐文章于 2025-03-21 17:10:54 发布

等不回天亮等时光

最新推荐文章于 2025-03-21 17:10:54 发布

阅读量835

点赞数 1

分类专栏： javascript

本文链接：https://blog.youkuaiyun.com/Only_ruiwen/article/details/82317414

版权

javascript 专栏收录该内容

16 篇文章

订阅专栏

本文介绍了Ajax技术的核心概念及其工作原理，并通过一个表单提交的例子详细讲解了如何使用Ajax实现异步数据交换。同时，文章还提供了一个简单的Ajax封装方法，方便开发者在实际项目中复用。

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

今天和大家聊下如何ajax的工作原理和如何封装ajax.
1.什么是ajax
Ajax技术核心是XMLHttpRequest对象(简称XHR)，这是由微软首先引入的一个特性，其他浏览器提供商后来都提供了相同的实现。在XHR出现之前，Ajax式的通信必须借助一些hack手段来实现，大多数是使用隐藏的框架或内嵌框架。
简单来说，它是一门与服务端进行数据交换的技术。
2.何为同步
ajax的核心的思想就是异步，那么什么是异步，什么是同步呢？我在这里以php为例。一个很常见的表单提交。样式也是采用bootstrap
HTML (传统表单提交)

        <div class="container">
            <form action="api/test.php" method="post">
                 <div class="form-group">
                    <input class="form-control" name="username" placeholder="请输入用户名" id="username" />
                </div>
                <div class="form-group">
                    <input class="form-control" name="password" placeholder="请输入密码" id="password"/>
                </div>
                <button class="btn btn-danger" id="btn">发送</button>
            </form>
        </div>

在传统的表单提交中，是同步交互的方式，也就是说它会发生页面的跳转，这么没有问题的。
test.php

<?php
    $username = $_POST["username"];
    echo $username;
?>

这里写图片描述

用get方式，与post方式类似。我们在这里要注意，前台是以什么形式向后台发起请求的呢？我们打开控制台中的network

我们看到username=123&password=123它是以这种方式来发送的，get方式也是一样，这个很重要

3.编写表单的异步提交
ajax它是分为4个阶段:

    1.实例化一个xhr对象

var xhr = new XMLHttpRequest()

    2.连接服务器

xhr.open("get","api/data.php",true)

    3.向服务器发送数据

xhr.send()

    4.等待服务器返回数据onreadystatechange
        使用异步调用的时候，需要触发readystatechange事件，然后检测readyState属性即可

这里写图片描述
然后在判断status状态，

完整代码:

//1.实例化一个xhr对象
            var xhr = new XMLHttpRequest()
//          console.log(xhr)


            //2.连接服务器
            xhr.open("get","api/data.php",true)
            //3.向服务器发送请求
            xhr.send()
//              open()
//                  1.打开方式
//                  2.地址
//                  3.是否异步 异步:阻塞: 前面的代码不会影响到后面的代码  同步:前面的代码会影响到后面的代码
//              send() //发送数据
            //4.等待服务器返回的结果 onreadychange 方法
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4){
                    if(xhr.status==200){
                        console.log(xhr.responseText)
                    }
                }
            }

5.封装ajax()

function ajax(options){
                var xhr = new XMLHttpRequest()
                var params = formsParams(options.data)
                if(options.type=="post"){
                    xhr.open(options.type,options.url,options.async)
                    xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
                    xhr.send(params)
                }else if(options.type == "get"){
                    xhr.open(options.type,options.url + "?"+ params,options.async);
                    xhr.send(null)
                }

                xhr.onreadystatechange = function(){
                    if(xhr.readyState==4 && xhr.status==200){
                        options.success(xhr.responseText)
                    }
                }

            }



             function formsParams(data){
                var arr = [];
                for(var prop in data){
                    arr.push(prop + "=" + data[prop]);
                }
                return arr.join("&");
            }