Ajax 学习_ajax主要学什么-CSDN博客

本文链接：https://blog.csdn.net/A_A_0_0/article/details/108434965

文章目录

前言
一、Ajax 简述
二、JSON 数据格式
三、jQuery 中的 Ajax
四、跨域访问
总结

前言

本文主要是学习 Ajax 的内容，希望能让大家有所收获

一、Ajax 简述

Ajax 是“Asynchronous JavaScript and XML”的缩写，被译为异步 JavaScript 和 XML。

当使用 Ajax 模型，HTML 页面能够快速地将数据逐步更新显示在用户界面上，不需要重载（刷新）整个页面。这使得 HTML 页面能更快速地对用户的操作进行反馈。

尽管 Ajax 中的“X”代表 XML，但由于 JSON 的许多优势，目前 JSON 的使用比 XML 更加普遍。JSON 和 XML 都被用于在 Ajax 模型中封装数据。

1、Ajax 涉及的技术

Ajax 只是为实现异步交互的手段，不是一种技术，而是多种技术的整合。其中包括以下几种技术：

HTML 页面
CSS
JavaScript 脚本语言
DOM
XML
XMLHttpRequest 对象（实现 Ajax 异步交互的核心）

2、Ajax 的核心对象

实现 Ajax 异步交互的核心就是 XMLHttpRequest 对象，该对象为客户端提供了在客户端和服务器之间传输数据的功能。

XMLHttpRequest 对象提供了一个通过URL来获取数据的简单方式，并且不会使整个页面刷新。这使得网页只更新一部分页面而不会打扰到用户。

通过该对象，可以很容易地得到一个 URL 上的资源数据。尽管名字里有 XML，但 XMLHttpRequest 对象可以得到所有类型的数据资源，并不局限于 XML 格式的数据。

3、创建 XMLHttpRequest 对象

代码如下（示例）：

<script>
	function createXMLHttpRequest() {
    	var httpRequest
        if (window.XMLHttpRequest) {// 适用于Chrome，Firefox，Safari，...
        	httpRequest = new XMLHttpRequest()
        } else if (window.ActiveXObject) {// 适用于IE浏览器
            try {
            	httpRequest = new ActiveXObject("Msxml2.XMLHTTP")// IE 7+
            } catch (e) {
                try {
                	httpRequest = new ActiveXObject("Microsoft.XMLHTTP")// IE 6-
                } catch (e) { }
            }
       	}
    	return httpRequest
	}
</script>

二、JSON 数据格式

JSON 是“JavaScript Object Notation”的缩写，是一种轻量级的数据交换格式。

JSON 独立于任何语言的文本格式。易于程序员阅读和编写，同时也易于计算机解压和生成。

JSON 的中文官网地址：http://www.json.org/json-zh.html

1、JSON 语法规则

JSON 格式的构建比较简单，主要为两种结构：

“名称/值”对的集合（A collection of name/value pairs）
值的有序列表（An ordered list of values）

JSON 格式中作为值的类型允许是字符串（string）、数值（number）、true、false、null、对象（object）或者数组（array）

2、JavaScript 中的 JSON

JSON 是一种语法，用来序列化对象、数组、数值、字符串、布尔值和 null 。它基于 JavaScript 语法，但与之不同：JavaScript 不是 JSON，JSON 也不是 JavaScript

JavaScript 类型	JSON 的不同点
对象和数组	属性名称必须是双引号括起来的字符串；最后一个属性后不能有逗号
数值	禁止出现前导零
字符串	只有有限的一些字符可能被转义

JSON 字符串就是指在 JavaScript 语言中内容格式符号 JSON 格式的字符串类型的数据

var jsonText = '{"name":"小明", "addr":"理想城小区"}'

JSON 对象就是指 JSON 格式在 JavaScript 语言中的具体表现形式为对象或数组

var jsonObject = {
		"name":"小明", 
		"addr":"理想城小区"
}

3、Ajax 中的 JSON

三、jQuery 中的 Ajax

三级联动 jQuery 案例

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>三级联动jQuery</title>
</head>

<body>
    <!-- 三级联动 == 两个二级联动 -->
    <select name="" id="province">
        <option value="">————</option>
    </select>

    <select name="" id="city">
        <option value="">————</option>
    </select>

    <select name="" id="county">
        <option value="">————</option>
    </select>

    <!--jQuery 文件-->
    <script src="../jquery-3.5.1.js"></script>

    <script>
        // 获取
        var $province = $('#province')
        var $city = $('#city')
        var $county = $('#county')
        var json// 定义全局变量

        $.getJSON('server.json', function (data) {
            json = data
            $.each(data, function (index, obj) {
                var provinceName = obj.province// 获取省份
                $province.append(('<option value=“' + provinceName + '">' + provinceName + '</option'))
            })
        })

        // 省份下拉列表
        $province.bind('change', function () {
            // 清空城市下拉列表
            $city.empty()
            $city.append('<option value="">————</option>')

            var provinceElementName = $(this).children('option:selected').text()

            $.each(json, function (index, obj) {
                var provinceName = obj.province
                console.log(obj)
                if (provinceElementName === provinceName) {// 判断省份信息
                    var cities = obj.cities
                    $.each(cities, function (index, obj) {
                        var cityName = obj.city// 获取城市
                        $city.append(('<option value="' + cityName + '">' + cityName + '</option'))
                    })
                }

            })

            // 城市下拉列表
            
        })

    </script>
</body>

</html>

包括的文件：
jquery 文件（可以去官网下载）

server.json

[
    {
        "province": "吉林省",
        "cities": [
            {
                "city": "长春市",
                "counties": [
                    "朝阳区",
                    "经济开发区",
                    "高新区"
                ]
            },
            {
                "city": "吉林市",
                "counties": [
                    "东城区",
                    "经济开发区",
                    "老城区"
                ]
            },
            {
                "city": "自由市",
                "counties": [
                    "二道区",
                    "河东区",
                    "高新区"
                ]
            }
        ]
    },
    {
        "province": "辽宁省",
        "cities": [
            {
                "city": "沈阳市",
                "counties": [
                    "朝阳区",
                    "经济开发区",
                    "高新区"
                ]
            },
            {
                "city": "大连市",
                "counties": [
                    "东城区",
                    "经济开发区",
                    "老城区"
                ]
            },
            {
                "city": "铁岭市",
                "counties": [
                    "二道区",
                    "河东区",
                    "高新区"
                ]
            }
        ]
    },
    {
        "province": "山东省",
        "cities": [
            {
                "city": "青岛市",
                "counties": [
                    "朝阳区",
                    "经济开发区",
                    "高新区"
                ]
            },
            {
                "city": "济南市",
                "counties": [
                    "东城区",
                    "经济开发区",
                    "老城区"
                ]
            },
            {
                "city": "威海市",
                "counties": [
                    "二道区",
                    "河东区",
                    "高新区"
                ]
            }
        ]
    }
]

四、跨域访问

总结

希望对大家有所帮助