HTTP/Ajax

最新推荐文章于 2024-07-25 12:41:07 发布

十情故里

最新推荐文章于 2024-07-25 12:41:07 发布

阅读量361

点赞数

分类专栏：前端文章标签： ajax http

本文链接：https://blog.csdn.net/weixin_53137201/article/details/124419885

版权

前端专栏收录该内容

21 篇文章 1 订阅

订阅专栏

HTTP/Ajax

原生

介绍

ajax就是实现网页不刷新的情况下完成页面的交互数据效果，从而拿到新的数据更新网页

两种格式介绍

json和xml
json格式是现在普遍的一种格式，是以对象的格式返回数据，我们只需要通过 . 就可以拿到想要的数据
xml格式是以html格式返回的数据，现在普遍很少见，以了解为主

fetch

原生请求，使用的是promise类型的风格，很少用，老版本浏览器不兼容
这个请求会先进行练习服务器，然后成功之后再次调用原型身上的json()方法，然后返回一个promise，再次通过.then就可以拿到成功之后的数据了

ajax优点

无需刷新更新网页，通过事件更新网页，

ajax缺点

没有回退功能和浏览器记录，跨域的问题，seo不太友好，seo是搜索引擎，简单来说就是数据是请求之后再渲染到界面的，初始界面是没有这些数据的，如果搜索这个数据是搜索不到的

http协议

http协议指的就是服务端和客户端之间的通信规则，例如客户端与服务端通信称之为请求，服务端与客户端通信称之为响应，分别为请求报文，响应报文，

请求

分为请求行，头，空行，体，行里面指的就是请求的方式，get还是post，所携带的参数，http的版本信息，头里面指的就是内容类型，编码集等等，post是有请求体的，里面一般是发送给后端所需要的参数

响应

分为行，头，空行，体，行里面指的就是http版本，状态码，请求是否成功，头里面是类型，字符集，大小，打包方式，体里面是返回的数据

同源策略

分为请求协议，域名/ip，端口，当三者相同的时候时候就是同源策略，跨域指的就是当这三者有一个不相同的时候就是跨域

原生发送请求

分为四步
第一步创建http，第二步设置请求的方式和请求路径，第三步是发送请求，第四步是拿到返回响应数据

 第一步创建http实例	const xhr = new XMLHTTPRequest()
 第二步配置请求方式以及路径	xhr.open("get","http://10.2.5.10:8080/getServer")
 第三步发送请求	xhr.send()
 第四步监听状态码改变	xhr.onreadystatechange = function(){
 	if(xhr.readyState === 4){
 		if(xhr.status === 200){
 		console.log("ok")
 		}
 	}
 }
 在这里做一下解释，状态码分为0，1，2，3，4
 0指的就是创建http实例，1指的是配置请求方式和请求路径，2指的是send发送请求，3指的是服务端返回部分数据，但是并没有完全返回，4指的是数据全部返回
 
 返回状态码分为2开头的，3开头的，4开头的，5开头的，下面介绍一些常见的，不过多全部介绍
 2开头的都是请求成功的，比如常见的200指的是请求成功，一般是请求接口拿数据，201指的是创建成功，一般是更新修改数据
 4开头的都是请求错误的，比如常见的404指的就是网页未找到，400指的是请求的语法出错，401指的是没有授权，403指的是服务器拒绝你的访问，408请求超时
 5开头的都是服务端错误
 CORS指的是跨域的问题
 
 
 console.log(xhr.status)	输出的是响应状态码，ok
 console.log(xhr.statusText)	输出的是响应文本，200，201，404，500那些
 console.log(xhr.response)	响应结果，返回的数据

请求传递参数

get中直接在路径后面传递就可以

 xhr.open("get","http://10.2.5.10:8080/getServer?name=张三&age=19")

post传递参数可以传递任意类型的参数
```
 xhr.send("post传递过去的参数")
```

转换格式

接受到服务端传递的参数进行转换成json格式
```
 JSON.parse(要转换的数据)
```
设置返回结果格式为json
```
 xhr.responseType = 'json'
```

服务端将json格式转换成字符串格式

```
 JSON.stringify(要转换的数据)
```

超时设置

设置请求时间，超出等于该时间则取消发送
```
 xhr.timeout = 2000
```
设置超时之后的回调

 xhr.ontimeout = function(){
 	console.log("发送超时")
 }

设置发送不过去的时候回调，一般都是无网时候

 xhr.onerror = function(){
 	console.log("网路出现错误")
 }

取消请求

 实现逻辑：创建http请求，服务端返回数据假如有延迟，发送的时候就是暂时挂起，在次期间可以点击取消发送，但是前提这个http实例是一个实例对象，因为要取消的是一个http请求
 xhr.abort()

防止重复发送请求

 实现逻辑：定义一个状态，创建完http实例的时候这个状态编程true，然后在判断状态码等于4的时候将这个状态变成之前的false，下次再点击的时候判断这个状态是true还是false，如果为true代表正在发送，就需要把上一次的给取消发送

Ajax

介绍

ajax是通过原装的http请求封装成的一个请求，不再需要自己使用原生的去写请求了，直接使用封装好的方法即可，大概封装方法就是将传递过来的值判断类型为post还是get，如果为get则在open里面填入对应的接口路径，如果有参数的话就将参数进行遍历改写成对应的字符串格式然后拼接到路径后面，然后判断一下dataType为什么类型，默认为json，如果为其他类型，则将返回类型进行替换掉，最后send进行发送请求，如果为post请求则是将传递过来的data直接放到send里面，其他与上面一致，最后判断返回的xhr.readyState === 4，之后判断xhr.status >=200 && xhr.status < 300则成功，直接使用success(xhr.responseText)回调出去，反之则回掉出去error()

请求方法

方法分为三种， $. p o s t ，$ .get，$.ajax，其中get和post请求传递参数方法一致，这两种也比较简单，适合简单的发送请求

 $.get("接口路径",{传递参数},function(data){
 
 },'json')
 
 $.post("接口路径",{传递参数},function(data){
 
 },'json')
 
 $.ajax({
 	url:'接口路径',
 	data:{要传递的数据},
 	type:'请求类型',
 	dataType:'响应体结果格式，一般为json',
 	success: function(data){
 		请求成功之后的操作，data为返回的数据
 	},
 	timeout:请求超时时间，例如2000,
 	error: function(){
 		请求失败之后的回调
 	}
 })