javaWeb之ajax

Ajax:一种异步数据请求的技术，在本页面不刷新的情况，本页面数据可以和服务器端进行通信

核心对象: xmlHttp 浏览器对象。因为是基于浏览器，使用ajax技术时，不须任何插件，
原理:
1 当本页面浏览器加载完成时，并操作完成时，当面页面没有刷新的情况下，页面数据还在进行，
2 cpu 内存都在运行, cpu 内存分配一部分资源出来，通过浏览器对象，把本页面数据传出，再通过浏览器对象，把须要数据传入。
ajax开发过程:
1 创建一个xmlHttp
2 通过open的方式创建一个请求，一种路径，将要用于发 收 数据的路径。
3 设置回调状态，来判断是否通信成功
状态细分
0 未初始化
1 正在请求中
2 请求完成
3 请求完成后数据开始传输
4 数据通信成功
200 客户端收到了服务器发回的数据

4 把整个流程通过send发出去
这四步是有序的。

我这里使用的是js操作 之所以没用juery是想先学低层点的

例如验证码的生成

tel:<input type="text" name="tel" id="tel" />
<input type="button" name="takeCode" id="takeCode" onclick="getTel()" value="获取验证码"/>
code:<input type="text" name="code" id="code" />

然后开始写js

第一步是要写一个获取到浏览器http对象的函数

function getXhr() {//得到xmlHttp 浏览器对象
        var xhr = null;
        if (window.XMLHttpRequest){//winxp的获取
            xhr = new XMLHttpRequest();
        }else {//xp以上的获取
            xhr = new ActiveXObject('Microsoft.XMLHttp');
        }
        return xhr;
    }

然后获取到对象了
通过open的方式创建一个请求

    function getTel() {
        var xhr = getXhr();//1.获取对象
        var tel = document.getElementById("tel").value;
        //alert(tel);
        xhr.open("get","getIn.do?tel="+tel,true);//open打开连接请求 这里可以使用get或者post
        xhr.onreadystatechange = function () {//当状态改变时
            if (xhr.readyState==4&&xhr.status==200){//readyState=4是数据通信成功  status==200是客户端收到了服务器发回的数据
                document.getElementById("code").value = xhr.responseText;//是服务器返回的数据
            }
        }
        xhr.send();//最后一定要发送

    }

这里会发送出请求 我们需要配置好servlet然后检查
然后写

   public void service( HttpServletRequest request,HttpServletResponse response) throws IOException {
        request.setCharacterEncoding("UTF-8");//设置编码格式
        response.setContentType("text/html;charset=UTF-8");
        String uri = request.getRequestURI();//获取uri
        uri = uri.substring(uri.lastIndexOf("/"),uri.lastIndexOf("."));
        if (uri.equals("/getIn")){
            PrintWriter writer = response.getWriter();
            String tel = request.getParameter("tel");
            if (tel.length()==11){
                writer.print(getRandom(6));
            }else {
                writer.print("电话格式不对");
            }
        }
        }

 private String getRandom(int n){
        Random random = new Random();
        StringBuilder randomNum = new StringBuilder();//使用stringBuilder是应为比string优点更多
        for (int i = 0;i<n;i++){
            randomNum.append(random.nextInt(10));
        }
        return randomNum.toString();
    }

最后看一下效果

然后post和get的区别

post更加安全

使用稍有不同

第一点 open不用加传的数据

xhr.open("post","getIn.do",true);

要传的数据需要写在send中 例如

 xhr.send("tel="+tel);

然后还需要设置头部请求

xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');

就这样 运行效果和get相同

然后结合学习做了一个小作业

由于最近学习Android 刚好也是要用到城市选择 所以就做了 然后顺带做了api 输出json

地址：省份json
默认是显示所有省份

地址：http://www.zhongxia5211.cn:8089/learnAjax_war/api.do?provinceId=1
注：
provinceId=1 是省份的id为1下所有的城市

地址：http://www.zhongxia5211.cn:8089/learnAjax_war/api.do?cityId=20

cityId=20是 城市id为20下的所有县

不知道不是我数据库插入写的不好的原因 部分数据没有插入

地址：http://www.zhongxia5211.cn:8089/learnAjax_war/cityChoose.jsp