日期:2014-05-16  浏览次数:20398 次

JS实现AJAX请求_1

JS实现AJAX请求_1(基础篇)

AJAX:全称“Asynchronous JavaScript and XML” ? (异步的JavaScript与XML)

?

AJAX请求的特点:

? 1,不刷新页面

? 2,服务器仅返回需要的数据

?

AJAX引擎:XMLHttpRequest

? 此对象是浏览器中的内置对象,在目前的所有浏览器中都支持此对象。

?

IE中获取此对象:

if(window.ActiveXObject){
    var xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}

?非IE中获取此对象:

var xmlHttp=new XMLHttpRequest();

?

兼容模式:

var xmlHttp;//声明一个对象
function createXMLHttpRequest(){
    if(window.ActiveXObject){//如果是IE,采用这种方式获取
        xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    }else{//非IE采用这种方式获取
        xmlHttp=new XMLHttpRequest();
    }
}

?

?请求的格式:

? xmlHttp.open(请求方式,请求地址,[是否为异步请求]);

? xmlHttp.send();

?

Get请求:

xmlHttp.open("GET","ajax.do?name=tom",true);
xmlHttp.send();

?注:

get请求的传值方式为请求地址后面跟 ??key=value

?

Post请求:

xmlHttp.open("POST","ajax.do",true);
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlHttp.send("name=tom");

?注:

post请求的传值方式是在send()方法中进行传值,多个值用逗号隔开:name=tom,age=12

setRequestHeader的意思是设置请求头的类型为表单类型:Content-Type="application/x-www-form- ? ? ? ? ? ? urlencoded" ?是form表单的默认属性

?

?一个完整的AJAX请求的流程:

? 1,创建XMLHttpRequest对象

? 2,调用xmlHttp.open()设置请求内容

? 3,设置回调函数(根据服务器返回的状态信息,做什么事情)

? 4,调用xmlHttp.send()发送请求

function sendAjax(){
    createXMLHttpRequest();//调用上面设置的兼容模式
    xmlHttp.open("GET","ajax.do?name=tom",true);
    xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    xmlHttp.onreadystatechange=callback;//状态信息发生改变调用函数
    xmlHttp.send();
}

//回调函数
function callback(){
    alert("callback");
}

sendAjax();//浏览器会弹出几次框(不同的浏览器可能不同)

?获取AJAX请求的状态码和HTTP协议的状态码:

?AJAX请求的状态码有四个值:

? var xmlState=xmlHttp.readyState;

? 1,已初始化

? 2,数据传输中

? 3,响应数据传输中

? 4,响应完毕

HTTP协议的状态码有很多:

? var httpState=xmlHttp.status;

常见的状态码如下:

状态码 意义
200 服务器正确处理了请求并响应
404 请求的页面未找到
403 没有权限访问请求的页面
405 页面不接收该请求方式
408 请求超时
500 服务器处理请求时发生异常
503 服务暂时不可用
304 网页未修改