Ajax技术

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~