1、首先需要下载JSON相关的jar 包,js中使用json需要引入的源文件json.js以及调取servlet需要的servlet-api.jar
2、将jar包导入进开发项目中,这里我是直接在WEB-INF目录下创建了一个lib文件夹,将所有的包放入,然后再在project structure中module中添加lib文件夹,让项目加载这些jar包
3、在Web 目录下创建city.jsp其中先导入json.js备用,以及创建两个两个下拉框S1和S2,其中S1放入固定值3个城市,S2会随着S1选定的值而匹配在这个城市中的3个地区。
4、编写一个对象State,用于封装S2中的name和value。
5、创建servlet类TestAjax,其中写入根据下拉框S1传入的value,匹配3个地区。并以JSON格式返回。
6、在web.xml中注册servlet。
7、将调取的servlet完成后,就需要正式开始编写ajax异步调取了,首先由于浏览器内核的不同,需要先加个判断,一般这是针对于ie浏览器的。看是否能获取ajax对象。在city.jsp中编写响应js代码。
8、ajax调取的步骤为: 1.获取XMLHttpRequest对象; 2.调取open方法,传入请求方式(get/post),url,true;此时需要注意的是如果是post请求,需要对ajax对象设置请求头; 3.回调函数,ajax对象中的readyState为4且status为200表示调取成功。 4.send方法,如果是get请求,因参数是放在url后的,此时直接传null,如果是post请求时需要将请求参数放入send方法中,
9、启动tomcat,访问city.jsp,选择第一个下拉框,选择任意选项,第二个下拉框相应改变。