JS实现AJAX请求_一

JS实现AJAX请求_1
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;

常见的状态码如下：

//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协议中服务器返回的状态码获取简单地服务器返回的文本信息结语：（hunthon:入门级程序员）
? ? ? ? AJAX请求用来处理网页请求是非常棒的技术，本篇博客旨在介绍Ajax的最简单的用法，后续的文章会对Ajax做较详细的描述，文章中如果出现错误请及时向我反馈，希望与大家一起进步。
1 楼 hunthon 2013-09-29 面试前端被问到概率很大的一个题目，一定要会写原生的JS，会使用JQUERY进行ajax请求，人家是不认可的。

JS实现AJAX请求_一

热点推荐