web常见的几种数据交互的常见方式

最新推荐文章于 2023-11-25 13:25:58 发布

Ghoul_C_L

最新推荐文章于 2023-11-25 13:25:58 发布

阅读量1k

点赞数 1

文章标签： vue js java ajax

本文链接：https://blog.csdn.net/Ghoul_C_L/article/details/108712376

版权

前言

在当今社会，作为一名前端程序猿，并不是一昧的去制作静态页面就可以满足滴；你说你会制作网页，好吧，只能说你算是一个前端程序猿。但这是你作为一个程序猿最基本的能力，并不会为你进行加分；

我们都明白，要想提高竞争力，提高自己的技能是十灰重要的。前后台的数据交互就是一个很好的加分项。今天，就带大家一起了解一下web前端实现数据交互的几种方式；

一、Ajax

作为一个前端程序猿，对于各种JS框架和各种库肯定不陌生。原生js的ajax以及jQuery的ajax都是十分常用的数据交互的方式；

1.1 原生JS的Ajax

大家可能对原生JS比较陌生，毕竟相对于jQuery的ajax,原生的确实有些复杂，不够jQuery的ajax是由原生的ajax封装而来。由此可见了解原生的ajax是十分必要的；

首先，要了解异步的javascript和xml,核心对象为XMLHttpRequest.

接下啦，给大家介绍XMLHttpRequest中的属性与方法：

XMLHttpRequest属性：

在这里插入图片描述
二、XMLHttpRequest方法：

在这里插入图片描述
接下来，把栗子中的步骤整理一下：

第一步：获得XMLHttpRequest对象；

var ajax = new XMLHttpRequest();

第二步：设置状态监听函数

ajax.onreadystatechange = function(){
   }

第三步：open一个请求：

其中，第一个参数为传递方式：get/post;

第二个参数：请求数据的url地址；

第三个参数：true/false。true表示异步请求。false表示同步请求

ajax.open("GET","h5.json",true);

第四步：send一个请求。可以发送对象和字符串，不需要传递数据发送null;

ajax.send(null);

第五步，在监听函数中，判断readyState==4 && status == 200表示请求成功；

if (ajax.readyState == 4 && ajax.status == 200) {
   }

第六步，使用ajax.responseText、ajax.responseXML接收响应数据，并使用原生js操作DOM进行显示；

console.log(JSON.parse(ajax.responseText));

直接上栗子：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            //第一步：获得XMLHttpRequest对象
            var ajax = new XMLHttpRequest();

            //第二步：设置状态监听函数
            ajax.onreadystatechange = function(){
    
                //console.log(ajax.readyState);
                //console.log(ajax.status);
                //第五步，在监听函数中，判断readyState==4 && status == 200表示请求成功；
                if (ajax.readyState == 4 && ajax.status == 200) {
    
                    //第六步，使用ajax.responseText、ajax.responseXML接收响应数据，并使用原生js操作DOM进行显示
                    //console.log(ajax.responseText);
                    //console.log(ajax.responseXML);//返回不是XMl,显示null
                    console.log(JSON.parse(ajax.responseText));
                    //console.log(eval("("+ajax.responseText+")"));


                }
            }

            //第三步：open一个请求
            ajax.open("GET","h5.json",true); //true表示异步请求。false表示同步请求

            //第四步：send一个请求。可以发送对象和字符串，不需要传递数据发送null;
            ajax.send(null);

            var str = "alert('111')";
            eval(str);
            eval("alert('111')");

            var json1 = "{'name':'zhangsan'}";
            console.log(eval("("+json1+")"));
        </script>
    </head>
    <body>
    </body>
</html>

json:

[
    {
   
        "name": "zhangsan",
        "age": 17,
        "hobby": [
            "吃",
            "喝",
            "玩",
            "乐"
        ],
        "score":{
   
            "math":78,
            "chinese":89
        }
    },
    {
   
        "name": "zhangsan",
        "age": 17,
        "hobby": [
            "吃",
            "喝",
            "玩",
            "乐"
        ],
        "score":{
   
            "math":78,
            "chinese":89

最低0.47元/天解锁文章

Ghoul_C_L

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
web常见的几种数据交互的常见方式

前言在当今社会，作为一名前端程序猿，并不是一昧的去制作静态页面就可以满足滴；你说你会制作网页，好吧，只能说你算是一个前端程序猿。但这是你作为一个程序猿最基本的能力，并不会为你进行加分；我们都明白，要想提高竞争力，提高自己的技能是十灰重要的。前后台的数据交互就是一个很好的加分项。今天，就带大家一起了解一下web前端实现数据交互的几种方式；一、Ajax作为一个前端程序猿，对于各种JS框架和各种库肯定不陌生。原生js的ajax以及jQuery的ajax都是十分常用的数据交互的方式；1.1 原生JS的Aj
复制链接

扫一扫