文章目录
- 一、通过form表单构造HTTP请求
- 二、通过ajax构造HTTP请求
- 1.发送GET请求
- 2.发送POST请求
- 3.封装ajax方法
一、通过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中的地址改成其他服务器的地址),大概率是会出错的
跨域问题是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>