简单介绍ajax

2019-08-16 11:42:23来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

简单介绍ajax

1.简述

AJAX(Asynchronous Javascript And XML),是一个局部刷新技术,即网页不需要重新加载,只进行部分更新即可

例如:视频弹幕,点赞,登录验证...

2.JavaScript原生AJAX

步骤:

  1.创建XMLHttpRequest核心对象;

    var 变量名 = new XMLHttpReques();

  2.使用核心对象打开请求;

    变量名.open(参数一,参数二,参数三);

      参数一:数据提交方式(get或者post)

      参数二:请求地址

      参数三:是否异步(true[默认]异步,false)

  3.使用核心对象发送请求;

    变量名.send();

  4.接收数据.

    变量名.onreadystatechange = function(){...}

代码示例:

html:

<script type="text/javascript">
function jsajax(){
    var xhr = new XMLHttpRequest();
    xhr.open("post","JsAjax",true);
    xhr.send();
    xhr.onreadystatechange = function(){
        if(xhr.status == 200 && xhr.readyState == 4){
            var i = xhr.responseText;
            document.getElementById("msg").innerText=i;            
        }
    }
}
</script>
</head>
<body>
jsajax:<span id="msg"></span>
<br>
<button onclick="jsajax()">点我有惊喜</button>
</body>
</html>

java

//因为ajax可以获取响应主题的内容,所以采用PrintWriter返回数据
PrintWriter writer = response.getWriter(); writer.print("JS原生AJAX");

原生AJAX使用起来十分麻烦,一般只需要了解即可,更多的是使用下面JQ版的AJAX.

3.JQuery版AJAX

JQuery版AJAX有三种写法,下面一一介绍这三种写法

第一种:

$.ajax({

  url:"请求路径",

  data:{"键名1":值1,"键名2":值2,"键名3":值3......},

  type:"提交方式get/post",

  dataType:"返回数据格式",(常用:text,json)

  async:true/false,

  success:function(){},

  error:function(){}

})

url:请求路径;data:请求数据;type:数据请求方式;dataType:返回数据格式;async:是否异步;success:执行成功执行本函数;error:执行失败执行本函数

代码示例:

$.ajax({
    url:"JQAjax",
    data:{"name":"李四","age":24},
    type:"post",
    dataType:"text",
    async:true,
    success:function(obj){
        $("#msg").text(obj);
    }
})

 

第二种&第三种:

第二种和第三种是将提交方式分解出来,$.get()和$.post()内容基本一致

$.get(

  "请求路径",(对应第一种方式url)

  {"键名1":值1,"键名2":值2,"键名3":值3......},(对应data)

  function(){},(对应success:function(){})

  "返回数据格式"(对应dataType)

)

$.post(

  "请求路径",

  {"键名1":值1,"键名2":值2,"键名3":值3......},

  function(){},

  "返回数据格式"

)

代码示例:

$.get(
    "JQPostAjax",
    {"name":"张三","age":23},
    function(obj){
        $("#msg").text(obj);
    },
    "text"
);
$.post(
    "JQPostAjax",
    {"name":"张三","age":23},
    function(obj){
        $("#msg").text(obj);
    },
    "text"
);

 4.json

  • 概述:json是一种有格式的字符串,是轻量级的数据传输方式.

json数据格式(三种)

  1.数组

    [值1,值2,值3......]

    值的数据类型随意

  2.对象

    {"键名1":值1,"键名2":"值2"......}

  3.混合模式

    [{对象1},{对象2},{对象3}.....]

    {[数组1],[数组2],[数组3]......}

    这里只是简单叙述了混合模式的两种写法,实际写法并不固定,只要嵌套正确({}和[]交替使用),就OK.

  例如:

{
  "zone":"boss",
  "persons":[
    {"name":"张三","age":23,"sroce":[98,99,100]},
    {"name":"李四","age":24,"sroce":[87,87,87]},
    {"name":"王五","age":25,"sroce":[76,876,65]}
  ]
}

5.jackson

作用:jackson将数组,集合,对象...转换成json格式

使用方式:

  1.创建ObjectMapper对象

    ObjectMapper 对象名 = new ObjectMapper();

  2.将指定的数据转化为json

    String 变量名 = 对象名.writeValueAsString("指定的数据");

代码示例:

Student s1 = new Student("张三", 23, new int[]{93,94,95});
Student s2 = new Student("李四", 24, new int[]{94,95,96});
Student s3 = new Student("王五", 25, new int[]{95,96,97});
Student s4 = new Student("赵六", 26, new int[]{96,97,98});
Student s5 = new Student("孙七", 27, new int[]{97,98,99});
List<Student> students = new ArrayList<Student>();
students.add(s1);
students.add(s2);
students.add(s3);
students.add(s4);
students.add(s5);
//转化为json
/*
 * 1.创建ObjectMapper对象
 * 2.使用writeValueAsString将数据转化为json格式
 */
ObjectMapper mapper = new ObjectMapper();
String json = mapper.writeValueAsString(students);

response.setContentType("text/html;charset=utf-8");
PrintWriter writer = response.getWriter();
writer.print(json);

 


原文链接:https://www.cnblogs.com/wp9503/p/11285155.html
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:美团点评CAT监控平台研究

下一篇:Dubbo从入门到实战:实战篇