Ajax含义
Ajax 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技术,通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新,Ajax
用一句话来说就是无须刷新页面即可从服务器取得数据。注意,虽然Ajax
翻译过来叫异步JavaScript
与XML
,但是获得的数据不一定是XML
数据,现在服务器端返回的都是JSON
格式的文件。
完整的Ajax
请求过程
- 创建
XMLHttpRequest
实例 - 发出
HTTP
请求 - 接收服务器传回的数据
- 更新网页数据
下面先看一个红宝书上给出的发起Ajax
请求的例子
var xhr = new XMLHttpRequest(); // 创建XMLHttpRequest实例
xhr.onreadystatechange = function(){
if (xhr.readyState == 4){ // 判断请求响应过程阶段,4 阶段代表已接收到数据
if (xhr.status >=200 && xhr.status < 300 || xhr.status == 304) { // 校验HTTP状态码
console.log(xhr.responseText); // 输出响应的文本
} else {
console.error(xhr.status, xhr.statusText); // 打印其他HTTP状态码
}
}
};
xhr.open('get', 'example.txt', true); // 初始化xhr实例,或者说启动请求
xhr.send(null); // 设置HTTP请求携带参数,null为不带参数
javascript中的Ajax
在javascript中,ajax是通过XMLHttpRequest对象来实现的,这个对象用于和后台进行数据的交互。在ie7之前,XHR是通过MSXML库中的ActiveX对象实现的,ie7后我们可以直接使用 var xhr = new XMLHttpRequest();创建一个XHR对象,创建好之后,我们就可以通过xhr对象来调用相应的方法了。
javascript中Ajax的使用方法
在javascript中,调用Ajax主要分为两步,先open,再send
open指的是开启一个请求,而send负责发送这个请求
-
open()方法
xhr.open('type','url',true);
第一个参数是请求类型,get/post
第二个参数是请求的地址
第三个参数表示请求是同步还是异步,true代表异步处理
注意的一点就是,open方法不会发送请求,只是启动一个请求准备发送 -
send()方法
xhr.send(null);
send方法将请求送给服务器 send方法接受一个参数作为要发送的数据,如果不需要发送数据,参数设为null
-
检测响应状态码
一般请求发送之后,我们可以根据xhr的status属性来判断下一步的操作,status属性会返回一个http状态码
100-200表示请求已经接受,需要继续处理
200-300表示请求已被服务器成功接收
300-400表示重定向,需要客户端采取进一步操作
400-500表示客户端发生错误, 妨碍了服务器的处理
500-600表示服务器处理请求的过程发生错误`if((xhr.status>=200&&xhr.status<300)||xhr.status==304){ console.log(“request success”); }else{ console.log(“request failed”); } `
-
检测 readyStatus属性
发送异步请求的时候,一般要检测xhr的readyState属性,这个属性表示请求过程的当前活动阶段,一共有5个值,0,1,2,3,4
0代表为初始化,open()未调用
1代表启动 已调用open,未调用send
2代表 已经调用send, 但还没有接受到响应
3代表 接受到部分响应数据
4代表 接受到全部响应数据
当readyState的值发生变化时,就会触发一次readystatechange事件,用这个事件检测每次状态变化后的值。
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if((xhr.status>=200&&xhr.status<300)||xhr.status==304){
console.log('request success');
}else{
console.log('request failed');
}
}
}
xhr.open('get','test.php',true);
xhr.send(null);
get请求和post请求
get请求,常用于向服务器查询某些信息,get可将查询的字符串参数加在url的末尾
xhr.open('get','test.phpname1=value1&name2=value2',true);
post请求,通常用于向服务器发送应该被保存的数据,post请求的主体可以包含格式不限且大量的数据,
xhr.open('post','test.php',true);
xhr.send('name1=value1&name2=value2');
get请求和post请求的区别
-
get请求会将参数跟在url后进行传递,而post则是作为http消息实体内容发送给服务器
-
get方式对于传输的数据有大小限制,通常不能大于2kb,而post方式传递的数据量大小没有限制
-
get方式会将请求的数据会被缓存起来,可以从浏览器的历史记录中读取这些数据,所以会带来一些安全性方面的问题,而post相对来说安全很多
Ajax
请求过程详解
1. 创建XMLHttpRequest
实例
从上面的的代码可以看出,创建一个XHR
实例方式为:
var xhr = new XMLHttpRequest();
2. 发出HTTP请求
实例创建好后,首先需要启动一个HTTP
请求,使用XHR
的open()
方法,open
方法接受三个参数
XMLHttpRequest.open(method, url, isAsync)
// 例如
xhr.open('get', 'http://www.baidu.com', true)
第一个参数为http
请求使用方法,如('get','post'等),第二是参数是请求的url
, 第三个参数代表是否异步发送请求(可选)。调用open()
方法后会启动一个http
请求,但它不会立即发送请求,处于待命状态。需要注意的是:请求的url
必须要跟请求源域(origin)同域,也就是说协议、域名、端口号要一致,跨域请求要使用别的方法。接着调用send()
方法就会发出这个http
请求。
xhr.open('get', 'http://www.baidu.com', true)
xhr.send(null)
send()
方法接受一个参数,为http
请求发送的数据(通常用于'post'方法),如果为null
,表示不发送数据。至此,一个异步的http
请求就发送到了服务器。
3. 接收服务器传回的数据
3.1 发送同步请求
如果将open
方法的第三个参数设为false
,即为同步请求,当收到服务器的响应后,相应的数据会自动填充到XHR
对象的属性中,主要包括以下四个:
responseText
:作为响应主体被返回的文本。responseXML
: 响应返回的XML
文档,能接收到的前提是,响应的Content-Type
字段的值为text/xml
或者application/xml
。status
:HTTP
状态码。statusText
:HTTP
状态码说明。
当客户端收到以上信息后,首先要判断HTTP
状态码来确认响应是否成功,状态码在200-300之间表示请求成功,同时304代表请求资源未被修改,可使用浏览器本地缓存。如果成功就可以获取响应报文主体中的数据了。
xhr.open('get', 'http://www.baidu.com', false)
xhr.send(null)
if (xhr.status >=200 && xhr.status < 300 || xhr.status == 304) { // 校验HTTP状态码
console.log(xhr.responseText); // 输出响应的文本
} else {
console.error(xhr.status, xhr.statusText); // 打印其他HTTP状态码
}
3.2 发送异步请求
如果将open
方法的第三个参数设为true
,即为异步请求。那么就需要一个事件来通知程序异步请求的结果是否返回。XHR
对象中的readyState
属性,表示请求/响应整个过程所处的阶段,它有五个值分为对应五个阶段:
- 0:未初始化。未调用
open()
方法。 - 1:启动。已经调用
open()
方法,但未调用send()
方法。 - 2:发送。已调用
send()
方法,但未收到响应。 - 3: 接收。已经接收到部分响应数据。
- 4:完成。已经接受到全部响应数据。
readyState
的值每变化一次,都会触发一次readStatechange
事件,我们定义一个事件处理函数onreadStatechange()
,并监听readyState == 4
状态,就可以得知响应数据已全部收到,并进行下一步操作。那么就是文章开头给出的代码:
var xhr = new XMLHttpRequest(); // 创建XMLHttpRequest实例
xhr.onreadystatechange = function(){
if (xhr.readyState == 4){ // 判断请求响应过程阶段,4 阶段代表已接收到数据
if (xhr.status >=200 && xhr.status < 300 || xhr.status == 304) { // 校验HTTP状态码
console.log(xhr.responseText); // 输出响应的文本
} else {
console.error(xhr.status, xhr.statusText); // 打印其他HTTP状态码
}
}
};
xhr.open('get', 'example.txt', true); // 初始化xhr实例,或者说启动请求
xhr.send(null); // 设置HTTP请求携带参数,null为不带参数
补充XHR中三个有用的事件
timeout
事件
当超出了设置时间还未收到响应,就会触发timeout
事件,进而调用ontimeout
事件处理程序。同时timeout
也是XHR
的一个属性,用于设置这个时间阈值。下面是用法:
xhr.ontimeout = function() {
alert('timeout!')
}
xhr.open('get', 'http://www.baidu.com', true)
xhr.timeout = 1000 // 时间阈值设为1秒
xhr.send(null)
load
事件
load
事件用于简化对readState
值的判断,响应数据全部接收完毕后(也就是readState == 4
)会触发load
事件,使用onload
事件处理函数进行后续操作,onload
会接收一个event
对象,它的target
属性等于XHR
对象,当然我们在定义这个事件处理函数时也可以不传入这个参数,来看下面的用法:
var xhr = new XMLHttpRequest()
xhr.onload = function () {
if(xhr.status >=200 && xhr.status < 300 || xhr.status == 304) {
console.log(xhr.responseText); // 输出响应的文本
} else {
console.error(xhr.status, xhr.statusText); // 打印其他HTTP状态码
}
}
xhr.open('get', 'http://www.baidu.com', true)
xhr.send(null)
这样就不用去关心readyState
值的变化情况了。当然如果想在特定readyState
值上做一些逻辑处理,还是要用之前的方法。
progress
事件
这个是很有用的一个事件,progress
事件会在浏览器接收数据期间周期触发,代表整个请求过程的进度,它的事件处理程序onprogress
接收一个event
对象,event.target
是XHR
对象,另外event
还有三个属性:
lengthComputable
:Boolean值,进度信息是否可用。osition
:已经接收到的字节数。totalSize
:总共要接收的字节数,被定义在响应报文的Content-Length
字段中。
如果响应报文中有Content-Length
字段,那么我们就可以计算当前时刻响应数据的加载进度了,这也是之前看到的一个面试题。看下面的代码:
xhr.onprogress = function(event) {
if(event.lengthComputable) {
console.log(`Received: ${(event.position/event.totalSize).toFixed(4)*100}%`);
}
}
jQuery中的Ajax
javascript的ajax操作比较复杂, jQuery提供了一系列的方法,大大简洁了Ajax开发
1.load()方法
load(url,data,callback);
load方法主要是用来远程载入HTML代码并插入DOM
第一个参数是要访问的HTML的url地址
第二个参数是要发送至服务器的key:value数据
第三个参数是回调函数,需要注意的是:load方法的回调函数无论请求成功或者失败都会执行
load方法的传递方式是根据参数data来自动指定的
$('#submit').load('test.php',function(){}); // 无参数传递,get方式
$('#submit').load('test.php'{name:'fang',age:'30'},function(){}); // 有参数传递,post方式
2.$.get()方法
$.get(url,data,callback,type)
前两个参数和load方法是一样的
但是回调函数只有在载入成功的时候才会执行
第四个参数是服务器返回的内容格式,如xml,html,json,script,text
$.get('test.php',{
name : 'fang',
age : '33'
},function(){
//回调函数
},type)
3.$.post()方法
$.post(url,data,callback,type)
前两个参数和load,$.get()方法是一样的
但是回调函数只有在载入成功的时候才会执行
第四个参数是服务器返回的内容格式,如xml,html,json,script,text
$.post('test.php',{
name : 'fang',
age : '33'
},function(){
//回调函数
},type)
4.$.ajax()方法
$.ajax()方法,这是方法不仅可是实现上面的load,$.get(),$.post()方法,而且还可以设定多种状态下的回调函数
$.ajax(options)是jQuery的最底层Ajax实现,这个方法只有一个参数,但是这个参数内包含了所需要的一切信息,参数以key:value形式存在,所有参数都是可选的
$.ajax(url,type,timeout,data,datatype,beforeSend,complete,success,error,global)这些是所有的参数
url:发送请求的地址
type:请求方式,默认get
timeout:设置请求超时时间
data:发送到服务器的数据
datatype:预期服务器返回的数据类型
beforeSend:发送请求前可以修改XMLHttpRequest对象的函数
complete:请求完成后调用的回调函数
success:请求成功后调用的回调函数
error:请求失败后调用的回调函数
global:表示是否触发全局Ajax事件,默认为true
$.ajax({
url:'test.php',
type:'GET',
datatype:'json',
beforeSend:function(){},
success:function(){},
error:function(){},
complete:function(){}
})