您的位置：首页 > Web前端 > JavaScript

JSON&Ajax入门学习

2020-04-23 08:57 1211 查看

JSON

JSON介绍

JSON全名：JavaScript Object Notation JS对象表示，是一种轻量级的数剧交换格式，它基于ECMAScript的一个子集，采用完全独立于变成语言的文本格式来存储和表示数据。

JSON语法

[]表示数组，{}表示对象，""表示是属性名或字符串类型的值，: 表示属性和值之间的分割符，，表示多个属性的间隔符或者是多个元素的间隔符。Json的数据类型与js类似。

示例

<script>
// 使用JSON创建对象
var stus = {name:"Jack",age:"19",sex:"女"}
// 打印stus对象的各个属性
console.log(stus.name+":"+stus.age+":"+stus.sex)
// JSON字符串转化为JSON对象
var str = '{"name":"Tom","age":19,"sex":"女"}';
let str1 = JSON.parse(str);
console.log(str1)

// JSON对象转化为字符串
var stus = {name:"Cube",age:"19",sex:"男"};
let s = JSON.stringify(stus);
console.log(s)
</script>

FastJson解析

通过java来实现FastJson解析，使用前要先导入fastjson的jar包。

public class FastJson {
public static void main(String[] args) {
// JSON字符串转化为实体类对象
String json1 = "{'id':1,'name':'一班', 'stus':[{'id':001,'name':'Cube','age':20}]}";
// 实体类要存在
Grade grade = JSON.parseObject(json1, Grade.class);
System.out.println(grade);
//结果为：Grade{id=1, name='一班', stus=[Student{id=1, name='Cube', age=20}]}
// 将实体类对象转化为JSON字符串
ArrayList<Student> list = new ArrayList<Student>();
Student stu = new Student(2,"某某",19);
list.add(stu);
Grade grade1 = new Grade(2,"二班",list);
String s = JSON.toJSONString(grade1);
System.out.println(s);
//结果为：{"id":2,"name":"二班","stus":[{"age":19,"id":2,"name":"徐杰"}]}

}
}

// FastJson提供了一些使用方法
//控制不序列化某些属性 @JSONField(serialize=false) 默认为true 意思为不让哪个属性参与JSON解析，使用方法：直接在属性名上面加注解
//控制输出
1. SerializerFeature.PrettyFormat --> 美化输出
2. SerializerFeature.WriteMapNullValue --> null也输出
3. SerializerFeature.WriteNullStringAsEmpty --> null输出为""
4. SerializerFeature.DisableCircularReferenceDetect --> 循环引用检测,意思是如果json对象中出现两个相同的对象，默认是不输出，如果加上这个参数，则会输出

AJAX

AJAX介绍

AJAX是一种在无需重新加载整个网页的情况下，能够实现局部更新的技术。
AJAX = 异步JavaSript和XML–>Asynchronized JavaScript And XML.AJAX是一种用于快速创建动态网页的技术，通过在后台与服务器进行少量数据交换，AJAX可以使网页实现异步更新，也就是可以不用重新加载整个页面而只对网页的某个部分进行更新。

AJAX的使用

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>demo</title>
</head>
<body>
<div id="div1">呜呜呜呜</div>
<button οnclick="changes()">ajax修改内容</button>
<script>
function changes() {
// 1. 创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();

// 2. 设置回调函数
xhr.onreadystatechange = function () {
//服务器状态和响应码
if(xhr.readyState == 4 && xhr.status == 200){
//动态修改局部内容
document.getElementById("div1").innerText = xhr.responseText;
}
}
// 3. 打开连接,参数分别为提交方式，请求地址，异步/同步 默认为异步
xhr.open("GET","/test",true);
// 4. 发送请求
xhr.send();
}
</script>
</body>
</html>
//以及对应的Servlet
@WebServlet("/test")
public class TestServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setCharacterEncoding("utf-8");
response.getWriter().println("服务器回你的消息！");
}

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}
}

XMLHttpRequest对象

XMlHttpRequest对象是AJAX的基础，所有现代浏览器均支持且内建此对象（IE5和IE6使用ActiveXObject）,XMLHttpRequest用于在后台与服务器交互数据。

使用：

var xmlhttp;
if(window.XMLHttpRequest)
{
xmlhttp = new XMLHttpRequest();
}
else{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

onreadystatechange回调函数

当请求被发送到服务器时，我们需要执行一些基于响应的任务，每当readyState改变时，就会触发onreadystatechange事件，readyState属性存有XMLHttpRequest的状态信息。下面为XMLHttpRequest对象的三个重要的属性：

属性 描述
onreadystatechange 存储函数（或函数名），每当readyState属性值改变时，就会调用存储的函数
readyState 存有XMLHttpRequest的状态，从0-4发生变化。0：请求未初始化，1：服务器连接已建立，2：请求已接收，3：请求处理中，4：请求已完成，且响应就绪
status 服务器状态码，常见：200:“OK”,404:“资源不存在” 
// 例如：这里的readyState一共会变化4次，从1-4
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
//服务器状态和响应码
if(xhr.readyState == 4 && xhr.status == 200){
//动态修改局部内容
document.getElementById("div1").innerText = xhr.responseText;
}
}

XMLHttpRequest请求

将请求发送到服务器，就得用到XMLHttpRequest对象的open()和send()方法

方法 描述
open(method,url,async) method：请求的类型，url：请求资源的路径，async：true(异步)或false(同步)，默认为异步
send(string) 将请求发到服务器。string：仅用于POST请求

注意事项：post提交的数据要以表单形式提交，也就是在提交之前要加上：

new XMLHttpRequest().setRequestHeader("Content-type","application/x-www-form-urlencoded;chatset=utf-8")

XMLHttpRequest响应

获取来自服务器的响应，使用XMLHttpRequest对象的responseText和responseXML属性
responseText返回字符串形式的响应，responseXML返回以XML形式的响应，故需要对XML进行解析。

  • 点赞
  • 收藏
  • 分享
  • 文章举报
Cubezc 发布了4 篇原创文章 · 获赞 0 · 访问量 70 私信 关注
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航