使用form

form使用如下:

<body>
    <!-- 表单标签,允许用户和服务器之间交互数据 -->
    <form action="https://www.sogou.com" method="get">
        <!-- 要求提交的数据以键值对的结构来组织 -->
        <input type="text" name="stduentName">
        <!-- input type=submit 构造了一个特殊的 提交按钮. value 属性描述了按钮中的文本 -->
        <!-- 点击这个按钮就会触发 form 表单的 "提交操作", 也就是构造 http 请求发给服务器 -->
        <input type="submit" value="提交">
    </form>
</body>

运行代码后会出现下面的页面

现在我们在里面输入一些内容后提交,然后进行抓包,查看我们发出去的GET方法请求

提交之后,搜狗页面正常弹出,并无其他异常(因为搜狗的服务器没有处理该请求的响应)

抓包之后,我们可以看到请求中的 URL里面多了query string 并且有一个键值对

接下来我们再发送一个POST方法请求

<body>
    <!-- 表单标签,允许用户和服务器之间交互数据 -->
    <form action="https://www.sogou.com" method="post">
        <!-- 要求提交的数据以键值对的结构来组织 -->
        <input type="text" name="studentName">
        <!-- input type=submit 构造了一个特殊的 提交按钮. value 属性描述了按钮中的文本 -->
        <!-- 点击这个按钮就会触发 form 表单的 "提交操作", 也就是构造 http 请求发给服务器 -->
        <input type="submit" value="提交">
    </form>
</body>

抓包后的效果和GET有些许差异,POST里面的URL并没有变化,但是body里面多了一个和GET一样的键值对,如下:

可以看到,对于form发出的POST请求来说,body里面的数据格式和query string非常类似,也是键值对的结构.

但是form标签只能构造GET和POST,无法构造PUT、DELETE等方法.

使用ajax

ajax是浏览器提供的一种通过js构造HTTP请求的方式.

将其翻译过来就是:Asynchronous Javascript And XML

其中Asynchronous 代表的是异步的.

而ajax也是异步进行的.

这里的所谓异步,就是将这一段代码执行"发送请求"操作之后,不必等待服务器响应回来就可以立即往下执行,当服务器的响应回来了之后,再由浏览器通知到代码中.

html中,通过ajax发起HTTP请求,就属于是异步的方式.

在代码中使用ajax有两种方式:

js原生提供的ajax的api (但是原生的api特别难用,此处使用第二种).

jquery提供的ajax api,它针对原生的api进行了封装,更加好用.

如下:

在jquery中,$是一个特殊的全局对象.

jquery的api 都是以$的方法的形式来引出的.

此处之后一个参数,这个参数是一个对象(用大括号表示的键值对)

<body>
    <!-- 引入jquery -->
    <script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
    <script>
        $.ajax({
            type: 'get',
            url: 'https://www.sogou.com?studentName=zhangsan',
            //此处success 就声明了一个回调函数, 就会在服务器响应返回到浏览器的时候触发该回调
            //正是此处的 回调 体现了 "异步"
            success: function(data) {
                console.log("当浏览器返回的响应到达浏览器之后,浏览器触发该回调,通知到代码中");
            }
        });
        console.log("浏览器立即往下执行后续代码");
    </script>
</body>

相关的说明都在代码里面提到了.

当运行之后,会先向服务器发出请求,然后继续往下执行代码,当响应收到后,再执行success方法进行回调.只不过此处无法接收正确的回应.

并且如果代码中如果有多个ajax,他们收到的响应并不一定和构造的顺序相同,因为异步的实现基本都要使用多线程的处理,所以出现"后发先至"也是正常的情况.

运行之后,我们查看Console,如下:

可以看到,里面输入了最下面的一个log,之后就都是异常.

不过这里出现异常是因为,搜狗的服务器无法响应我们发出的请求.

和form相比,ajax的功能更强:

支持PUT、DELETE等方法

ajax发送的请求可以灵活设置header

ajax发送的请求的body也可以灵活的设置

构造HTTP请求

使用form

使用ajax

猜你喜欢