前端知识体系之ajax网络请求与jsonp与cors解决跨域问题

ajax理解
快速上手

//创建对象
var xhr = XMLHttpRequest()
//准备连接
xhr.open('get','xxx.json')
//发送请求
xhr.send()
//监听请求,与接收数据
xhr.onreadystatechange = function (){
	if (xhr.readyState ===4){
		console.log(this)
		//这里会返回有两个接收数据的响应的东西
		//this.response
		//this.responseText
	}
}

监听请求状态的xhr.readyState ：请求状态码 的分析
0 ：请求还没发生（open执行之前）
1 ：请求已经建立，还没发送（执行了open）
2 ：请求已经发送，正在处理（执行了send）
3 ：请求处理中，有一部分数据可以用，但还有没有完成的数据。
现在来讲解两种获取响应的类型的区别
第一种 this.responseText
这种获取的是字符串形式的响应体
第二种 this.response
这种获取到的结果根据this.reponseType 的变化而变化，比如如果设置了reponseType 的类型是json
然后就是jQuery中ajax的使用

//导入jquery后
$.ajax('',  //url
{
	data:{
		
	},
	dataType:'json',//服务器返回json格式数据 设置了这个之后，服务的就不用去设置conten-type
	type:'post',//HTTP请求类型
	timeout:10000,//超时时间设置为10秒；
	beforeSend: function(xhr){  //所有发送请求的操作（open，send）之前
		 
	},
	complete: function (xhr){  //请求完成（不论成败）
		
	},
	success:function(data){
		
	},
	error:function(xhr,type,errorThrown){
		
	}
});

但是一般我们用到的时候是这样用的

$.get('url',     //第一个参数是url
{ },             //第二给参数是请求的数据
function (res){  //第三个是请求成功后的回调函数
	
}
)

$.post('url',     //第一个参数是url
{ },             //第二给参数是请求的数据
function (res){  //第三个是请求成功后的回调函数
	
}
)

//下面这种方式的特点是自动把数据进行解码，并且变成json的样子
$.getJSON('url',     //第一个参数是url
{ },             //第二给参数是请求的数据
function (res){  //第三个是请求成功后的回调函数	
}
)

跨域
同源策略：同源指域名，协议，端口
域名就相当 www. 这个东西
协议就比如 http
端口默认是 80
同源的才可以进行跨域请求
不同源的不可以进行跨域请求
其实可以通过下面这几个标签解决跨域问题
一、标签
img 、link 、script、 iframe 解决跨域
不过上面这些标签都只能通过连接属性 来发送请求，但是无法拿到响应结果

//link标签的作用其实是链入一个文档，通过rel属性申明链入的文档与当前文档之间的关系
<link rel="stylesheet" href=""> //stylesheet就表明引入的是css样式

二、jsonp方法
原理就是再客户端借助script标签请求服服务端的，然后服务端返回带有函数调用的js全局函数调用的脚本，把返回给客户端的数据放到脚本上，脚本回到客服端再拿出来。但只能是get请求，并且没有有效的错误捕获机制
三、cors方法
XMLHttpRequest Level2 提出了 CORS 模型，即跨域资源共享，它不是一个新的API，而是一个标准规范，当浏览器发现该请求需要跨域时，就会自动在头信息中添加一个 Origin 字段，用以说明本次请求来自哪个源。服务器根据这个值，决定是否同意这次请求