关于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页面：

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

案例POST请求：　　

 1　　 <script type="text/javascript">
 2　　     window.onload = function(){
 3 　　        var btn = document.getElementById("btn01");
 4 　　            btn.onclick=function(){
 5 　　            //1.创建XMLHttpRequest对象，我们使用这个对象完成Ajax请求！
 6  　　           var xhr = new XMLHttpRequest();
 7 　　            
 8 　　            //2.通过open方法设置请求参数
 9 　　            var method= "post";
10 　　            var url = "${pageContext.request.contextPath}/AServlet";
11 　　            xhr.open(method, url);
12 　　            xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
13 　　            //3.发送请求！
14  　　           xhr.send("username=zhangsan&password=lisi");
15 　　            //4.接收响应信息
16 　　            xhr.onreadystatechange= function(){
17 　　                if(xhr.readyState == 4 && xhr.status == 200 ){
18  　　                   var data = xhr.responseText;
19 　　                    alert(data);
20 　　                }
21 　　            }
22  　　       }
23 　　    }
24 　　</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     //1将普通对象转换为JSON字符串！
 2         Student  stu = new Student("张三",12);
 3         Gson gson = new Gson();
 4         
 5         String json = gson.toJson(stu);
 6         System.out.println(json);
 7         Student fromJson = gson.fromJson(json, Student.class);
 8         System.out.println(fromJson);
 9         
10         //2.把Map转换成JSON字符串
11         Map<String,String> map = new HashMap();
12         map.put("hobby","篮球");
13         map.put("gender", "男");
14         String json2 = gson.toJson(map);
15         System.out.println(json2);
16         Map<String,String> fromJson = gson.fromJson(json2, Map.class);
17         System.out.println(fromJson);
18         
19         //3.将List转换为JSON字符串
20         List<Student> list = new ArrayList<Student>();
21         list.add(new Student("刘德华", 53));
22         list.add(new Student("冯小刚",63));
23         
24         String json3 = gson.toJson(list);
25         
26         System.out.println(json3);
27         List<Map<String,Object>> fromJson = gson.fromJson(json3, List.class);
28         for(Map map:fromJson){
29             System.out.println(map.get("name"));
30         }

通过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，不需要再手动指定。