一、ajax简介

Ajax不是某种编程语言
是一种在无需重新加载整个网页的情况下,能够局部更新网页的技术

  • ajax 从服务器上获取数据的一种技术 

    1.  1.创建ajax核心对象<br />       2.与服务器建立连接<br />       3.发送请求<br />       4.响应<br />JSON.parse()  json格式的字符串转换为Json对象<br />JSON.stringify()将javascript的值,转换为JSON字符串。

  • responseText:获取字符串形式的响应数据

  • status:以数字形式返回http的状态码
  • readystate值代表服务器响应的变化

三、ajax - 图1
三、ajax - 图2

1-1、GET和post的区别

1.从可见性 get方式传递的参数，是跟着url地址后面 post传递的参数是不可见
2.安全性 post安全性更高
3.传递数据量大小 get有限制，post无限制

2.$.get()

//$.get()语法
$.get(url,function(data,status){
//获取的data是一个JS对象
}).fail(function(data){
    console.log(data.status)
})

3.$.post()

//$.post()语法
$.post(url,data,function(data,status){
}).fail(function(data){
    console.log(data.status)
})

<p id="name"></p>
    <p id="age"></p>
    <script>
        var url = "https://easy-mock.com/mock/5d674369a87a3f5f080bbb37/ajax/base";
        var xhr = new XMLHttpRequest();
        xhr.open('get',url,true)
        xhr.send()
        xhr.onreadystatechange = function(){
            //console.log(xhr.readyState)
            //console.log(xhr.status)
            if(xhr.readyState == 4 && xhr.status == 200){
                var res = JSON.parse(xhr.responseText)
                console.log(res.data.name)
                var name = document.getElementById("name")
                name.innerHTML = res.data.name
            }
        }
        /* 
        1.异步，同步 网络请求到底是用同步还是异步
        2.ajax使用场景
        3.如何使用ajax  */
    </script>

二、同步和异步

  • 同步 就是客户端向服务器发送请求的过程中，用户不可以进行其他操作
  • 异步 就是客户端向服务器发送请求的过程中，用户可以进行其他操作 
    console.log("1")
      setTimeout(function(){
          console.log("http")
      },1000)
console.log("2")

    三、jquery-ajax

    3-1、jQuery-ajax的传参

    url 请求的地址
    type 请求的方式
    datatype 数据的类型
    data
    success 数据连接成功
    error 连接失败
    beforSend
 <script src="lib/jquery-3.4.1.js"></script>
    <style>
        body {
            background: red;
        }
        #loading{
            position: fixed;
            left:0;
            top:0;
            right:0;
            bottom: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            background: #FFF1CE;
        }
    </style>
</head>

<body>
    <div id="loading">
        <img src="images/loading.gif" alt="">
    </div>
    加载成功
    <script>
        var url = "https://www.easy-mock.com/mock/5d67436424fd60626abfe912/ajax/base"
        /* 
        ajax  
        1.请求的地址
        2.请求的方式 get,post
         */
        $.ajax({
            url: url,
            type: "get",
            dataType: "json",
            success: function (res) {
                console.log(res)
                $("#loading").hide()
            },
            fail: function (err) {
                console.log(err)
            },
            beforeSend: function () {
               $("#loading").show()
            }
        })
    </script>

四、jquery-for

<script>
        var data = {name:"cheng",age:18,sex:"男"}
        for(var key in data){
            var p = document.createElement("p");
            p.innerHTML = data[key];
            document.body.append(p)
        }
    </script>