js实现AJAX请求

浏览数：17 / 时间：2015年06月09日

摘自：http://www.myexception.cn/javascript/1448345.html

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 creatXMLHttpRequest(){
if(window.ActiveXobject){……}else{//非IE采用的方式……}

}

 请求的格式：
  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    网页未修改
 
使用Servlet获取服务器端的文本：
//ajax.do
//这是Servlet类中的doGet方法
public void doGet(HttpServletRequest request,HttpServletResponse response){
    PrintWriter out=response.getWriter();
    out.print("OK");
    out.flush();
    out.close();
}
 
//callback
function callback(){
    if(xmlHttp.readyState==4){//响应完毕后
        if(xmlHttp.status==200){//http状态码为200时
            var result=xmlHttp.responseText;//获取ajax请求的文本内容
            alert(result);
        }
    }
}
 
总结：
Ajax请求使用 XMLHttpRequest 对象
IE和非IE获取对象的方式不同
GET，POST请求的传值问题
Ajax请求的流程
Ajax请求的状态码和HTTP协议中服务器返回的状态码
获取简单地服务器返回的文本信息