Ajax(Asynchronous JavaScript and XML)是运用JavaScript和扩展语言(XML)实现浏览器与服务器通信的一种技术。
Ajax实现浏览器与服务器异步交互技术 ,用户请求不需要刷新整个页面只需刷新局部页面,就能实现数据交互。主要设计以下几种技术。
XMLHttpRequest对象是Ajax技术的核心技术之一。这个对象需要用JavaScript来创建。
不同的浏览器创建方式不同
var xmlHttpRequest = null //声名XMLHttpRequest对象 if(window.XMLHttpRequest){ //Mozilla,Safari,Opera,IE7等浏览器创建 xmlHttpReqeust = new XMLHttpRequest(); }else if(window.ActiveXObject){ try{ xmlHttpRequest = new ActiveXObject("Msxml2.XMLHTTP");//IE较新版本创建 }catch(e){ try{ xmlHttpRequest = new ActiveObject("Microsoft.XMLHTTP");//IE较老版本 }catch(e){} } }
//声名XMLHttpRequest对象 var xmlHttpRequest = null; //创建XMLHttpRequest对象函数 function createXHR(){ try{ xmlHttpRequest = new XMLHttpRequest(); }catch(e1){ var msxmlhttp=new Array("Msxml2.XMLHTTP.6.0", "Msxml2.XMLHTTP.5.0", "Msxml2.XMLHTTP.4.0", "Msxml2.XMLHTTP.3.0", "Msxml2.XMLHTTP", "Microsoft.XMLHTTP"); for(var i=0;i<msxmlhttp.length;i++){ try{ xmlHttpRequest = new ActiveObject(msxmlhtt[i]); if(xmlHttpRequest!=null){break;} }catch(e2){} } } if(xmlHttpRequest==null){ alert("不能创建Ajax对象"); } } //发送客户端的请求函数 //url:请求的服务器地址 //param:需要传递的参数 //method:请求的方式(get/post) //handler:回调函数 function sendRequest(url,param,method,handler){ createXHR(); if(!xmlHttpRequest) return false; xmlHttpRequest.onreadystatechange=handler; if(method=="GET"){ //GET方式,可以直接传递参数,且不需要修改请求头。 xmlHttpRequest.open(method,url+'?'+params,true); xmlHttpRequest.send(null); } if(method=="POST"){ //POST方式,需要修改请求头,且在send()方法中传递参数。 xmlHttpRequest.open(method,url,true); xmlHttpRequest.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xmlHttpRequest.send(params); } }
index.jsp
Servlet:FormCheck.java
业务处理Servlet:List.java
接受传递过来的省份,返回城市列表
视图页面JSP:select.jsp
选择省份传递后台:
内嵌JS函数:
@syl 2021/06/30 15:48 晴 25° 抽烟