AJAX、JSON、$ajax():、 $.get()和$.plost()

编程语言 2023-04-07 03:38:46 阅读次数: 0

AJAX

        AJAX= Asynchronous JavaScript and XML(异步的JavaScript和XML)

同步与异步的区别

同步的理解:

        同步就是指一个进程在执行某个请求的时候，若该请求需要一段时间才能返回信息，那么这个进程将会一直等待下去，直到收到返回信息才继续执行下去;

        同步就相当于是当客户端发送请求给服务端，在等待服务端响应的请求时，客户端不做其他的事情。当服务端做完了才返回到客户端。这样的话客户端需要一直等待。用户使用起来会有不友好。

异步的理解:

        异步是指进程不需要一直等下去，而是继续执行下面的操作，不管其他进程的状态。当有消息返回时系统会通知进程进行处理。这样可以提高执行的效率。

        异步就相当于当客户端发送给服务端请求时，在等待服务端响应的时候，客户端可以做其他的事情，这样节约了时间，提高了效率。

        同步是阻塞模式，异步是非阻塞模式。

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

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

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

        XML可扩展标记语言。XML被设计用来传输和存储数据。XML和HTML类似，不同的是HTML中都是预定义标签，而XML中没有预定义标签，全都是自定义标签，用来表示一些数据。

        以前Ajax是用XML格式的字符串进行数据交换，现在已经被JSON取代了。

Ajax特点:

优点:

  •         可以无需刷新页面，与服务器进行通信
  •         允许依据用户事件来更新部分页面内容

缺点:

  •         没有浏览历史，不能回退
  •         存在跨域问题（(同源)
  •         SEO不友好(搜索引擎优化，对爬虫不友好)

AJAX原理

        客户端发送请求，请求交给XMLHttpRequest，XMLHttpRequest 把请求提交给服务，服务器进行业务处理，服务器响应数据交给XMLHttpRequest对象，XMLHttpRequest对象接收数据，由javascript把数据写到页面上。

原生AJAX

创建一个XMLHttpRequest对象

var xmlhttp = new XMLHttpRequest()

告诉浏览器请求的方式是什么，以及请求发送到那儿

//xmlhttp.open("get", "url", true)

xmlhttp.open("get", "http://127.0.0.1:8090", true)

