关于AJAX

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

Ajax作用：是用JavaScript向服务器发送异步请求，然后服务器给出响应，然后以XML格式的文件返回给浏览器端！
　　异步：当浏览器向服务器发送请求的时候，不是整个页面刷新，而是局部刷新[局部信息发送请求]！
　　同步：当浏览器向服务器发送请求的时候，整个页面都会刷新！

　　XML:一种文件格式，现在用XML这种返回格式的数据比较少了，XML解析性能较差，而且比较消耗带宽[]，现在大多数都是在是使用JSON数据的返回格式！!

 

使原生js发送AJAX请求步骤：
　　1).创建XMLHttpRequest对象
　　2).给open方法设置请求参数[method,url]
　　3).发送请求(send()方法)
　　4.需要使用onreadystatechange回调函数监听readyState这个属性状态变化！

 

案例Get请求：

　　servlet向jsp发送信息：

response.getWriter().println("hello world");

　　jsp页面：

　　<script type="text/javascript">
 　　   window.onload = function(){
 　　       var btn = document.getElementById("btn01");
 　　           btn.onclick=function(){
 　　           //1.创建XMLHttpRequest对象，我们使用这个对象完成Ajax请求！
 　　           var xhr = new XMLHttpRequest();
 　　           
　　            //2.通过open方法设置请求参数
 　　           var method= "get";
 　　           var url = "${pageContext.request.contextPath}/AServlet";
 　　           xhr.open(method, url);
 　　           
 　　           //3.发送请求！
 　　           xhr.send();
  　　          //4.接收响应信息
  　　          xhr.onreadystatechange= function(){
  　　              if(xhr.readyState == 4 && xhr.status == 200 ){
  　　                  var data = xhr.responseText;
  　　                  alert(data);
 　　               }
  　　          }
  　　      }
  　　  }
　　</script>

 

案例POST请求：　　

　　

 1　　 <script type="text/javascript">
 2　　     window.onload = function(){
　　        var btn = document.getElementById("btn01");
　　            btn.onclick=function(){
　　            //1.创建XMLHttpRequest对象，我们使用这个对象完成Ajax请求！
 　　           var xhr = new XMLHttpRequest();
　　            
　　            //2.通过open方法设置请求参数
　　            var method= "post";
　　            var url = "${pageContext.request.contextPath}/AServlet";
　　            xhr.open(method, url);
　　            xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
　　            //3.发送请求！
 　　           xhr.send("username=zhangsan&password=lisi");
　　            //4.接收响应信息
　　            xhr.onreadystatechange= function(){
　　                if(xhr.readyState == 4 && xhr.status == 200 ){
 　　                   var data = xhr.responseText;
　　                    alert(data);
　　                }
　　            }
 　　       }
　　    }
　　</script>

 

JSON：JavaScript 对象表示法（JavaScript Object Notation）
　　作用：JSON 是存储和交换文本信息的语法
　　优势：JSON 比 XML 更小、更快，更易解析。

　　json对象是用{}括起来的键值对结构：
　　　　1.键和值之间用:分隔
　　　　2.键值对之间用,分隔
　　　　3.键必须是字符串类型，也就是说必须用""[双引号]引起来！不能使用单引号，也不能不用引号！
　　　　4.JSON值的数据类型：
　　　　　　数字（整数或浮点数）
　　　　　　字符串（在双引号中）
　　　　　　逻辑值（true 或 false）
　　　　　　数组（在方括号中）
　　　　　　对象（在花括号中）
　　　　　　null
　　　　注意点：JSON对象是用{}括起来的，而数组是用【】括起来的！

　　JSON对象和JSON字符串之间的相互转换：
　　　　JSON对象转换为JSON字符串：
　　　　var jsonStr = JSON.stringify(json);
　　　　JSON字符串转换为JSON对象：
　　　　var jsonObj = JSON.parse(jsonStr);

 

    //1将普通对象转换为JSON字符串！
        Student  stu = new Student("张三",12);
        Gson gson = new Gson();
        
        String json = gson.toJson(stu);
        System.out.println(json);
        Student fromJson = gson.fromJson(json, Student.class);
        System.out.println(fromJson);
        
        //2.把Map转换成JSON字符串
        Map<String,String> map = new HashMap();
        map.put("hobby","篮球");
        map.put("gender", "男");
        String json2 = gson.toJson(map);
        System.out.println(json2);
        Map<String,String> fromJson = gson.fromJson(json2, Map.class);
        System.out.println(fromJson);
        
        //3.将List转换为JSON字符串
        List<Student> list = new ArrayList<Student>();
        list.add(new Student("刘德华", 53));
        list.add(new Student("冯小刚",63));
        
        String json3 = gson.toJson(list);
        
        System.out.println(json3);
        List<Map<String,Object>> fromJson = gson.fromJson(json3, List.class);
        for(Map map:fromJson){
            System.out.println(map.get("name"));
        }    

 

通过jQuery实现AJAX
　　 使用get和getJSON都会有缓存问题，并且使用get方法不能传送较多的数据。
　　post方法不会有缓存的问题，所以我们开发时使用post方法较多。

　　[1] post()方法
　　　　$.post(url, [data], [callback], [type])
　　　　参数：
　　　　　　url：发送AJAX的请求地址，字符串。
　　　　　　data：发送给服务器的请求参数，JSON格式。
　　　　　　callback：当前需要获取服务器发送的响应时，我们可以通过该回调函数。
　　　　　　jQuery会将响应信息以回调函数的参数的形式返回
　　　　　　type：响应信息的类型，字符串。一般两个常用值text、json

　　[2] get()方法
　　　　get方法和post方法使用方式基本一致。

　　[3] getJSON()方法
　　　　getJSON(url, [data], [callback])
　　　　getJSON方法和get方法类似，只不过该方法默认的响应类型为JSON，不需要再手动指定。