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 字段,用以说明本次请求来自哪个源。服务器根据这个值,决定是否同意这次请求