ajax概述原理,ajax基本原理及步骤

Ajax原理： 通过XMLHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用JavaScript来操作DOM从而更新页面。

XMLHttpRequest： XMLHttpRequest是ajax核心机制，IE5中首先引入，是一种异步请求的技术，简单的来说，也就是javascript可以及时向服务器请求和处理响应，而不阻塞用户，达到无刷新的效果。

步骤：

1：创建XMLHttpRequest对象，也就是创建一个异步调用对象

2：建立连接

3：发送请求

4：设置函数监控状态，接收数据。

//ajax({

// url:'',//地址

// success:function(){},//成功的回调函数

// data:{},//传送的数据

// type:'',//请求类型

// error:function(){},//失败的回调函数

// time:3000//设置超时时间

//});

function ajax(json){

if(!json.url){

alert('请输入正确的url！')

return;

}

json.type=json.type || 'get';

json.data=json.data || {};

json.time=json.time || 3000;

var timer=null;

//创建ajax对象

if(window.XMLHttpRequest){

var oAjax=new XMLHttpRequest();

}else{

var oAjax=new ActiveXObject('Microsoft.XMLHTTP');

}

switch (json.type.toLowerCase()){

case 'get':

oAjax.open('GET',json.url+'?'+json2Str(json.data),true);

oAjax.send();

break;

case 'post':

oAjax.open('POST',json.url,true);

//设置请求头

oAjax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

oAjax.send(json2Str(json.data));

break;

}

//监控状态

oAjax.onreadystatechange=function(){

if(oAjax.readyState==4){

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

json.success &&　json.sunccess(oAjax.responseText);

}else{

json.error && json.error(oAjax.status);

}

clearTimeout(timer);

}

};

timer=setTimeout(function(){

alert('请求超时!');

oAjax.onreadystatechange=null;

},json.time);

};

function json2Str(json){

json.t=Math.random();

var arr=[];

for (var name in json) {

arr.push(name+'='+json[name]);

}

return arr.join('&');

}

ajax常用的属性和方法：

属性

readyState

status

responseText

onreadystatechange

方法

open

send

setRequestHeader

abort 放弃

常见的状态码：

200 一切正常(ok)

304 没有被修改(not modified)

404 没找到页面(not found)

403 禁止访问(forbidden)

500 内部服务器出错(internal service error)

readyState 属性表示Ajax请求的当前状态。它的值用数字代表。

0 代表未初始化。 还没有调用 open 方法

1 代表正在加载。 open 方法已被调用，但 send 方法还没有被调用

2 代表已加载完毕。send 已被调用。请求已经开始

3 代表交互中。服务器正在发送响应

4 代表完成。响应发送完毕

同步和异步的区别

同步 一次只干一件事

异步 一次干多件事

get 和 post

get 32k 不安全 易于分享 数据 通过url传输

post 1G 相对安全 不易于分享 不通过url传输