ajax 会触发onload,ajax

ajax 是前后端实现交互的方案，利用浏览器的XMLHttpRequest对象，发送http请求，和接受http响应，ajax与后端的交互式异步的，可以在浏览器不刷新页面时实现页面的局部更新，但请求不会记录在浏览器的历史记录中，也就是无法前进后退

ajax中的事件与触发条件

onreadystatechange 每当xhr.readyState改变时触发；但xhr.readyState由非0值变为0时不触发。

onloadstart 调用xhr.send()方法后立即触发，若xhr.send()未被调用则不会触发此事件。

onprogress xhr.upload.onprogress在上传阶段(即xhr.send()之后，xhr.readystate=2之前)触发，每50ms触发一次；xhr.onprogress在下载阶段(即xhr.readystate=3时)触发，每50ms触发一次。

onload 当请求成功完成时触发，此时xhr.readystate=4

onloadend 当请求结束(包括请求成功和请求失败)时触发

onabort 当调用xhr.abort()后触发

ontimeout xhr.timeout不等于0，由请求开始即onloadstart开始算起，当到达xhr.timeout所设置时间请求还未结束即onloadend，则触发此事件。

onerror 在请求过程中，若发生Network error则会触发此事件(若发生Network error时，上传还没有结束，则会先触发xhr.upload.onerror，再触发xhr.onerror；若发生Network error时，上传已经结束，则只会触发xhr.onerror)。注意，只有发生了网络层级别的异常才会触发此事件，对于应用层级别的异常，如响应返回的xhr.statusCode是4xx时，并不属于Network error，所以不会触发onerror事件，而是会触发onload事件。

ajax示例

var xhr = window.XMLHttpRequest? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP"); //兼容ie的ajax对象

xhr.timeout = 1000;//设置请求超时时间

xhr.open('get',url,false);//布尔表示是否异步发送请求

// get方式发送请求需要发送的数据拼接在url中 url= "url"+'?'+"key=value"

xhr.onreadystatechange = function(){

// xhr.onreadystatechange 可替换成 xhr.onload

if(xhr.readystate === 4){

if(xhr.status==200 & xhr.status <300||xhr.status ==304){

console.log(xhr.responseText)

};

}else{

console.log(erro)

};

};

xhr.ontimeout = function(){

//超时处理函数

}

xhr.upload.onprogress = function(e) {

//如果是上传文件，可以获取上传进度

}

xhr.send();

// 发送方式为post时数据需要在 send(data)中发送send("key=value")

// 可用 FormData 实现表单数据序列化 xhr.send(new FormData(form))

ajax封装

function ajax(option){

var type = option.type||'get',

url = option.url||'url',

datatype = option.datatype||'json',

data = option.data||{},

onsuccess = option.onsuccess||function(){},

onerror = option.onerror||function(){};

var newArry=[];

for(var key in data){

newArry.push(key+"="+data[key])

};

var dataStr = newArry.join('$');

if(type==='get'){

url = url +'?'+dataStr

}

// var xhr = window.XMLHttpRequest? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");

var xhr = new XMLHttpRequest();

xhr.timeout = 1000;

xhr.open(type,url,true);

xhr.onreadystatechange = function(){

if(xhr.readyState === 4){

if(xhr.status>=200 && xhr.status <300||xhr.status ==304){

if(datatype=='json'){

data= JSON.parse(xhr.responseText);

}else{

data = xhr.responseText;

};

option.onsuccess(data);

}else{

option.onerror()

};

};

};

xhr.ontimeout = function(){

};

xhr.upload.onprogress = function(e) {

};

if(type==='get'){

xhr.send(null);

}else if(type =='post'){

xhr.send(dataStr)

};

};

// 调用

ajax({

type:'get',

url:'http://api.jirengu.com/weather.php',

datatype:'json',

data: {

city:'北京'

},

onsuccess:function(data){

console.log(data);

},

onerror:function(){

console.log('error')

}

})