AJAX基础

AJAX

• 异步javascript和xml。
• 创建交互式网页的网页技术，是独立于web服务器端的浏览器技术。
• 通过客户端和服务器做数据的交换，ajax可实现异步的刷新（局部刷新）。也就是可以在不刷新整个页面的情况下，可以动态更新局部的内容。
• 传统网页如果要更新内容，就算只是一小部分内容，也必须刷新整个网页。

异步与同步

• 同步:用户请求--->服务器处理--->响应 在此期间不能做其他的事，必须等当前这个请求响应完成后才能操作其他模块。
• 异步:用户请求--->服务器处理(浏览器可以处理其他任务)--->响应

xmlhttp

• 微软提出的一种技术，开发中自带Http,xml访问服务器。通过当前这个对象获取到服务器响应的数据,通过javascript将数据显示出来。
• 微软和标准的DOM浏览器有差别。

ActiveXObject与XMLHttpRequest

• ActiveXObject:微软提供，主要针对IE5/IE6,,以后的版本都是按照标准DOM进行编写的。
• XMLHttpRequest:功能上和xmlhttp是非常相似的。属于代理关系，XMLHttpRequest是xmlhttp的代理对象。在使用过程中方法和属性保持一致,但是有一些小的区别。

<script>
    function test(){
        //ajax步骤
        //第一步，产生xmlhttp对象
        var xmlhttp;
        //判断兼容性问题
        /*            产生XMLHttpRequest对象，可以局部更新内容
        */
        if(window.XMLHttpRequest){
            xmlhttp = new XMLHttpRequest();
        }else{
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        //第二步，发送请求
        var url="/JavaWeb09_ajax/FindServlet";
        //建立连接 第一个参数是请求方法，第二个参数url，第三个参数是请求同步还是异步，true为异步请求
        xmlhttp.open("post",url,true);
        xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=utf-8");
        //发送请求 send()中可以传递数据
        xmlhttp.send("username=小王& pwd=123");
        //第三步接受响应，首先要监控状态码,状态码一旦改变就会调用一次方法onreadystatechange()
        xmlhttp.onreadystatechange=function(){
        //如果状态码为200，则表示请求成功。readyState代表对象的状态，当对象状态为4时表示成功。
        if(xmlhttp.status == 200 && xmlhttp.readyState == 4){
        //获取后台发送回来的内容    
            var jsonS = xmlhttp.responseText;
        //接收到的是json字符串，js无法直接操作字符串。所以现在要将json字符串转换为js对象
            var jsobj=JSON.parse(jsonS); 
            
        }
        }
    }

</script>

• 在servlet中

将javabean转换成json格式的字符串，响应回客户端
    JSONObject obj = new JSONObject();
    //如果需要传输的是数组的话,需要使用JSONArray
    JSONArray obj = new JSONArray();
    //将javabean转换为json格式的数据
    obj=obj.fromObject(bean);
    printWriter out = response.getWriter();
    out.write(obj.toString());

使用JQuery操作ajax---$.ajax();

$.ajax({
    type:"post",
    url:"地址",
    async:true,
    data:{"page":page,"row":row},
    success:function(obj){
    
    }

});