• JSON与AJAX

    目录

    JSON

    前言

    JSON语法

    JSON格式 

    注意：

    转换工具

    给服务器发送数据: 将JS对象转成JSON字符串

    接受服务器的数据: JSON字符串转成JS对象

    AJAX

    前言

    AJAX引擎

    AJAX固定步骤

    XMLHttpRequest()对象方法

    XMLHttpRequest()对象属性 

    AJAX状态码

    请求方式

    readyStateChange事件

    JSON

    前言

    含义：JS对象表示法，其就是一个字符串，用来完成浏览器和服务器之间的数据交换

    注意：

    • json规定了浏览器和服务器之间的数据格式：'"name":"jack"'
    • 其基于JS规范的一个子级采用完全独立于编程语言的文本格式来储存和表示数据

    理解：

    JSON 是存储和交换文本信息的语法。当数据在浏览器与服务器之间进行交换时，这些数据只能是文本。JSON 属于文本，并且我们能够把任何 JavaScript 对象转换为 JSON，然后将 JSON 发送到服务器。我们也能把从服务器接收到的任何 JSON 转换为 JavaScript 对象。以这样的方式，我们能够把数据作为 JavaScript 对象来处理，无需复杂的解析和转译。

    JSON语法

    1.     //JSON数据
    2.     var a='"name":"lili"'
    3.     //JSON对象
    4.     var b='{"name":"lucy","age":8,"boolean":true}'
    5.     //JSON数组
    6.     var c='[{"name":"lucy","age":8},{"name":"lili","age":7}]'

    JSON格式 

    1.     //对象格式
    2.     '{"name":"lili","age":100,"flag":true}'
    3.     //数组格式
    4.     '[100,"lili",true]'
    5.     //嵌套格式
    6.     '[100,true,["a",10,{"name":"lili","hobbys":["eat","sleep"]}]]'

    注意：

    • 对象格式的json串其key数据类型必须为字符串，值value类型可以为字符串、数值类型、布尔类型、null、数组、对象类型，并且这些类型可以嵌套
    • json格式的数据总体为一个字符串

    转换工具

    使用JS里的内置对象JSON.用来把以 JSON 格式写的字符串 和 原生 JavaScript 对象互转.

    给服务器发送数据: 将JS对象转成JSON字符串

    语法：JSON.stringify(Js对象)

    返回值：一个JSON串

    接受服务器的数据: JSON字符串转成JS对象

    语法：JSON.parse("json字符串")

    返回值：一个js对象

    注意：当把对象转化为JSON串时若原来的对象有方法，则方法不被转化为json数据,直接省略

    1. <script>
    2.     function Person(name,age){
    3.         this.name=name
    4.         this.age=age
    5.         var fun=function(){console.log("hello world");}
    6.     }
    7.     var p=new Person("lili",8)
    8.     //对象转json串
    9.     var res=JSON.stringify(p)
    10.     console.log(p);
    11.     console.log(res);
    12.     var a='{"name":"kate","age":9,"flag":true}'
    13.     //json串转化为对象
    14.     var b=JSON.parse(a)
    15.     console.log(a);
    16.     console.log(b);
    17. </script>

    AJAX

    前言

    含义：(asynchronous javascript and xml)是一种无需重新加载网页的情况下就能够更新部分网页的技术

    注意：ajax不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的web应用程序的技术

    AJAX特点：局部刷新，异步访问。（依赖于AJAX引擎）

    同步特点：一个线程依次加载执行，若数据没有加载完成则其他的数据处于等待状态

    AJAX引擎

    1. 用户发起请求，交给ajax引擎处理，用户可以执行其他操作（局部刷新）
    2. ajax接收到用户请求后发起http请求访问目标服务器（异步访问）
    3. 后台服务器将数据返回给ajax引擎
    4. ajax引擎通过回调函数的方式交给用户处理 

    在这里插入图片描述 

    AJAX固定步骤

    1.创建ajax对象

    var xhr=new XMLHttpRequest()

    2.配置本次请求信息

    xhr.open("请求方式","请求地址","是否异步")

    注意：是否异步默认为true

    3.注册请求完成的事件

    xhr.οnlοad=function(){

    console.log(xhr.responseText)

    }

    注意：这个事件会在本次请求完成之后触发

    4.把请求发送出去

    xhr.send()

    注意：这种方式为页面全部加载完可以获得响应数据，可以与readyStateChange事件类比

    请求完成：本次请求发送出去，服务器收到我们的请求，并且服务器返回的信息已经回到了浏览器

    拿到后端返回的信息：xhr.responseText

    XMLHttpRequest()对象方法

    在这里插入图片描述

    XMLHttpRequest()对象属性 

    在这里插入图片描述

    AJAX状态码

    1.  readyState === 0 : 表示未初始化完成，也就是 open 方法还没有执行 
    2.  readyState === 1 : 表示配置信息已经完成，也就是执行完 open 之后 
    3.  readyState === 2 : 表示 send 方法已经执行完成
    4.  readyState === 3 : 表示正在解析响应内容
    5.  readyState === 4 : 表示响应内容已经解析完毕，可以在客户端使用了

    请求方式

    注意：get请求的参数信息要用？拼接写在请求地址的后面，而post请求的参数信息要写在send的括号里面

    1. <script>
    2.     //get请求
    3.     var a=new XMLHttpRequest()
    4.     a.open("get","http://localhost:8888/test/third?name=我是神",true)//默认就为true
    5.     a.onload=function(){
    6.         console.log(a.responseText);
    7.     }
    8.     a.send()
    9.  
    10.     //post请求
    11.     var b=new XMLHttpRequest()
    12.     b.open("post","http://localhost:8888/test/fourth",true)
    13.     b.onload=function(){
    14.         console.log(JSON.parse(b.responseText));
    15.     }
    16.     //send后面的（）就是书写请求体的位置，当你发送post请求并且需要携带参数的时候，需要进行特殊声明
    17.     //特殊声明语法：对象.setRequestHeader("content-type",你传递参数的格式)
    18.     b.setRequestHeader("content-type","application/x-www-form-urlencoded")
    19.     b.send('name=前端&age=18')
    20. </script>

    readyStateChange事件

    1. 在 ajax 对象中有一个事件，叫做 readyStateChange 事件
    2. 这个事件是专⻔用来监听 ajax 对象的 readyState 值改变的的行为
    3. 也就是说只要 readyState 的值发生变化了，那么就会触发该事件
    4. 所以我们就在这个事件中来监听 ajax 的 readyState 是不是到 4 了
    5. 只有readyState到4了，我们才能得结果
    1. <body>
    2.     <!-- 点击时,使用ajax -->
    3.     <div onclick="change()">按钮</div>
    4. </body>
    5. <script>
    6.     function change() {
    7.         var xhr = new XMLHttpRequest();
    8.         //定义当 readyState 属性发生变化时被调用的函数
    9.         xhr.onreadystatechange = function () {
    10.             //3. status是200表示请求成功,readyState是4表示请求已完成且响应已就绪
    11.             if (this.status == 200 && this.readyState == 4) {
    12.                 //到达指定状态后才能执行指定操作
    13.                 //只有ajax发送完并得到结果，才可以从xhr中取得想要的数据
    14.                 console.log(xhr.responseText);
    15.             }
    16.         }
    17.         //3.规定请求的类型(请求方式,文件位置,异步)
    18.         xhr.open('get', 'http://localhost:8888/test/second?name=lili', true);
    19.         xhr.send();
    20.     }
    21. </script>

  • 相关阅读:
    华为路由器忘记密码怎么恢复
    Linux系统管理、运行级别、关闭防火墙
    java-php-python--损失赔偿保险的客户情况登记及管理-计算机毕业设计
    冒泡排序与快速排序
    Linux登录自动执行脚本
    力扣 -- 227. 基本计算器 II
    nginx网站服务
    org.springframework.web.reactive.function.server.ServerResponse设置响应头
    [附源码]计算机毕业设计基于Springboot通用病例管理系统
    C/C++算法入门 | 简单模拟
  • 原文地址：https://blog.csdn.net/m0_60027772/article/details/125500706