关于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,不需要再手动指定。

posted @ 2017-08-21 21:06  戏路很宽丶  阅读(401)  评论(0编辑  收藏  举报