访问服务器的4种方式、Ajax、前后端交互3个流程、Ajax的工作原理、get请求与post请求

前端访问服务器的几种方式

1.直接在浏览器地址栏输入网址url (网页会跳转,全局刷新)

www.baidu.com

2.HTML的a标签的href属性 (网页会跳转,全局刷新)

<a href="https://autumnfish.cn/api/joke">点我跳转</a>

3.location.href=’’ (网页会跳转,全局刷新)

location.href=’’
location.assign(’’)

document.querySelector('.btn').onclick = function () {
   // location.href = 'http://www.baidu.com'
    location.assign('http://www.baidu.com')
}

4.Ajax技术 (局部刷新)

在网页不跳转的情况下,向服务器请求数据
Ajax应用场景:局部刷新

前后端交互3个流程

1.请求(浏览器)
2.处理(服务器)
3.响应(服务器)
在这里插入图片描述

Ajax的工作原理

1.创建XMLHttpRequest对象(俗称小黄人)

let xhr = new XMLHttpRequest()
内置对象创建实例都要用new

2.设置请求

xhr.open(‘方法’, ‘地址’)
xhr.open(‘get’, ‘https://autumnfish.cn/api/joke’)

3.发送请求

xhr.send()

4.注册响应事件

responseText
xhr.onload = function () {console.log(xhr.responseText)}
不是立即执行的,而是等服务器把数据响应返回才会执行
什么时候执行取决于你的网速快慢
网速影响因素:带宽、天气、服务器、运营商…
在这里插入图片描述

//1.创建小黄人对象XMLHTTPRequest
let xhr = new XMLHttpRequest()
//2.设置请求
xhr.open('get', 'https://autumnfish.cn/api/joke')
//3.发送请求
xhr.send()
//4.注册回调函数
/* 这个函数不是立即执行的,而是等服务器把数据响应返回才会执行(PS:什么时候执行取决于你的网速快慢) */
xhr.onload = function () {
console.log(xhr.responseText)
document.body.innerText = xhr.responseText
}

Ajax发送get请求与post请求

1.Ajax发送get请求参数

1.get传参格式: url?key=value
2.示例: https://autumnfish.cn/api/joke/list?num=10
千万不能有空格!!!
得到的是JSON字符串
在这里插入图片描述

// 1.实例化ajax对象
let xhr = new XMLHttpRequest()
// 2.设置请求方法和地址
// get请求的数据直接添加在url的后面 格式是 url?key=value
xhr.open("get", "https://autumnfish.cn/api/joke/list?num=10")
// 3.发送请求
xhr.send()
// 4.注册回调函数
xhr.onload = function() {
console.log(xhr.responseText)
}

2.Ajax发送post请求参数

1.需要设置请求头(固定语法):
xhr.setRequestHeader(‘Content-type’,‘application/x-www-form-urlencoded’)
注意:这是固定格式,错一个字母都不行,强烈建议复制粘贴
2.使用xhr的send方法发送参数: xhr.send(‘参数名=参数值’);
注意:不要加前面的?
在这里插入图片描述

//(1).实例化ajax对象
let xhr = new XMLHttpRequest()
//(2).设置请求方法和地址
xhr.open("post", "https://autumnfish.cn/api/user/register")
//(3).设置请求头(post请求才需要设置)
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
//(4).发送请求 : 参数格式  'key=value'
xhr.send("username=admin")
//(5).注册回调函数
xhr.onload = function() {
    console.log(xhr.responseText)
}

3.get请求与post请求区别(一)

传参方式区别:get是url传参,post是请求体传参

(1)get请求: 直接在url后面拼接参数

url?key=value

参数在url中,安全性不高

(2)post请求:

1.需要设置请求头(固定语法):

xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded')

注意:这是固定格式,错一个字母都不行,强烈建议复制粘贴
2.使用xhr的send方法发送参数:

xhr.send('参数名=参数值')
xhr.send(`参数名1=参数值1&参数名2=参数值2`)

注意:不要加前面的?

早期是form发送请求:在这里插入图片描述
后端传过来的数据是JSON,要转JS
一般code : 500 是登录失败 , code : 200 是登录成功 , code : 400 是前端有bug
在这里插入图片描述
图片路径后台默认不给域名,要自己加,一般与发送请求的域名相同
http://域名/
在这里插入图片描述

  • 1
    点赞
  • 1
    收藏
  • 打赏
    打赏
  • 1
    评论
©️2022 CSDN 皮肤主题:游动-白 设计师:我叫白小胖 返回首页
评论 1

打赏作者

九九nine9

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

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

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

打赏作者

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

抵扣说明:

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

余额充值