Ajax
是干什么的,为什么要学这个技术:
我们在上网浏览网站的时候,经常会看到下拉加载的的功能。例如百度图片、淘宝列表等等……,这种我们每次下滑,就自动加载更多的信息。这种信息不用每次刷新页面,而就会自动加载出来;那么我们前端,像这种不必刷新页面也能获取新的数据的技术,我们就需要使用ajax来实现。而ajax也是目前Web开发人员必须要掌握一种技术。简单来讲,ajax就是提交并且接收了服务器的数据,从而可以获取新的数据,来渲染页面的更新
Ajax
技术核心是
XMLHttpRequest
对象(简称XHR),帮助记忆,可以想象是“小黄人”的拼音简称。这是由微软首先引入的一个特性,其他浏览器提供商也都是后来慢慢相同的实现这个技术。也是在2005年低,2006年初,Ajax技术才慢慢的红遍了技术圈。
IE5
是第一款引入的XHR对象的浏览器,目前我们只讲解适合于
IE7
之后的版本,之前的不做讲解。
---用法:---
一、创建一个ajax对象
首先我们需要构造出一个新的
XMLHttpRequest
var xhr = new XMLHttpRequest()
二、配置这个对象open(发送方式, 地址, 是否异步);
构造完之后,我们需要创建一个请求发送我们的数据,因为向服务器发送了请求,我们才能得到想要的数据。创建我们需要一个固定的方法
open()
。
open()
它有三个参数,第一个是请求的方式(
五种方式 :get/post/put/delete/head
),第二个是请求的地址
URL
,第三个是个布尔值(
true/false
)代表是否异步。
比如我们向一个后端接口
/villin.php
发一个get请求,大部分的请求都是异步加载,我们我们就可以这样写。
var xhr = new XMLHttpRequest();
xhr.open('get', './villin.php', true);
三、发送请求
这就创造出了一个简单的请求数据,那么接下来我们要把这个数据发送给数据库,方法
send(null)
;
var xhr = new XMLHttpRequest();
xhr.open('get', './villin.php', true);
xhr.send(null)
send()
方法按照中文意思理解,就是发送,它接收一个参数,作为请求主体发送的数据。如果不需要通过请求主体发送数据,就传入一个
null
,也可以不传,但是对于某些浏览器来说,是必须要传的,所以我们规范一点,写上null。
四、监听响应
这时,后端服务器接收到了我们发送的数据,就会返回我们想要的数据。
XHR
的技术价值就是可以实时监听数据的变化,实时返回新的数据,那么怎么监听?他自身携带了一个属性,叫
onreadystatechange
,从字面意思理解,就是实时监听改变。所以我们监听之后要做的事件,都需要写在
onreadystatechange
函数当中。
onreadystatechange
会监听一个叫
readyState
的值,这个值很重要,它会反映出当前响应过程的活动阶段,用0~4来表示:
表示XHR刚创建出来,还没有初始化,没调用
open()
1
表示已经调用
open()
方法,但还没有调用
send()
2
send()
方法,但还没有接收到数据。
3
表示服务器已经接收到了部分响应数据。
4
表示服务器已经接收到了全部响应数据,可以在客户端使用了。
所以当
readyState
返回
4
的时候,说明数据返回成功,我们就可以拿到相应的数据了。
var xhr = new XMLHttpRequest();
xhr.open('get', './villin.php', true);
xhr.onreadystatechange = function () {
if (this.readyState !== 4) {
return;
}else{
//成功返回数据,在这里获取数据
}
}
xhr.send(null) // 要成功发送请求头信息,onreadystatechange一定要在open()之后,send()之前监听。
此时说明服务器已经接收到了全部响应(但响应未必是返回成功的数据)。那么服务器会把响应数据返回给浏览器,浏览器也就返回相应的状态码
status
,表示数据异常或成功。常见的状态码如下:
2
开头,代表响应成功,如
200
3
开头,代表重定向,如
302
页面暂时重定向,
304
表示请求的资源并没有被修改,可以使用浏览器中缓存的版本。
4
开头,请求有错误,如
400
5
开头,服务器报错,如
500
所以我们要使用返回来的数据,先判断是否返回正常,一般是
>=200
并且
<300
。返回成功后,数据会被放置在一个叫
responseText
当中,我们直接打印出
responseText
就可以提取出内部的文本。
var xhr = new XMLHttpRequest();
xhr.open('get', './villin.php', true);
xhr.onreadystatechange = function () {
if (this.readyState !== 4) {
return;
}else{
//成功返回数据,在这里获取数据
if(this.status >= 200 && this.status < 300) {
console.log('请求成功')
console.log(this.responseText) // 此刻拿到后端的数据,打印出responseText
}else{
console.log('请求出错')
}
}
}
xhr.send(null) // 要成功发送请求头信息,onreadystatechange一定要在open()之后,send()之前监听。
---超时设定:
timeout
---
最初,IE8为XHR提供了超时属性
timeout
,表示请求在等待多少毫秒之后就终止。再给timeout设置超时设定后,在规定时间没有接收到请求,那么就会触发
timeout
,进而调用
ontimeout
程序,如下:
var xhr = new XMLHttpRequest();
xhr.open('get', './villin.php', true);
xhr.onreadystatechange = function () {
if (this.readyState !== 4) {
return;
}else{
try{
//成功返回数据,在这里获取数据
if(this.status >= 200 && this.status < 300) {
console.log('请求成功')
console.log(this.responseText) // 此刻拿到后端的数据,打印出responseText
}else{
console.log('请求出错')
}
}catch(val){
// 可以写timeout处理程序
}
}
}
xhr.timeout = 2000; // 设置超时时间为2000mm,超出会调用ontimeout事件
xhr.ontimeout = function(){
alert('请求超时2000mm')
}
xhr.send(null) // 要成功发送请求头信息,onreadystatechange一定要在open()之后,send()之前监听。
️注意:
如果在超时之后再访问status就会出现错误,所以我们可以将判断封装到try...catch语句,这样就可以完美的解决超时问题
️虽然timeout是由IE提供的,不过目前其他浏览器的兼容性,还需要大家去尝试。
---load事件---
Firefox在实现Ajax的简化模型时,引入了load事件。它可以代替
onreadystatechange
事件,响应完毕后将触发
onload
事件,所以我们就可以省去了检查
readyState
属性了,不比判断
readyState
是否等于
4
的问题了。
var xhr = new XMLHttpRequest();
xhr.open('get', './villin.php', true);
xhr.onload = function () {
if(this.status >= 200 && this.status < 300) {
console.log('请求成功')
console.log(this.responseText) // 此刻拿到后端的数据,打印出responseText
}else{
console.log('请求出错')
}
}
xhr.send(null)
目前Firefox、Oprea、Chrome、Safari都支持load事件。
---浏览器跨域---
通过XHR实现ajax通信的主要一个主要限制,就是来自跨域的安全策略(同源策略)。默认情况下,XHR对象只能访问与包含它的页面位于同一个域中的资源,这种安全策略是为了预防某些恶意行为。
怎么解决跨域问题,其实
IE
与其他浏览器还各有千秋,比如
IE
与其他浏览器的
CORS
的实现,在
open()
方法中传入对决URL地址,如www开头的地址,我们就可以拿到绝对地址上的信息。还有一起其他跨域技术:
JSONP
Jsonp虽然和json长得很像,不过这两个还是没什么关系的,json是以键和值的方式存在的一种格式,Jsonp是由回调函数和数据组成的一种技术。
Jsonp是通过动态
<script>
元素来使用的,使用的时候可以为
src
指定一个跨域的URL。
<script>
元素有能力不受限制的从其他域中加载资源,所以可以实现跨域请求。
<script src='www.avillin.com/?callback=handleaaa'></script> // URL就是此地址,后边callback返回的就是函数,名称为handleaaa
<script>
function handleaaa(response){
console.log(response)
}
</script>
扩展
:目前前端使用的vue框架中,也有自己的跨域方式,可以通过
proxy
来实现跨域。
更多关于ajax的知识,也欢迎一起探讨。
本文作者:avillin
v-chat:villinWechat