首页 > 代码库 > js实现AJAX请求

js实现AJAX请求

 

摘自: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=12setRequestHeader的意思是设置请求头的类型为表单类型: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();} //callbackfunction 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协议中服务器返回的状态码获取简单地服务器返回的文本信息