Ajax、JSON以及jQuery技术

冷不防 2023-10-05 13:14 22阅读 0赞

## 一、Ajax简介 ##

Ajax不是一种编程语言也不是一个应用程序，而是在浏览器中可以通过JavaScript脚本可以使用的所有技术的集合。  
  Ajax 是一种用于创建快速动态网页的技术，通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。  
传统的网页（不使用 Ajax）如果需要更新内容，必需重载整个网页面。  
Ajax的全称是Asynchronous Javascript AndXML。  
**Ajax = 异步传输 + JavaScript + XML。**  
**Ajax 技术提供了一种新的前后端数据交互方式，不需要刷新页面，而且不阻塞页面执行流程，异步的去请求去获取、交互数据。**  
不同的浏览器有自己实现AJAX的组件。

## 二、Ajax工作原理 ##

Ajax的工作原理相当于在用户和服务器之间加了—个中间层(AJAX引擎),使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器,像—些数据验证和数据处理等都交给Ajax引擎自己来做, 只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。

Ajax（Asynchronous javascript and xml），实现了客户端与服务器进行数据交流过程。使用技术的好处是：不用页面刷新，并且在等待页面传输数据的同时可以进行其他操作。

## 三、Ajax的使用及实现步骤 ##

(1) 创建XMLHttpRequest对象,也就是创建一个异步调用对象.  
(2) 创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.  
(3)设置响应HTTP请求状态变化的函数.  
(4)发送HTTP请求.  
(5)获取异步调用返回的数据.  
(6)使用JavaScript和DOM实现局部刷新.

## 四、JSON简介 ##

JSON，全称是 JavaScript Object Notation，即 JavaScript 对象标记法。这是一种 轻量级 （Light-Weight）、 基于文本的 （Text-Based）、 可读的 （Human-Readable）格式。  
  JSON基于 javascript 语法的子集，即数组和对象表示。由于使用的是 javascript 语法，因此JSON 定义可以包含在javascript 文件中，对其的访问无需通过基于 XML 的语言来额外解析。  
  JSON是一种取代XML的数据结构，和xml相比，它更小巧但描述能力却不差,由于它的小巧所以网络传输数据将减少更多流量从而加快速度，目的是取代繁琐笨重的XML格式。这种格式不仅人很容易进行阅读和编写，同时机器也很容易解析和生成，是当前十分流行的数据格式，尤其是在前端领域。

## JSON对值的类型和格式有严格的规定 ##

复合类型的值只能是数组或对象，不能是函数、正则表达式对象、日期对象。  
简单类型的值只有四种：字符串、数值（必须以十进制表示）、布尔值和null（不能使用NaN, Infinity, -Infinity和undefined）。  
字符串必须使用双引号表示，不能使用单引号。  
对象的键名必须放在双引号里面。  
数组或对象最后一个成员的后面，不能加逗号。  
　　PS: 需要注意的是，空数组和空对象都是合格的JSON值，null本身也是一个合格的JSON值。

## JSON 的语法规则 ##

JSON 的语法规则十分简单，可称得上“优雅完美”，总结起来有：

数组（Array）用方括号(“\[\]”)表示。  
对象（Object）用大括号（”\{\}”）表示。  
名称/值对（name/value）组合成数组和对象。  
名称（name）置于双引号中，值（value）有字符串、数值、布尔值、null、对象和数组。  
并列的数据之间用逗号（“,”）分隔

## 五、jQuery简介 ##

jQuery 是一个简洁而快速的 JavaScript 库，可用于简化事件处理，HTML 文档遍历，Ajax 交互和动画，以便快速开发网站。jQuery 简化了 HTML 的客户端脚本，从而简化了 Web 2.0 应用程序的开发。

## jQuery优点 ##

（1）写少代码,做多事情【write less do more】  
（2）免费，开源且轻量级的js库，容量很小  
注意：项目中，提倡引用min版的js库  
（3）兼容市面上主流浏览器，例如 IE，Firefox，Chrome  
注意：jQuery不是将所有JS全部封装，只是有选择的封装  
（4）能够处理HTML/JSP/XML、CSS、DOM、事件、实现动画效果，也能提供异步AJAX功能  
（5）文档手册很全，很详细  
（6）成熟的插件可供选择  
（7）提倡对主要的html标签提供一个id属性，但不是必须的  
（8）出错后，有一定的提示信息  
（9）不用再在html里面通过

（A）通过ID属性：document.getElementById()  
（B）通过NAME属性：document.getElementsByName()  
（C）通过标签名：document.getElementsByTagName()  
我们发现，JavaScript的方法名太长了，不易于书写代码…

## 封装优化 ##

这些方法名太长了，获取ID属性、NAME属性、标签名属性的控件也用不着三个方法，我们定义下规则就好了

传入的参数是"\#“号开头的字符串，那么就是id属性  
传入的参数是没有”\#"号开头的字符串，也没有前缀修饰的字符串就是标签名属性  
到这里，我们就可以根据传入的参数判断它是获取ID属性的控件还是标签名的控件了。在内部还是调用document.getElementById()这些方法。我们真正在使用的时候直接写上我们自定义规则的字符串就可以获取对应的控件了。  
  
  
  
  
参考资料：  
https://www.cnblogs.com/ybtools/p/6515099.html  
https://blog.csdn.net/qq\_35192741/article/details/79496734