【无标题】

kumouya

于 2022-07-26 09:31:17 发布

阅读量91

点赞数

分类专栏：前端文章标签： json 服务器 ajax

本文链接：https://blog.csdn.net/zzbdkl/article/details/125980267

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

ajax实现数据异步传输

<!DOCTYPE html>
<html lang="en">

<head>
    <meta content="text/html; charset=utf-8">
    <title>AJAX And JSON</title>

</head>

<body>
    <script src="./js/jquery-3.2.1.min.js"></script>
    <script type="application/javascript">
        function load() {
            var url = "http://localhost:3000/data"; // 获取 JSON 数据的链接
            var request;
            if (window.XMLHttpRequest) {
                request = new XMLHttpRequest(); //发送 Ajax 请求，适用于 Chrome, mozilla 等浏览器 
            } else if (window.ActiveXObject) {
                request = new ActiveXObject("Microsoft.XMLHTTP"); // 发送 Ajax 请求，适用于 IE 浏览器 
            }
            request.onreadystatechange = function () {
                if (request.readyState == 4) {
                    var jsonObj = JSON.parse(request.responseText); // 解析 JSON 数据
                    console.log(jsonObj[0]);
                    document.getElementById("title").innerHTML = jsonObj[0].title;
                    document.getElementById("author").innerHTML = jsonObj[0].author;
                    document.getElementById("url").innerHTML = jsonObj[0].url;
                    document.getElementById("catalogue").innerHTML = jsonObj[0].catalogue;
                }
            }
            request.open("GET", url, true);
            request.send();
        }
    </script>
    Title: <span id="title"></span><br />
    Author: <span id="author"></span><br />
    Url: <span id="url"></span><br />
    Catalogue: <span id="catalogue"></span><br />
    <button type="button" onclick="load()">点击加载 JSON 数据</button>
</body>

</html>

```html

readState
XMLHttpRequest.onreadystatechange

语法
XMLHttpRequest.onreadystatechange = callback()

var request = new XMLHttpRequest(),
	method = "GET",
	url="http:asdasdad",
	request.open(method,url,true)
	request.onreadystatechange = fuction(){
	if(request.readyState === XMLHttpRequest.DONE && xhr.status === 200){
	console.log(request.responseTest)
	}
	}
	request.send();
	（1）先定义一个XMLHttpRequest
	（2）使用opern(method,url,true),前提是定义三个参数
	（3）使用onreadystatechange定义回调函数
	②onreadystatechange事件

不要看这一大串这么长，翻译过来就是当前数据源的数据将要发生变化时，就可以理解成监听。
这个事件就是实现异步请求的核心关键。
为什么异步请求可以不用等待响应？
就是因为这儿设置了一个监听事件。
服务器被监听，一旦readyState为4并且status为200，表明响应成功。
这些属性都是怎么来的，w3c文档中就有说明：
readyState和status都对应有不同的数值，只不过4和200表示响应成功。
③绑定提交地址
open()方法，其有三个参数：
method：即请求方式，例子中是GET请求。
url：请求路径，"/getAjaxServlet"。
async：true表示为异步、false表示为同步，不写默认为true。
④发送请求
send()方法，将请求发送到服务器。
同样的道理，这些方法在w3c文档中也有详细说明。
⑤接收响应数据
也就是在②中判断响应成功时，接受响应的数据，有两种属性：
responseText ：获取字符串形式的数据。
responseXML：获取XML形式的数据。
如果不是XML数据，都使用responseText。

Json的基础语法
一共有三种数据格式，分别说明：
①对象类型
格式为：{name:value,name:value……}
以键值对的方式存储数据，可以有多个键值对，键值对之间用逗号隔开。
其中name为字符串类型，而value是任意类型。
②数组/集合类型
格式为：[value,value…]
其中value是任意类型。
和数组就很类似，只不过是使用中括号将数据包裹起来的。
③混合类型
即包含对象类型和数组类型。
值得注意的是：
JSON数据的key值：字符串类型，必须加双引号。
JSON数据的value值：任意类型，如果是字符串则必须加双引号。