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; 常见的状态码如下:
使用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); } } } 总结:
结语:(hunthon:入门级程序员)AJAX请求用来处理网页请求是非常棒的技术,本篇博客旨在介绍Ajax的最简单的用法,后续的文章会对Ajax做较详细的描述,文章中如果出现错误请及时向我反馈,希望与大家一起进步。 |
|