首先附上ajax的声明方法和发送客户请求的方法,这两个方法在使用的时候一般封装在一个ajax.js文件中方便调用
文件目录是这样的:
var httpRequest=null;
function createXHR(){
if(window.XMLHttpRequest){ //Mozilla,Safari,Opera,IE7等
httpRequest = new XMLHttpRequest();
}else if(window.ActiveXObject){
try{
httpRequest = new ActiveXObject("Msxml2.XMLHTTP"); //IE较新版本
}catch(e){
try {
httpRequest = new ActiveXObject("Microsoft.XMLHTTP");//IE较老版本
}catch(e){
httpRequest = null;
}
}
}
if(!httpRequest){
alert("fail to create httpRequest");
}
}
function sendRequest(url,params,method,handler){
createXHR();
if(!httpRequest) return false;
httpRequest.onreadystatechange = handler;
if(method == "GET"){
httpRequest.open(method,url+ '?' + params,true);
httpRequest.send(null);
}
if(method == "POST"){
httpRequest.open(method,url,true);
httpRequest.setRequestHeader("Content-type","application/x-www-form-urlencoded");
httpRequest.send(params);
}
}
sendRequest(url params,method,handler) 方法参数含义
先看看调用它的时候是怎样传参的吧
在jsp文件中是这样的
其实看到这你应该大体明白了
url:是servlet的注册名(你用哪一个servlet处理当前数据就写哪一个servlet)
params:参数名,可以看到传的参数是一个字符串,键值对的形式 params=values
有多个参数的时候用&来连接 例如“p1=2&p2=3”;
参数是给servlet用的,在servlet中用request.getParametr("参数名")来获取
method:传参的方式,有两个“POST”,“GET”,在这里我用的大写原因是在ajax,js文件中的发送请求函数中我用的大写,要保持一致的
handler:回调函数,emmm函数还可以做参数?是的,这也是其巧妙之处
httpRequest.onreadystatechange = handler;
当服务器端接收请求并响应给客户端的时候就会调用这个函数,来处理服务器返回来的数据,可以看到这个方法是在jsp中的一个静态方法,既然说到这那就看看这个回调函数是如何处理服务器返回来的数据吧
function showCity(){
var city=document.getElementById("city");
if (httpRequest.readyState == 4) {
if (httpRequest.status == 200) {
var citylist=httpRequest.responseText.split(",");
var citynum=citylist.length;1
city.options.length=0;
for(i=0;i<citynum;i++)
city.options.add(new Option(citylist[i]));
}
}
}
可以看到在这有两个if的判断语句,判断状态码,4--响应完成,200--一切顺利
在处理数据的时候可以看到用的是httpRequest.responseText
responseText属性;服务器返回的请求响应文本,将传回的信息当字符串使用
还有一个属性现在我还没用到过(我是小白)responseXML:服务器端返回的XML类型的响应,将传回的信息当XML文档使用可以用DOM处理
在使用的时候记得设置response.setContentType("text/html;charset=UTF-8");
**还有一个函数,处理字符串的:str.split(',')
将字符串按照指定符号进行分割并返回一个字符数组
我在做作业的时候还碰到了一些处理字符串的函数
str=str.trim();//可以去掉首尾的空格
str=str.substring(0, str.length()-1);//保留一段区间的字符串,这个参数的效果是去掉了字符串中的最后一个元素
还想多说一点,就是ajax技术联系上servlet后怎么用
先附上代码(解释内容我就直接在注释里说了吧)
//以我的一个作业为例,是做一个省市级联列表
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
/*基本思路;根据省份参数查找到相应的城市
* */
request.setCharacterEncoding("UTF-8");
response.setContentType("text/html;charset=UTF-8");
PrintWriter out=response.getWriter();
/*服务器在返回给客户端数据的时候用的是out.print();
之前在学习的时候记得是out.print();输出的内容在网页,但是在这就是传递的一个参数
百度查到的说两个不一样还没搞明白是怎么回事,暂且记住吧
*/
//接收参数
String prov_id=request.getParameter("province");
//进行相应的处理
String citySql="where PARENT_ID="+prov_id;
cityDao cityDao=new cityDao();
try {
List<City> cityList=cityDao.query(citySql);
/*List<String> cityName=new ArrayList<>();*/
String cityName="";
for(City c:cityList){
cityName=cityName+c.getREGION_NAME()+",";
/*cityName.add(c.getREGION_NAME());*/
}
cityName=cityName.substring(0, cityName.length()-1);
out.print(cityName);
} catch (ClassNotFoundException | SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}