jsp之ajax的初次应用

这学期开了jsp课程，觉得学的知识太基础了，刚好最近有了解到ajax技术，所以决定专门写一篇总结下ajax的应用以及复习下jsp的view层开发，之前大多只是将servlet当安卓的服务器端用。开发功能就定为之前写的学院宿舍信息查询吧，做个网页端也是不错的。经初步修改之前的算法，目前可以实现数字查询（宿舍号，宿舍楼号，学号）、中文查询（姓名，专业）、拼音及首字母查询（姓名，专业），其中后两者支持不完整查询。

//点击查询按钮所调用的方法function searchDorm() {//提示用户正在查询document.getElementById("tip").innerHTML = "查询中...";var xmlhttp;if (window.XMLHttpRequest) {xmlhttp = new XMLHttpRequest();} else {//兼容IE5、IE6浏览器，尚未测试xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");}xmlhttp.onreadystatechange = function() {if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {//获取请求结果var result = xmlhttp.responseText;//服务器返回提示密码错误if (result == "password_error") {document.getElementById("tip").innerHTML = "密码错误~";return;}//服务器返回提示关键字为空if (result == "key_null") {document.getElementById("tip").innerHTML = "请输入关键字~";return;}//结果无误（json数组）将其解析var jsons = JSON.parse(result);//提示用户数据量document.getElementById("tip").innerHTML = "查询成功！共"+ jsons.length + "条数据";//清空上一次查询数据var n = parseInt(myTable.rows.length);for ( var i = 0; i < n; i++) {myTable.deleteRow(0);}//生成表头var newTr1 = myTable.insertRow();var newTd1 = newTr1.insertCell();newTd1.innerHTML = "床号";var newTd2 = newTr1.insertCell();newTd2.innerHTML = "宿舍楼号";var newTd3 = newTr1.insertCell();newTd3.innerHTML = "宿舍号";var newTd4 = newTr1.insertCell();newTd4.innerHTML = "姓名";var newTd5 = newTr1.insertCell();newTd5.innerHTML = "专业";var newTd6 = newTr1.insertCell();newTd6.innerHTML = "性别";var newTd7 = newTr1.insertCell();newTd7.innerHTML = "学号";for ( var i = 0; i < jsons.length; i++) {//添加一行var newTr = myTable.insertRow();for ( var key in jsons[i]) {//添加一列var newTd = newTr.insertCell();newTd.innerHTML = jsons[i][key];}}}};//base标签href的值自动加在dormSearch2前面，但写完整路径也不会有问题xmlhttp.open("POST", "dormSearch2", true);//不加这一句获取不到post的参数xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");//用户输入的关键字var content = document.getElementById("text").value;//用户输入的密码var pass = document.getElementById("pass").value;//发送请求xmlhttp.send("content=" + content + "&pass=" + pass + "&ask=page");}

在javaScript里生成表格数据的代码写的比较尴尬总之先实现效果就行。效果图如下，其中样式用到了bootstrap，由于网页前端开发做的比较少，所以排版和设计都很丑。

刚开始还算顺利，ajax的入门还是挺容易的，接着拓展了一个功能，就是想检验下jsp内置对象request的大部分方法返回的结果，毕竟之前只是看了会api文档，所以加了个“我的状态”页。效果如下：

接着觉得单纯做这个没意思，于是决定调用淘宝开放的ip查询接口来将（点我查看详情）那两行的ip转换成详细信息，调用很简单，直接访问"http://ip.taobao.com/service/getIpInfo.php?ip=需要查询的ip"即可。所以我就新增一个使用ajax的方法，结果试了很多次都无法获取到返回的json数据，后来一查发现是因为在ajax里面做了跨域请求。ajax是禁止跨域的。网上能查到很多解决办法，但都觉得麻烦，所以决定用自己的方法就是让ajax访问自己的servlet，然后让他去获取数据，毕竟只是小量的json数据，所以并不麻烦。代码如下：

public class getIpDetail extends HttpServlet {public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {response.setContentType("text/html;charset=utf-8");request.setCharacterEncoding("utf-8");String ip = request.getParameter("ip");System.out.println(ip);String result = HttpUtil.sendGet("http://ip.taobao.com/service/getIpInfo.php", "ip=" + ip);Gson gson = new Gson();IpBean ib = gson.fromJson(result, IpBean.class);StringBuilder sb = new StringBuilder();sb.append("ip：" + ib.data.ip);sb.append("，国家：" + ib.data.country);sb.append("，省份：" + ib.data.region);sb.append("，城市：" + ib.data.city);sb.append("，县区：" + ib.data.county);sb.append("，运营商：" + ib.data.isp);response.getWriter().print(sb.toString());}}/** * 根据返回的json数据建立的对象 *  * @author hasee *  */class IpBean {int code;IpDataBean data;@Overridepublic String toString() {return "IpBean [code=" + code + ", data=" + data + "]";}}class IpDataBean {String country;String country_id;String area;String area_id;String region;String region_id;String city;String city_id;String county;String county_id;String isp;String isp_id;String ip;@Overridepublic String toString() {return "IpDataBean [country=" + country + ", country_id=" + country_id+ ", area=" + area + ", area_id=" + area_id + ", region="+ region + ", region_id=" + region_id + ", city=" + city+ ", city_id=" + city_id + ", county=" + county+ ", county_id=" + county_id + ", isp=" + isp + ", isp_id="+ isp_id + ", ip=" + ip + "]";}}

这样一来，ajax直接访问我这个servlet即可拿到详细数据，效果如下：

至此，ajax技术的使用也算是入门了，顺便发个牢骚，之前参加腾讯实习生招聘的宣讲会时听到的一句很有用的话：什么语言不重要，算法要好。这是现场嘉宾答疑时说的，那个学生问了腾讯对java开发的岗位有什么要求。现在仔细想想也是，语言是基础，跨语言学习不难，能突破瓶颈的是算法，如果只是停留在应用层的开发，工作几年大概就会触及天花板，所以下来要分配出时间强化算法的学习，当然应用层也不能落下毕竟也是个积累开发经验的过程，总之路很长，这也便是我做搜索的原因。