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){        }});