【JSON和AJAX】简单学习

最新推荐文章于 2024-09-03 15:34:00 发布

wlisonate

最新推荐文章于 2024-09-03 15:34:00 发布

阅读量166

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_43271086/article/details/101148885

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。它基于 ECMAScript (欧洲计算机协会制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

JSON对象由名称/值对组成名称和值之间用冒号:隔开，名称必须用双引号" 包含起来，值可以是任意javascript数据类型，字符串，布尔，数字，数组甚至是对象，不同的名称/值对之间用逗号隔开。

创建JSON对象

就是用我们熟悉的var标签，但是中括号包裹的地方还是还是遵循上面的格式，如下所示：

var gareen = {"name":"盖伦","hp":616};

访问JSON对象

br();
document.write("英雄名称："+gareen.name);
br();
document.write("英雄属性"+gareen.hp);

创建JSON数组

var hero = [
    {"name":"盖伦","hp":616},
    {"name":"提莫","hp":313},
    {"name":"死歌","hp":432},
    {"name":"火女","hp":389}
]

访问ＪＳＯＮ数组

document.write("数组的长度：" +hero.length);
//访问JSON数组
br();
document.write("第四个英雄是："+hero[3].name);
br();

JSON对象转化为字符串

只需要一个函数就可以解决,stringify

//进行JSON对象转化为字符串
var heroString = JSON.stringify(gareen);
document.write("这是一个字符串："+heroString);
br();

字符串转化为JSON对象

这个是真的麻烦,不仅需要具体的格式连转化时的方式都是相同的,看起来就很麻烦,我估计工作中用的也不多,就当习学习对象吧.

//字符串转化为JSON对象
var s1 = "{\"name\":\"盖伦\"";
var s2 = ",\"hp\":616}";
var s3 = s1+s2;
document.write("这是一个JSON类型的字符串"+s3);
br();
//进行字符串转化JSON对象
var gareen1 = eval("("+s3+")");//还必须这样写，好麻烦啊
document.write("这是一个JSON对象"+gareen1);
br();

Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。

Ajax = 异步 JavaScript 和 XML 或者是 HTML（标准通用标记语言的子集）。

Ajax 是一种用于创建快速动态网页的技术。

Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。

接下来用到网页的地方,官方已经在网上加载,你直接做尝试就行!!

使用AJAX请求通过无刷新验证账号是否存在

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用AJAX请求通过无刷新验证账号是否存在</title>
</head>
<body>
<span>输入账号：</span>
<input id="name" name="name" onkeyup="check()" type="text">
<span id="checkResult"></span>
<script>
    var xmlhttp;
    function check() {
        var name = document.getElementById("name").value;
        var url = "http://how2j.cn/study/checkName.jsp?name="+name;

        xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = checkResult;//响应函数，指定用checkResult 函数进行处理。
        xmlhttp.open("GET",url,true);//设置访问页面
        xmlhttp.send(null);//访问执行，null表示没有参数，因为参数已经通过“GET" 方式，放在url里了，只有在用"POST"，并且需要发送参数的时候，才会使用到send。
        //类似这样：
        //xmlhttp.send("user="+username+"&password="+password)
    }
    function checkResult() {
        if(xmlhttp.readyState == 4 && xmlhttp.status == 200)
            document.getElementById('checkResult').innerHTML = xmlhttp.responseText;
    }
    //xmlhttp.readyState 4 表示请求已完成
    //xmlhttp.status 200 表示响应成功
    //xmlhttp.responseText; 用于获取服务端传回来的文本
    //document.getElementById('checkResult').innerHTML 设置span的内容为服务端传递回来的文本
</script>
</body>
</html>

进行验证操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>进行验证操作</title>
</head>
<body>
</body>
<!--如果提交的用户名是abc就打印存在，否则就可以使用-->
<a href="http://how2j.cn/study/checkName.jsp?name=abc">checkName.jsp?name=abc</a>
<br>
<a href="http://how2j.cn/study/checkName.jsp?name=def">checkName.jsp?name=def</a>


</html>

不使用AJAX请求通过刷新页面验证账号是否存在

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>不使用AJAX请求通过刷新页面验证账号是否存在</title>
</head>
<body>
<form action="http://how2j.cn/study/checkName.jsp">
输入账号 <input name="name" type="text" value="abc">
    <input type="submit" value="验证账号是否存在">
</form>
</body>
</html>