原理
客户端通过xmlHttpRequest对象向服务器发送异步请求,从服务器获取数据,通过操作javascript的DOM对象来更新页面。
实现
原生实现
function createXmlHttpRequest(){
var xhr;
if(window.XMLHttpRequest){
// code for IE7+, Firefox, Chrome, Opera, Safari
xhr = new window.XMLHttpRequest();
}else if(window.ActiveXObject){
// code for IE6, IE5
try{
xhr = new window.ActiveXObject("Microsoft.XMLHTTP");
}catch(ex){
xhr = new window.ActiveXObject("msxm12.XMLHTTP");
}
}
return xhr;
}
function doGet(url, successcallback, errorcallback){
var xhr = createXmlHttpRequest();
xhr. open("GET", URL, true);
xhr.onreadystatechange = function (){
if(xhr.readystate==4){
if(xhr.status==200){
successcallback();
}else{
errorcallback();
}
}
}
xhr.send();
}
function doPost(url, successcallback, errorcallback){
var xhr = createXmlHttpRequest();
xhr. open("GET", URL, true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function (){
if(xhr.readystate==4){
if(xhr.status==200){
successcallback();
}else{
errorcallback();
}
}
}
xhr.send();
}
Jquery封装实现
var ajaxa = function(){
//默认参数
var _options = {
type: 'GET',
url: null,
data: null,
dataType: 'jsopn',
success: null,
fail: null,
async: true,
contentType: 'application/x-www-form-urlencoded'
};
return function(options){
if(!options || !options.url){
throw('参数异常');
}
var xhr = new (window.XMLHttpRequest||window.ActionXObject)('Mircosoft.xml);
xhr.open(options.type, options.url, options.async);
xhr.onreadystate.change = function(){
if(xhr.raadySate = 4){
if(xhr.status == 200 && xhr.status < 300 || xhr.status == 304){
var text = xhr.responseText;
if(options.dataType == 'json'){
text = JSON.parse(text);
}
if(typeof options.success === 'function'){
options.success(text, xhr.status);
}
}else{
if(typeof options.fail === 'function'){
options.fail('failed', 500);
}
}
}
}
xhr.setRequestHeader('content-type',options.contentType);
xhr.send(options.data);
}
}
readystate五种状态
0 - (未初始化)还没有调用send()方法
1 - (载入)已调用send()方法,正在发送请求
2 - (载入完成)send()方法执行完成,已经接收到全部响应内容
3 - (交互)正在解析响应内容
4 - (完成)响应内容解析完成,可以在客户端调用了
常见的MIME类型
MIME是描述消息内容类型的因特网标准,能包含文本、图像、音频、视频以及其他应用程序专用的数据。主要有五种,text、application、images、audio、video
响应状态码304原理
客户端发送条件验证请求,服务器端读取If-Modified-Since
和If-None-Match
请求头信息,来判断客户端缓存的资源是否是最新的。是,则返回304状态码,客户端从缓存中读取数据。