掌握Ajax与jQuery：异步刷新与数据交互核心技术-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45445291/article/details/123548840

Ajax

Ajax即Asynchronous Javascript And XML（异步JavaScript和XML）

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

伪造的Ajax：

通过iframe标签和javascript来实现web页面的部分刷新。给button绑定点击事件，通过点击事件改变iframe的路径，从而在网页不刷新的前提下，刷新iframe。

<!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>伪造Ajax</title>
</head>

<body>
    <div>
        <p>请输入要加载的地址：</p>
        <p>
            <input type="text" id="url" value="https://www.bilibili.com/">
            <input type="button" value="提交" onclick="loadPage()">
        </p>
    </div>
    <div>
        <h3>加载页面的位置</h3>
        <iframe style="width: 100%; height: 500px" id="iframePosition"></iframe>
    </div>

    <script type="text/javascript">
        function loadPage() {
            var targetURL = document.getElementById("url").value;
            document.getElementById("iframePosition").src = targetURL;
        }
    </script>
</body>

</html>

Jquery Ajax

$.ajax()

参数：

type：请求方式

url：请求地址

async：是否异步，默认是true表示异步

data：发送到服务器的数据

dataType：预期服务器返回的数据

contentType：向服务其发送的数据格式

success：请求成功时调用此函数

error：请求失败时调用此函数

<script type="text/javascript">
    $.ajax({
        type: "", //一般是get或者post
        url: "",
        data: {
            // 发送给服务器的数据
        },
        dataType: "json", //预期返回的数据类型，如果是json格式，在接收到返回值时会自动封装成json对象
        contentType: "applicaiton/json", // 发送给服务器的数据类型
        success: function (data) {
            // data是形参，代表返回数据
            // 如果没有规定dataType,在接受到json格式的字符串时可以转换成json对象
            var obj = JSON.parse(data)
        }，
    	error:function () {
		}
	})
</script>

json对象

json对象就是用大括号包含起来的键值对，key一定是字符串，value可以是字符串，数字，对象，数组，布尔值和null。

{
    "key": "value",    
    "key2": 123,
    "key3": {
        "name": "糠猪",
        "QQ": 123456
    },
    "key4": [1, 2, 3, 4],
    "key5": ["a", "b", "c", "d"],
    "key6": [{}, {}, {}, {}],
    "key7": null
}

Ajax应用

Ajax

伪造的Ajax：

Jquery Ajax

json对象