Click"ElementDesign"
异步JS和XML/Ajax
Ajax Process Introduction
• Part1——创建XMLHttpRequest对象
• Part2——初始化请求参数
•Part3——发送请求
•Part4——捕获请求的状态码
•Part5——判断状态码是否成功
•Part6——调用相关属性、方法返回数据
Ajax feature
1、异步传输
• 用户发送请求后,还可以在当前页面浏览,或者继续发送请求,即使服务器响应还没有完成。而服务器响应完成后,浏览器并不是重新加载整个页面,而是仅加载(即重绘)需要更新的部分。
2、局部刷新
•而服务器响应完成后,浏览器并不是重新加载整个页面(可看作回流),而是仅加载需要更新的部分(即局部刷新)。
Ajax Code原生写法(ES5)
function ajax(mJson){
var method = mJson.method || 'get';
var url = mJson.url;
var data = '';
var aysn = mJson.aysn || true;
var success = mJson.success;
var error = mJson.error;
if ( mJson.data )
{
var arr = [];
for (var key in mJson.data )
{
arr.push( key + '=' + mJson.data[key] );
};
data = arr.join('&');
};
if ( data && method.toLowerCase()=='get' )url += '?' + data;
var xhr = new XMLHttpRequest();
xhr.open( method , url , aysn );
xhr.setRequestHeader('content-type' , 'application/x-www-form-urlencoded');
xhr.send(data);
xhr.onreadystatechange = function(){
if ( xhr.readyState == 4 )
{
if ( xhr.status >= 200 && xhr.status
{
success && success( xhr.responseText );
}else
{
error && error( xhr.status );
};
}
};
};
Effect Show
....
期待你的分享~
一个人快乐,
不是因为他拥有的多,
而是因为,
他计较的少。
See U,ElementDesign~
领取专属 10元无门槛券
私享最新 技术干货