Ajax的全称是:Asynchronous JavaScript and Xml。常用于B/S架构上,是实现客户端与服务器端异步交互的主要手段。浏览器与服务器端的交互有同步,异步两种,有何差别呢?
同步交互:
指客户端向服务器端发送请求,到服务器端进行响应,这个过程不能做其他的事情,只有等待请求完成。
异步交互:
指客户端向服务器端发送请求,到服务器端进行响应,这个过程能做其他的事情,不用等待请求完成。
具体区别:同步 执行速度相对异步较慢,响应结果是完整的HTML页面;异步 执行速度快 相应结果是部分数据。
Ajax的核心对象是XMLHttpRequest,Ajax执行过程中的所有方法都要在在该对象中调用。
创建XMLHttpRequest对象:
function createXMLHttpRequest() { var XMLHttpRequest1; if(window.XMLHttpRequest) { XMLhttpRequest1 = new XMLHttpRequest(); }else if(window.ActiveXObject) { try{ XMLHttpRequest1 = new ActiveXObject(); }catch(e){ XMLHttpRequest1 = new ActiveXObject("MicroSoft.XMLHTTP"); } } return XMLHttpRequest1; }
建立连接,发送数据
function ajax() { var param1 = document.getElementById("param1").value; var param1 = document.getElementById("param1").value; var XMLHttpRequest1 = createXMLHttpRequest(); var url = "/AjaxServlet" XMLHttpRequest1.open("POST",url,true); XMLHttpRequest1.setRequestHeader("Content-type","application/x-www-form-urlencode"); XMLHttpRequest1.send("param1="+param1+",param2="+param2); XMLHttpRequest1.onreadystatechange = function() { //回调函数 if(XMLHttpRequest1.readyState == 4) { if(XMLHttpRequest1.status == 200) { alert(XMLHttpRequest1.responseText); }else{ alert("网络连接中断!"); } } }; }
总结一下步骤:
1.创建Ajax对象。
2.配置Ajax,创建HTTP连接。
3.向服务器发送请求。
4.创建Ajax对象变化的监听。
5.在回调函数中接收服务器返回的数据。