首页 > > 程序设计 > Java技术 >

简单介绍ajax

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

简单介绍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);