jQuery Ajax 概述

2023-10-04 15:15:52

jQuery Ajax 概述

1. jQuery Ajax 概述
2. JSON 数据格式
3. jQuery Ajax 应用

1. jQuery Ajax 概述

Ajax 是一种在 Web 应用程序中向服务器发送异步请求并接收异步响应的技术，实现的主要过程是：
浏览器中的 JS 发送请求；
服务器把响应信息发送给 JS；
JS 通过 DOM 操作浏览器的局部；
jQuery Ajax 是指在 jQuery 环境下使用 Ajax 技术，在不重载全部页面的情况下，实现对网页内容的局部更新；
注意： Ajax 技术的原生用法繁琐，使用 jQuery Ajax 的相关方法实现页面的局部更新较为简便；

2. JSON 数据格式

JSON(JavaScript object notation) 是 JavaScript 原生格式，是一种完全独立于语言的文本格式，意味着在 JavaScript 中处理 JSON 数据不需要任何特殊的 API 或工具包；
JSON 数据易于读写、解析和生成，实现可跨平台、快速的数据传输，是一种理想的数据交换语言，是 jQuery Ajax 方法常用的数据格式；

2.1 JSON 对象与 JSON 字符串

JSON 对象是一个无序的 “键名：键值” 对集合；一个对象以 “{”开始，以“}” 结合素，“键名：键值”对之间用逗号 “，” 分隔，

其中，JSON 键值可以是数字、字符串、逻辑值、数据、JSON 对象和 null；
注意：

JSON 对象的键名必须加一对双引号；
JSON 对象可嵌套；
JSON 是从属于 JS 的一种数据格式，在处理 JSON 数据时，可直接使用 JS 内置的 API；

一段定义 JSON 对象的示例代码如下：

<script>
    var obj={
        "name":"xx";
        "age":10;
        "school":{
            "name":"bb";
            "location":"aa";        
        }    
    }
</script>

JSON 只是一种数据格式，一个定义 JSON 字符串的示例代码如下所示：

<script>
    var jsonStr='{"width":100,"height":200,"name":"rose"}';
    document.writeln(typeof jsonStr);    //输出 string
    //稍复杂一点的 JSON 格式的字符串
var arrayStr='['+'{"width":100,"height":200,"name":"rose1"},'+'{"width":120,"height":220,"name":"rose2"},'+'{"width":130,"height":230,"name":"rose3"},'
+']';
</script>

2.2 JSON 数组

JSON 数组是由JSON 对象构成的数据用 [{},{},…,{}] 表示；
没对花括号 {} 表示一个 JSON 对象，并作为数组元素；
通过 JS 创建一个 JSON 数组代码如下所示：

<script>
    var employees=[{"firstName":"Bill","lastName":"Gates"},
        {"firstName":"George","lastName":"Bush"},
        {"firstName":"Thomas","lastName":Carter}];
    document.writeln(employees[1].lastName);    //输出Bush
</script>

2.3 JSON 对象、JSON 数组与 JSON字符串之间的转换

在 JS 例，JSON 字符串是指 JSON 对象外使用了一对单引号；
反映了 JSON 对象、JSON 数组与 JSON 字符三者关系的一个示例代码如下所示：

<script>
    //使用花括号保存 JS 对象
    var obj1={};
    var obj2={width:100,height:200};
    var obj3={'width':100,'height':200};
    //JSON 格式的 JS 对象
    var obj4={"width":100,"height":200,"name":"rose"};
    //JSON 格式的字符串
    var str1='{"width":100,"height":200,"name":"rose"}';
    var str2='['+'{"width":100,"height":200,"name":"rose"},'+'{"width":100,"height":200,"name":"rose"},'+'{"width":100,"height":200,"name":"rose"},'
+']';
    //JSON 格式的数字，花括号保存数组
    var a=[{"width":100,"height":200,"name":"rose"},{"width":100,"height":200,"name":"rose",{"width":100,"height":200,"name":"rose"}];
</script>

3. jQuery Ajax 应用

$.ajax() 方法用于执行 AJAX（异步 HTTP）请求，参数及其含于如下所示：

url：规定要发送的 URL；
data：要发送到服务器的数据；
data Type：预期的服务器响应的数据类型；
async：异步或同步请求，取值 TRUE 或 FALSE，默认是 TRUE；
success()：当请求成功时运行的函数

码农公寓