Ajax实例应用和总结.doc

AJAX简介:全称为:异步(javaScript 和 xml) 分为三层含义: Asynchronous、JavaSciprt、And、XML 具体来说是借助异步的JavaSciprt实现浏览器和服务器之间的异步交互.无需加载整个页面就可以向服务器发送接收请求 Ajax解决方案的优势: Ajax 相当于在浏览器客户端之间架设了一个桥梁.一个媒介 在它的帮助下可以消除网络交互过程中的处理-等待-处理等缺陷 在处理的过程中Web服务器响应是标准的XML的数据传递给Ajax然后在转化为Html页面格式,辅助CSS显示 AJAX相关的一个重要的对象XMLHttpRequest这个对象从IE5.0浏览器起就存在了它是Ajax技术中最重要的对象.XMLHttpRequest 对象是 Ajax 的核心之一。Ajax 的一个最大的特点是无需刷新页面便可向服务器传输或读写数据(又称无刷新更新页面)，这一特点主要得益于 XMLHTTP组件XMLHTTPRequest 对象。XMLHttpRequest 对象是主要的通信代理，实现客户端和服务器端的异步数据交互。 XMLHttpRequest 对象最早是由微软作为一个 ActiveX 对象实现的它是浏览器已经定义好的一个对象,它是Ajax技术的核心组成部分.需要注意的是.不同的IE浏览器对 XMLHttpRequest 定义方式有所不同实例:页面代码： /自定义AJAX引擎 var http_request=false; /初始化XMLHttpRequest对象 /浏览器的UI就是通过该对象与Ajax引擎打交道 function initXMLHttpRequest() if(window.XMLHttpRequest) /Mozilla浏览器 http_request=new XMLHttpRequest(); if(http_request.overrideMineType) /防止某些版本的Mozilla浏览器处理没有Mine Type信息的 http_request.overrideMineType(text/xml); /内容出错. else if(window.ActiveXObject) /IE浏览器 try http_request=new ActiveXObject(Msxml2.XMLHTTP); /IE6或更高版本catch(e) http_request=new ActiveXObject(Microsoft.XMLHTTP); /IE5.x function Onchange()initXMLHttpRequest(); /初始化XMLHttpRequest对象 /使用AJAX引擎的核心对象发送请求 http_request.open(post,/Ajax_Test/servlet/AjaxServlet?id=1,true); 注意路径http_request.send(null); http_request.onreadystatechange=callBack; /设置回调函数 function callBack()/AJAX引擎在服务器端成功返回后自动调用该函数 /负责将服务器端返回的数据显示在客户的UI上 if(http_request.readyState=4) /服务器端已经处理完成 if(http_request.status=200) /服务器端处理成功 var AJAX=document.getElementById(AJAX); AJAX.innerHTML=http_request.responseText; else alert(AJAX出错了!); 底层Java代码：public class AJAXControl extends HttpServlet public AJAXControl()super();public void destroy()super.destroy();public void doGet(HttpServletRequest request,HttpServletResponse response)throws ServletException,IOExceptionrequest.setCharacterEncoding(UTF-8); /取值不乱码String id=request.getParameter(id); /还可以取到传过来的值System.out.println(id=+id);response.setContentType(text/html;charset=UTF-8); /返回不乱码PrintWriter out = response.getWriter();String returnstr=null;returnstr=; 注意：双引号以及其它字符要用转义out.println(returnstr); /返回数据给页面out.flush(); /刷新流out.close(); /关闭流public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException doGet(request,response); /设置回调函数底层web配置： AjaxServlet .AJAXControl AjaxServlet /servlet/AjaxServlet 解析：使用AJAX引擎的核心对象发送请求 http_request.open(post,/AJAXControl?actionflag=sheng&id=+id,true); http_request.send(null); 没有其他数据传递写null open的第一个参数是HTTP请求的方法，为Get、Post 或者Head。 open的第二个参数是目标URL。基于安全考虑，这个URL 只能是同网域的，否则会提示“没有权限”的错 误。这个URL 可以是任何的URL，包括需要服务器解释执行的页面，不仅仅是静态页面。 open 的第三个参数只是指定在等待服务器返回信息的时间内是否继续执行下面的代码。如果为 True，则不会继续执行，直到服务器返回信息。默认为True。 按照顺序，open 调用完毕之后要调用 send 方法。send 的参数如果是以 Post 方式发出的话，可以是任何想传给服务器的内容。不过，跟 form 一样，如果要传文件或者 Post 内容给服务器，必须先调用setRequestHeader 方法，修改MIME类别。如下： http_request.open(“post”,”ajax_test”,true);http_request.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”);http_request.send(“fname=bill&name=gates”);open()方法 open(method，pageurl，boolean async,username,password) 用于初始化一个 XMLHttpRequest 对象。 其中， method 参数是必须提供的-用于指定你想用来发送请求的 HTTP 方法(GET，POST，PUT，DELETE 或HEAD)。为了把数据发送到服务器，应该使用 POST 方法；为了从服务器端检索数据，应该使用 GET 方法。 pageurl参数用于指定 XMLHttpRequest对象把请求发送到的服务器相应的URL。 async参数指定是否请求是异步的-缺省值为true。为了发送一个同步请求，需要把这个参数设置为false。对于要求认证的服务器，你可以提供可选的用户名和口令参数，一般省略。 在调用open()方法后， XMLHttpRequest 对象把它的readyState属性设置为1(打开)并且把responseText、responseXML、status 和 statusText 属性复位到它们的初始值。另外，它还复位请求头部。注意，如果你调用open()方法并且此时readyState为 4，则 XMLHttpRequest 对象将复位这些值。 send(字符串) 在通过调用open()后，你需要把该请求发送到服务器。当readyState 值为1时，你才可以调用 send()方法；否则的话，XMLHttpRequest 对象将引发一个异常。该请求被使用提供给 open()方法的参数发送到服务器。当async参数为true时，send()方法立即返回，从而允许其它客户端脚本处理继续。在调用send()方法后，XMLHttpRequest 对象把readyState的值设置为 2(发送)。当服务器响应时，在接收消息体之前，如果存在任何消息体的话，XMLHttpRequest 对象将把readyState设置为 3(正在接收中)。当请求完成加载时，它把readyState设置为4(已加载)。对于一个HEAD类型的请求，它将在把readyState值设置为 3 后再立即把它设置为4。总结:总结AJAX应用的六个步骤1. 获取要验证的信息2. 建立XMLHttpRequest对象3. 使用open方法与服务器建立连接4. 向服务器发送数据(send方法)5. 设置回调函数6. 在回调函数针对