全称:Asynchronous JavaScript And XML
简单的说就是利用一系列技术,使用Ajax模型,在不刷新页面的基础上与服务器进行通信
Ajax实现
都是通过XHR对象实现的,IED范文中以ActiveXObject实现(不考虑)
XHR
全称:XMLHttpRequest,虽然叫做这个,但是XHR可以取回所以类型的资源,并不局限于XML
创建XHR对象
new XMLHttpRequest()创建
属性
属性名 | 描述 |
readyState | 请求的状态 |
onreadystatechange | 当readyState属性改变时会调用 |
response | 相应实体,类型由responseType指定 |
responseType | 指定响应类型 |
status | 请求的响应状态码,只读 |
statusText | 请求的响应状态信息,只读 |
unload | 可以在upload上添加一个事件监听来跟踪上传过程 |
readyState
readyState有不同的值,在不同的值代表不同的状态
0:尚未发送
1:请求已经打开,但是尚未发送
2:已经开始发送
3:发送中
4:发送结束(另外,注意只有当状态为4阶段的时候,才有resonseText信息)
responseType
responseType有不同的值,不同的值代表的类型不同
‘’:默认,字符串
‘arraybuffer’:arraybuffer类型
'blob':HEADERS_RECEIVED
'document':document
'json':json
'text':字符串
XHR方法
主要的方法有三个
open(method,url,async,username,password)
代表初始化请求,打开请求
- method:发送的方法,有GET/POST/DELETE/HEAD/OPTIONS/PUT
- url:地址
- async:是否异步,默认是异步
- username:用户名
- password:密码
setRequestHeader(header,value)
设置请求头信息
- header:名称
- value:对应的值
send(data)
发送请求
- data:String/FormData
示例
var xhr=new XMLHttpRequest(); //创建xhr对象
xhr.onreadystatechange = function(callback) {
if(xhr.readyState == 4){
if(xhr.status >= 200 && xhr.status <300 || xhr.status == 304){
callback(xhr.responseText);
}
else{
console.error('失败'+xhr.status);
}
}
}
xhr.open('get','example.com',true); //打开请求
xhr.setRequestHeader('header-key','header-value'); // 设置头部
xhr.send(null) //发送请求
首先是创建xhr对象,然后通过监听readyState,来判断当前的状态值的变化,然后通过onreadystatechange判断,当值变为我们需要的值时,执行一些操作
Ajax跨域
什么是跨域?
- 违反浏览器同源策略的资源访问行为
什么是同源?
- 两个页面必须使用的是相同的协议,端口,主机,比如都是http(协议),都是80(端口),都是xxx.com(主机也就是域名),换句话说,也就是网址前面的:http://xxx.com:80,这一段必须完全相同,则是同源
我个人的理解就是,访问不同网址文件夹的资源,比如有两个网站a.com和b.com,这两个网站的资源包括图片,网页等都存储在各自的文件夹下,但是如果要a.com访问b.com文件夹下的内容,就不行,这时就需要用到跨域
为什么要跨域?
实际上,很多内容都需要跨域,最简单的不同的应用域名就不同,因此就就无法访问,所以用到了跨域
跨域的方法
CORS(Cross-Origin Resource Sharing)
iframe代理
- message
- window.name
- document.domain
JSONP
CORS(Cross-Origin Resource Sharing)
是xhr2的新特性,但是xhr1中是禁止跨域请求的,所以存在一定的兼容问题
xhr2中,可以发送跨域请求,由服务器决定是否允许,浏览器不再干涉
xhr1中,即时服务器端允许,前端也发送了请求,但是浏览器会禁止发送
iframe代理
简单的说,就是在a.com中嵌入了一个b.com的页面,所有需要访问b.com的资源头通过嵌入的代理页面去请求访问,这种方式优点很明显,就是兼容各种浏览器
JSONP
原理就是<script>这个是可以跨域的,不受同源策略限制,所以可以使用请求一段js代码,不过这种方法的限制比较明显只能使用GET方法,因此实际开发中的使用有一定局限