通过form表单、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>
  • 5
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

dhdhdhdhg

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值