通过form表单、ajax构造HTTP请求

最新推荐文章于 2024-05-15 07:45:45 发布

dhdhdhdhg

最新推荐文章于 2024-05-15 07:45:45 发布

阅读量3.5k

点赞数 5

分类专栏： web 文章标签： ajax http javascript

本文链接：https://blog.csdn.net/m0_51405559/article/details/122987668

版权

web 专栏收录该内容

22 篇文章 2 订阅

订阅专栏

文章目录

一、通过form表单构造HTTP请求
二、通过ajax构造HTTP请求

一、通过form表单构造HTTP请求

form（表单）是HTML中的一个常用标签，可以用于给服务器发送GET或者POST请求

不要把form拼写成from

form的重要参数：

action：构造的HTTP请求的URL是什么
method：构造的HTTP请求的方法是GET还是POST（form只支持GET和POST）

<!-- form表单提交数据到服务端：action是请求的url，method是请求方法 -->
<!-- get方法默认请求数据都放在queryString，post方法默认在body上 -->
<!-- post默认提交方式（Content-Type）为表单格式(application/x-www-form-urlencode) -->
<!-- 尝试修改请求方法get和post都测试一下 -->
<form action="http://abc.com" method="get">
	<!-- 表单中的控件（文本框，密码框，单选复选框，下拉菜单等）都以name为键，用户输入/选择的内容为值 -->
	<!-- 键=值，多个之间&间隔 -->
	<input type="text" name="username">
	<input type="password" name="password">
	<input type="submit" value="提交">
</form>

显示结果：
在这里插入图片描述

点击“提交”，这里就会构造http请求并发送出去
构造的http请求（请求方法为GET）：
在这里插入图片描述
请求方法为POST：

体会form代码和HTTP请求之间的对应关系

form的action属性对应HTTP请求的URL
form的method属性对应HTTP请求的方法
input的name属性对应queryString的key
input的内容对应queryString的value

二、通过ajax构造HTTP请求

ajax全称Asynchronous JavaScript And XML，是2005年提出的一种JavaScript给服务器发送HTTP请求的方式
特点是可以不需要刷新页面/页面跳转，就能进行数据传输

1.发送GET请求

假如前端html采用表单提交数据，url会发生改变
假如想实现页面局部的内容改变（如发生一个http请求，用响应返回的数据，来生成一些内容）
点击产生改变的按钮就会发送HTTP请求
在这里插入图片描述

之后使用响应的HTTP数据来构造html元素
在这里插入图片描述

这个过程，页面不会刷新，就是使用ajax技术
如果是使用form表单提交：页面会刷新（url会改变为form提交设置的url）

如果不希望页面改变，就存在问题：url设置为页面的路径？（这样的方式不好）
即使form指定的url是同样的页面，页面也会刷新，之前输入的内容（文本框、密码框等）都没了

创建text.html，在< script >标签中编写以下代码：

// XMLHttpRequest对象就是ajax发送请求及处理响应的对象
let xhr = new XMLHttpRequest();
//设置一个异步回调函数到ajax对象的属性中
//注意：这里只是函数的声明，不会执行，而是发送http请求，对应的事件发生，才调用回调函数
xhr.onreadystatechange = function(){
    //xhr.readyState属性：
    // 0: 请求未初始化：还没发送http请求
    // 1: 客户端和服务器连接已建立
    // 2: 服务端已接收请求
    // 3: 服务端正在处理请求
    // 4: 客户端已收到服务端返回的响应，且响应已就绪
    if(xhr.readyState == 4){
        //xhr.status属性：响应状态码
        console.log(xhr.status);
        //xhr.responseText属性：响应正文
        console.log(xhr.responseText);
    }
}
//设置请求方法和url，此时还没有发送http请求
xhr.open("GET","http://42.192.83.143:8089/AjaxMockServer/info")
//send：正式发送http请求，也可以设置请求正文（body）数据
xhr.send();//send(),send(body)两种方式

fiddler抓包：
在这里插入图片描述
控制台输出：

注意：可能存在跨域问题： 请求当前html页面路径中服务器地址（ip/域名+port）如果和ajax请求的服务器地址不一样，就是跨域。如把send中的地址改成其他服务器的地址（比如http://www.sogou.com/index.html这种），大概率是会出错的
在这里插入图片描述
跨域问题是ajax中存在的（和html、js、服务器无关），服务器还是能接收请求，并返回响应
ajax为了安全起见，如果发现响应头没有设置允许跨域的信息，就会报错

