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~

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180615G217RY00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券