(3）获得响应

        如需获得来自服务器的响应，请使用XMLHttpRequest对象的responseText或 responseXML属性。

属性 描述
responseText 获得字符串形式的响应数据。
responseXML 获得XML形式的响应数据。

xmlhttp.onreadystatechange = function() {

                    // 做数据处理

                    // console.log(xmlhttp.responseText)

                    document.getElementById("div1").innerHTML = xmlhttp.responseText

                }

onreadystatechange事件

        当请求被发送到服务器时。我们需要执行一些基于响应的任务。每当readyState改变时。就会触发onreadystatechange事件。readyState属性存有XMLHtpRequest的状态信息。

下面是XMLHttpRequest对象的三个重要的属性:

属性 描述
onreadystatechange 存储函数(或函数名)，每当readyState属性改变时，就会调用该函数。
reagyState

存有XMLHttpRequest的状态。<br/>

从0到4发生变化。<br/>

0:请求未初始化<br/>

1:服务器连接已建立<br/>

2:请求已接收<br/>

3:请求处理中<br/>

4:请求已完成，且响应已就绪
status

200: "OK" <br/>

404:未找到页面

在onreadystatechange事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。

当readyState等于4且状态为200时，表示响应已就绪。

html代码：

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src=""></script>
</head>

<body>
    点击按钮，显示对应的内容
    <hr>
    <input type="button" name="btn1" id="btn1" value="发送">
    <div id="div1"></div>
    <script>
        document.querySelector("#btn1").onclick = function() {
            // 第一步：创建一个XMLHttpRequest对象
            var xmlhttp = new XMLHttpRequest()
                // 第二步：告诉浏览器请求的方式是什么，以及请求发送到那儿
            xmlhttp.open("get", "http://127.0.0.1:8090", true)
                // 第三部：设置响应服务器端数据处理
            xmlhttp.onreadystatechange = function() {
                    // 做数据处理
                    // console.log(xmlhttp.responseText)
                    document.getElementById("div1").innerHTML = xmlhttp.responseText
                }
                // 第四步：发送请求
            xmlhttp.send()
            xmlhttp.onload
        }
    </script>
</body>

</html>

web.js代码

var http = require("http");
http.createServer(function(req, res) {
    //实现跨域
    res.writeHead(200, { "Access-Control-Allow-Origin": "*" });

    res.write("<head><meta charset='utf-8'/></head>");
    res.write("第一个web服务器");
    res.write("<h1>Hello Ajax</h1>");
    res.end();
}).listen(8090);

XML简介：

        Xml_又叫可扩展标记语言，主要用来传输和存储数据。

        Xml和html类似一都是使用标签;不同的时html_中都是预定义标签，而 xml中没有预定义标签，全都是自定义标签，用来表示一些数据。

JSON

        JSON: JavaScript Object Notation, JS对象简谱，是一种轻量级的数据交换格式,javascript对象表示法。

        作用:JSON是一种轻量级的文本数据交换格式，在作用上类似于XML，专门用于存储和传输数据，但是jSON比XML更小、更快、更易解析。.

        现状:JSON是在2001年开始被推广和使用的数据格式。到现在为止，JSON已经成为了主流的数据交换格式。

JSON的两种结构:

        JSON就是用于字符串来表示JavaScript的对象和数组，所以，JSON中包含对象和数组两种结构，通过这两种结构的相互嵌套，可以表示各种复杂的数据结构。

对象结构：

        对象结构在[SON中表示为{ )括起来的内容。数据结构为{(key-value,key'value...的键值对结构。其中，key必须是使用英文的双引号包裹的字符串，value的数据类型可以是数字、字符串、布尔值、null、数组、对象6种类型。

数组结构：

        数组结构在JSON中表示为[ ]括起来的内容。数组结构为["java" "javascript",30,true...]。数组中数据的类型可以是数字、字符串、布尔值、null、数组、对象6种类型。

JSON语法注意事项：

  • 属性名必须使用双引号包裹
  • 字符串类型的值必须使用双引号包裹
  • JSON中不允许使用单引号表示字符串
  • JSON中不能写注释
  • JSON的最外层必须是对象或数组格式。
  • 不能使用undefined或函数作为JSON的值

JSON和JS对象的关系：

        JSON是JS对象的字符串表示法，它使用文本表示一个JS对象的信息，本质是一个字符串。

//这是一个对象

var obj={a: 'He11o',b : ' wor1d'}

//这是一个3sON字符串，本质是一个字符串

var json="{"a" : "He11o", "b" : "wor1d"}'

JSON和JS对象的相互转换:要实现从]SON字符串转换为JS对象，使用JSON.parse(方法;

var obj = JSON.parse(" {"a" : "he11o" , "b" : "wor1d"');

//结果为{a : " He11o' ,b : ' wor1d'}

要实斑从|s对象转换为JSON字符串，使用lSON.stringify()方法。

var obj = 3SON . stringify(a : 'He11o' , b : ' wor1d');

//结果为'{"a" : "he11o", "b" : "wor1d"}"

序列化与反序列化:

        把数据对象转换为字符串的过程，叫做序列化，例如:调用JSON.stringify0)函数的操作，叫做JSON序列化。因此JSON.stringify(函数就叫做序列化函数。

        把字符串转换为数据对象的过程，叫做反序列化，例如:调用|SON.parse()函数的操作，叫做JSON反序列化。因此JSON.parse()函数就叫做反序列化函数。

工作中常用json还是xml作为传输的格式?

json是最常用的方式:

1、解析简单2、结构清晰xml

缺点:

1、内容比json大，传输比json占用更多的带宽

2、解析很麻烦，需要借助解析框架。门槛高

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    点击按钮，显示对应的内容
    <hr>
    <input type="button" value="显示" id="btn">
    <div id="div1"></div>
</body>
<script>
    var btn = document.getElementById("btn")
    btn.onclick = function() {
        //创建XMLHttpRequest
        var xmlhttp = new XMLHttpRequest()
            //请求方式。地址
        xmlhttp.open("get", "data/student.json", true)
            //第三部：设置响应服务器端数据处理
        xmlhttp.onreadystatechange = function() {
                // 做数据处理
                // /需要将json字符串转换成js对象，JSON.parse()实现反序列化
                var students = JSON.parse(xmlhttp.responseText)
                    // console.log(students[0].stuID)
                var table = "<table border='1' bordercolor='red'><tr><th>学号</th><th>姓名</th><th>年龄</th></tr>";
                for (var i = 0; i < students.length; i++) {
                    // console.log(students[i])
                    var stuid = students[i].stuID
                    var stuname = students[i].stuName
                    var stuage = students[i].stuAge
                    table += "<tr><td>" + stuid + "</td><td>" + stuname + "</td><td>" + stuage + "</td></tr>"
                }
                table += "</table>"
                document.querySelector("#div1").innerHTML = table
            }
            //成功
        xmlhttp.send()
            // xmlhttp.onload
    }
</script>

</html>

student.json文件：

[{
    "stuID": "1001",
    "stuName": "张三",
    "stuAge": 20
}, {
    "stuID": "1002",
    "stuName": "李四",
    "stuAge": 19
}, {
    "stuID": "1003",
    "stuName": "李梅",
    "stuAge": 21
}, {
    "stuID": "1004",
    "stuName": "Rose",
    "stuAge": 19
}, {
    "stuID": "1005",
    "stuName": "Tom",
    "stuAge": 20
}]

$ajax():

执行异步AJAX请求。

定义和用法:

         ajax()方法用于执行AJAX(异步HTTP)请求。

        所有的jQuery AJAX方法都使用ajax()方法。该方法通常用于其他方法不能完成的请求。

语法:

$.ajax({name : value，name : value,...}

该参数规定AJAX请求的一个或多个名称/值对。

下面的表格中列出了可能的名称/值:

名称 值/描述
async 布尔值，表示请求是否异步处理。默认是true。
type 规定请求的类型(GET 或 POST) .
url 规定发送请求的URL。默认是当前页面。
success(result,status,xhr) 当请求成功时运行的函数。
dataType 预期的服务器响应的数据类型。
beforeSend(xhr) 发送请求前运行的函数。
complete(xhr,status) 请求完成时运行的函数（在请求成功或失败之后均调用，即在success和error函数之后)。
data 规定要发送到服务器的数据。
error(xhr,status,error) 如果请求失败要运行的函数。 

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery-3.6.0.min.js"></script>
</head>

<body>
    点击按钮，显示对应的内容
    <hr>
    <input type="button" value="显示" id="btn">
    <div id="div1"></div>
</body>
<script>
    $(function() {
        $("#btn").click(function() {
            $.ajax({
                type: "get", //请求方式
                url: "data/student.json", //请求的url
                async: true, //异步
                dataType: "text", //响应的数据类型
                success: function(data) {
                    // console.log(typeof data)
                    var students = JSON.parse(data)
                    for (var i = 0; i < students.length; i++) {
                        console.log(students[i].stuID)
                    }
                }
            })
        })
    })

</script>

</html>

student.json文件：

[{
    "stuID": "1001",
    "stuName": "张三",
    "stuAge": 20
}, {
    "stuID": "1002",
    "stuName": "李四",
    "stuAge": 19
}, {
    "stuID": "1003",
    "stuName": "李梅",
    "stuAge": 21
}, {
    "stuID": "1004",
    "stuName": "Rose",
    "stuAge": 19
}, {
    "stuID": "1005",
    "stuName": "Tom",
    "stuAge": 20
}]

 $.get()和$.plost()

        jQuery get()和post()方法用于通过HTTP GET或POST请求从服务器请求数据。

HTTP请求:GET vs POST：

        两种在客户端和服务器端进行请求-响应的常用方法是:GET和POST。

  • GET-从指定的资源请求数据
  •  POST -向指定的资源提交要处理的数据
  • GET基本上用于从服务器获得（取回）数据。注释:GET方法可能返回缓存数据。
  • POST也可用于从服务器获取数据。不过，POST方法不会缓存数据，并且常用于连同请求一起发送数据。

 $.get()方法：

        $.get()方法通过HTTP GET请求从服务器上请求数据。

语法:

$.get(URL,ca11back);

或

$.get( URL [，data ] l，ca7lback ] [，dataType ] )

  • URL:发送请求的URL字符串。
  • -data:可选的，发送给服务器的字符串或key/value键值对。
  • callback:可选的，请求成功后执行的回调函数。
  •  data:可选的，发送给服务器的字符串或key/value键值对。
  • callback:可选的，请求成功后执行的回调函数。
  • dataType:可选的，从服务器返回的数据类型。默认︰智能猜测（可以是xml, json, script,或 html)。

$(""#btn1").c1ick(function(){

        $.get("demo01.txt" , function(data,status){

        alert("返回内容:"+ data + "n状态:”+ status) ;

     });

})

  •  $.get()的第一个参数是我们希望请求的URL ("demo.txt") 
  • 第二个参数是回调函数。第一个回调参数存有被请求页面的内容，第二个回调参数存有请求的状态。 
    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery-3.6.0.min.js"></script>
</head>

<body>
    点击按钮，显示对应的内容
    <hr>
    <input type="button" value="显示" id="btn">
    <div id="div1"></div>
</body>
<script>

    $.get("data/student.json", function(data) {
        // console.log(typeof data)
        var table = "<table border='1' bordercolor='red'><tr><th>学号</th><th>姓名</th><th>年龄</th></tr>";
        for (var i = 0; i < data.length; i++) {
            console.log(data[i])
            var stuid = data[i].stuID
            var stuname = data[i].stuName
            var stuage = data[i].stuAge
            table += "<tr><td>" + stuid + "</td><td>" + stuname + "</td><td>" + stuage + "</td></tr>"
        }
        table += "</table>"
        $("#div1").html(table)
    })
</script>

</html>

    student.json文件：

[{
    "stuID": "1001",
    "stuName": "张三",
    "stuAge": 20
}, {
    "stuID": "1002",
    "stuName": "李四",
    "stuAge": 19
}, {
    "stuID": "1003",
    "stuName": "李梅",
    "stuAge": 21
}, {
    "stuID": "1004",
    "stuName": "Rose",
    "stuAge": 19
}, {
    "stuID": "1005",
    "stuName": "Tom",
    "stuAge": 20
}]

猜你喜欢

转载自blog.csdn.net/m0_68618659/article/details/126350876
今日推荐
开源日报 | Chrome内置Gemini的意义不在于Gemini；中国AI追随之路的五大误区；ECharts创始人“下海”养鱼；谷歌I/O开发者大会什么都有，只是没有惊喜
微软回应中国区AI团队“打包赴美”传闻
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
《2024 年一季度互联网投融资运行情况》研究报告
报告：Django 仍然是 74% 开发者的首选
周排行
laravle中orm简单的增删改查
文本分类 特征选取之CHI开方检验
Spark核心编程-WordCount
大数据开发实战系列之电信客服(1)
读书笔记 - 把时间当作朋友 by 李笑来
python 笔记--if else
SpringBoot/Mybatis/Druid, 多数据源MultiDataSource配置思路
排序三个整数
redis集群搭建【2】-Windows中Redis集群搭建
STM32F030驱动TM1650点亮4联数码管
每日归档
更多
2024-05-16(6)
2024-05-15(24)
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022