[JavaScript知识库]原生ajax

原生ajax

在网页不刷新的情况下可以请求数据然后实现网页局部刷新或者渲染

使用ajax发送请求步骤

1、创建一个XMLHttpRequest实例
2、xml的open方法
3、xml的监听（onreadystatechange）
4、send发送请求

//1、创建一个XMLHttpRequest实例
let xml=new XMLHttpRequest()
console.log(xml) 
//2、xml的open方法
//里边的三个参数（请求方式，url地址，同步异步）
//请求方式：get和post
xml.open("GET","https://cnodejs.org/api/v1/topics",false)
//如果请求的方式是post，就需要设置请求头
xml.setRequestHeader("token","totokenString")

//3、xml的监听
xml.onreadystatechange=function(){
console.log(xml.readyState)  //4   //xml的状态
	//xml.readyState本身的一些状态
		//readyState:0 请求初始化，刚刚实例化XMLHttpRequest
		//readyState:1 服务器建立连接，调用open方法
		//readyState:2 请求被接受
		//readyState:3 请求正在处理
		//readyState:4 请求处理完成，响应已就绪
console.log(xml.status)//200
	//http状态码
		//200：请求成功，浏览器会把响应的内容显示在浏览器中
		//301/302/303:重定向
		//400:语义有误，当前请求无法被服务器理解
		//401:当前请求需要用户验证
		//403:服务器已经理解请求，但是拒绝执行
		//404:客户端有误，资源找不到
		//500:服务器内部错误
		if(xml.readyState===4&&xml.status===200){
		console.log(xml.responseText)
		}
}
//4、发送请求,如果不需要参数，就写null
xml.send(null)

Http常见的状态码

分类：
100-199：请求正在处理
200-299：请求成功
300-399：重定向
400-499：客户端错误，资源找不到
500-599：服务器错误

200：请求成功，浏览器会把响应的内容显示在浏览器中
301/302/303:重定向
400:语义有误，当前请求无法被服务器理解
401:当前请求需要用户验证
403:服务器已经理解请求，但是拒绝执行
404:客户端有误，资源找不到
500:服务器内部错误

同源和跨域

同源：协议、域名、端口号都一样就是同源
跨域：协议、域名、端口号有一想不同就是非同源（即跨域）
跨域就是指浏览器不允许当前页面的所在源，去请求另一个源的数据

1、在vue中主要是通过vue脚手架中的vue.config.js文件来配置的，通过proxy来配置跨域的前缀
2、Jsonp是解决跨域的一种解决方案，实现原理主要是利用动态创建script标签，设置src属性，页面要提前定义好callback，后端会返回回调函数执行，并包裹参数callback（data），callback中的参数就是json在src中进行了调用，这样实现了跨域
3、cors:是一个W3C标准，全称是跨域资源共享，它是解决跨域的一种解决方案，它使用额外的HTTP头来告诉浏览器让运行在一个Origin上的Web应用被准许访问来自不同源服务器上指定的资源。当一个资源从该资源本身所在的服务器不同的域、协议、端口请求一个资源时，资源就会发起一个跨域HTTP请求
服务器设置HTTP响应头中Access-Control-Allow-Origin的值，解除跨域限制。
多个域名之间用逗号隔开，"*" 表示允许所有域名的跨域访问 。