<body>
    <div style="height: 1000px; background-color: red;"></div>
    <button id="ajax_btn">ajax提交</button>
    <!-- 刚开始显示一段文字，ajax提交以后，不刷新页面，改变段落的内容 -->
    <p>初始化显示的内容</p>
</body>
<script>
    //绑定按钮提交事件
    let ajaxBtn = document.querySelector("#ajax_btn");
    let p = document.querySelector("p");
    ajaxBtn.onclick = function(){
        //点击按钮，就发送http请求
        let xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function(){
            if(xhr.readyState == 4){
                console.log(xhr.status);
                console.log(xhr.responseText);
                p.innerHTML = "响应状态码："+xhr.status+"响应正文："+xhr.response;
            }
        }
        xhr.open("GET","http://42.192.83.143:8089/AjaxMockServer/info")
        xhr.send();
    }   
</script>

展示结果：
在这里插入图片描述
ajax产生的原因：

js是单线程运行（代码一行一行的运行，不能同时执行两段代码）
ajax异步：发送ajax请求后（send调用），后边的js代码还可以继续执行，在ajax事件发生以后，由系统内核来通知执行ajax的回调函数

ajax的作用：

不刷新页面发送http请求：用户体验更好
想同一个页面，动态通过响应数据来生成局部的页面内容，如果是服务端直接返回变化后的html，也不好：数据传输量比较大，效率比较低：使用ajax，效率比较高

2.发送POST请求

相对于GET改动内容：
在这里插入图片描述

抓包结果：
在这里插入图片描述

3.封装ajax方法

把ajax的功能封装成一个函数，以后使用的时候就比较方便了

<script>
    // 封装一个ajax函数，参数args为一个js对象
    //定义args对象属性如下：
    //method：请求方法
    //url：请求服务器其资源的路径
    //Content-Type：请求正文的格式
    //body：请求正文
    //callback：回调函数，客户端接收到响应数据后调用
    function ajax(args){//var ajax = function(){}
        let xhr = new XMLHttpRequest();
        //设置回调函数
        xhr.onreadystatechange = function(){
            //4:客户端接收到响应后回调
            if(xhr.readyState == 4){
                // 回调函数可能需要使用响应的内容，作为传入参数
                args.callback(xhr.status,xhr.responseText);
            }
        }
        xhr.open(args.method,args.url);
        // 如果args中，Content-Type属性有内容，就设置Content-Type请求头
        if(args.contentType){//js中，除了判断boolean值，还可以判断字符串，对象等，有值就为true
            xhr.setRequestHeader("Content-Type",args.contentType);
        }
        //如果args中，设置了body请求正文，调用send(body)
        if(args.body){
            xhr.send(args.body);
        }else{//如果没有设置，调用send()
            xhr.send();
        }
    }
    //调用ajax封装的函数
    let request = {
        method: "POST",
        url:"http://42.192.83.143:8089/AjaxMockServer/info",
        contentType:"application/x-www-form-urlencoded",
        body:"username=abc&password=123",
        callback: function(status,response){//调用的时候传入了两个参数，定义对应的参数
            console.log("响应状态码："+status+",响应正文："+response);
        }
    };
    ajax(request);
    //ajax函数调用的json对象参数，也可以不声明，直接传入函数
    // ajax({
    //     method: "POST",
    //     url:"http://42.192.83.143:8089/AjaxMockServer/info",
    //     contentType:"application/x-www-form-urlencoded",
    //     body:"username=abc&password=123",
    //     callback: function(status,response){//调用的时候传入了两个参数，定义对应的参数
    //         console.log("响应状态码："+status+",响应正文："+response);
    //     }
    // });
</script>

dhdhdhdhg

关注

5
点赞
踩
9

收藏

觉得还不错? 一键收藏
打赏
1
评论
通过form表单、ajax构造HTTP请求

文章目录一、通过form表单构造HTTP请求二、通过ajax构造HTTP请求1.发送GET请求2.发送POST请求3.封装ajax方法一、通过form表单构造HTTP请求form（表单）是HTML中的一个常用标签，可以用于给服务器发送GET或者POST请求不要把form拼写成fromform的重要参数：action：构造的HTTP请求的URL是什么method：构造的HTTP请求的方法是GET还是POST（form只支持GET和POST）<!-- form表单提交数据到服务..
复制链接

扫一扫