Ajax核心XMLHttpRequest总结
Ajax:即"AsynchronousJavaScriptandXML"(异步JavaScript和XML),一门综合性的技术:运用JavaScript对象XMLHttpRequest进行异步数据交换;JavaScript操作DOM实现动态效果;运用XHTML+CSS表达信息;XML和XSLT操作数据。此篇文章重点介绍使用XMLHttpRequest对象与服务器端进行异步数据交换。
使用方法
XMLHttpRequest五步使用法:
1.创建对象; 2.注册回调函数; 3.使用open方法设置和服务器交互的基本信息; 4.设置发送的数据,开始和服务器端交互; 5.实现回调函数。
由于每次应用XMLHttpRequest对象时,都要进行五步操作,因此,可将该对象的使用封装为js文件中,传递部分参数使用其方法就可以完成相应功能,实现如下:
//使用封装方法人员只提供http的请求,url地址,数据,成功和失败的回调的方法 //1.定义XMLHttpRequest对象的构造方法 varMyXMLHttpRequest=function(){ varxmlhttprequest; if(window.XMLHttpRequest){ //IE7,IE8,FireFox,Mozillar,Safari,Opera //alert("IE7,IE8,FireFox,Mozillar,Safari,Opera"); xmlhttprequest=newXMLHttpRequest(); //解决浏览器在服务器端响应由于没有Text头的时候可能无法工作的问题 if(xmlhttprequest.overrideMimeType){ xmlhttprequest.overrideMimeType("text/xml"); } }elseif(window.ActiveXObject){ //IE6,IE5.5,IE5 alert("IE6,IE5.5,IE5"); varactivexName=["MSXML2.XMLHTTP","Microsoft.XMLHTTP"]; for(varn=0;n
扩展问题
1.浏览器缓存
2.中文乱码
3.跨域访问
对于问题1、问题3都可以通过更改url地址的方法得以解决。问题1可在url地址尾添加时间戳,问题3通过代理方式进行解决。只需在send()中的第三步执行前添加相应判断即可:
//解决缓存的转换:增加时间戳 if(url.indexOf("?")>=0){ url=url+"&t="+(newDate())。valueOf(); }else{ url=url+"?t="+(newDate())。valueOf(); } //解决跨域的问题 if(url.indexOf("http://")>=0){ url.replace("?","&"); url="Proxy?url="+url; }
问题3对应代理服务端实现:
/** *HandlestheHTTPGETmethod. * *@paramrequestservletrequest *@paramresponseservletresponse *@throwsServletExceptionifaservlet-specificerroroccurs *@throwsIOExceptionifanI/Oerroroccurs */ @Override protectedvoiddoGet(HttpServletRequestrequest,HttpServletResponseresponse) throwsServletException,IOException{ //获取参数,最后得到请求url地址类似于:url=http://192.168…/AJAX/AJAXServer?aa=11&bb=22&cc=33 StringBuilderurl=newStringBuilder(); url.append(request.getParameter("url")); //获取访问的跨域地址url=http://192.168…/AJAX/AJAXServer Enumerationenu=request.getParameterNames(); booleanflag=false; //定义标志变量,表示是否为拼接的第一个参数 while(enu.hasMoreElements()){ StringparamName=(String)enu.nextElement(); if(!paramName.equals("url")){ StringparamValue=request.getParameter(paramName); paramValue=URLEncoder.encode(paramValue,"utf-8"); if(!flag){ url.append("?")。append(paramName)。append("=")。append(paramValue); flag=true; }else{ url.append("&")。append(paramName)。append("=")。append(paramValue); } } } response.setContentType("text/html;charset=utf-8"); PrintWriterout=response.getWriter(); if(url!=null&&url.length()>0){ URLconnectionUrl=newURL(url.toString()); BufferedReaderreader=newBufferedReader(newInputStreamReader(connectionUrl.openStream(),"utf-8"));
以上就是本文的全部内容了,希望大家能够喜欢。