马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。
您需要 登录 才可以下载或查看，没有账号？立即注册
×
原生 AJAX
1. 熟悉 Ajax
1.1 Ajax 简介
AJAX 全称为 Asynchronous JavaScript And XML，就是异步的 JS 和 XML。通过 AJAX 可以在欣赏器中向服务器发送异步哀求，最大的上风：无革新获取数据。AJAX 不是新的编程语言，而是一种将现有的标准组合在一起利用的新方式。
1.2 XML 简介
XML 可扩展标志语言。
XML 被计划用来传输和存储数据。
XML 和 HTML 雷同，差别的是 HTML 中都是预界说标签，而 XML 中没有预界说标签，全都是自界说标签，用来表现一些数据。
XML 和 HTML 的区别：
- 用途
- XML：紧张用作数据存储和数据交换的格式。通常用于各类应用步伐之间的数据通报。比方，网络服务（Web Services）中，SOAP（简单对象访问协议）利用 XML 格式来封装消息内容。
- HTML：紧张用于展示数据和内容。HTML 文档界说了网页的布局，它和欣赏器一起使得用户可以在互联网上欣赏各种信息和资源。
- 布局和特性
- XML：
- 自界说标签：XML 允许用户自界说标签，这是它最大的特性之一。通过自界说标签，数据可以更加正确地形貌和构造。
- 严酷的语法要求：每一个开始标签都必须有一个闭合标签，标签必须准确嵌套，同时全部属性必须用引号括起来。
- 数据中央：XML 会集在形貌和传输数据，而不是表现数据的外貌。
- HTML：
- 预界说标签：HTML 提供了许多预界说标签，用于构建和格式化网页内容。不允许用户自界说标签。
- 宽松的语法要求：固然 HTML5 夸大标签的闭合，但欣赏器会容错，对一些语法错误举行修正。
- 展示中央：HTML 的紧张目标是展示数据，界说网页的内容和布局，包罗文本、图片、视频等。
- 数据验证
- XML：XML 支持数据验证。可以利用 DTD（文档范例界说）大概 XML Schema 来界说和验证 XML 数据的布局和内容，使得数据更加准确和可靠。
- HTML：HTML 没有原生的数据验证功能，它更多关注于欣赏器怎样表明和表现页面。对于用户提交的数据，可以通过表单验证和 JavaScript 来举行验证和处理惩罚。
- 可扩展性和标准化
- XML：XML 是完全可扩展的。由于没有预界说的标签，用户可以根据必要创建恰当本身应用的标签集。这使得 XML 非常机动，可以顺应差别的应用和需求。
- HTML：HTML 是没有可扩展性的，它的标签集是由 W3C（万维网同盟）规定的标准。不允许用户随意添加新的标签，但它提供了一些扩展机制，比方利用自界说数据属性（data-* 属性）。
- 处理惩罚工具
- XML：加工和处理惩罚 XML 数据的工具和接口非常多，包罗 SAX（Simple API for XML）、DOM（Document Object Model）、XPath 和 XSLT 等。它们为读取、操纵和转换 XML 数据提供了丰富的支持。
- HTML：HTML 的处理惩罚紧张依靠于欣赏器和各种网页开辟技能，好比 JavaScript、CSS、DOM 操纵等，以实现动态和交互式网页内容。
- 好比说我有一个弟子数据：name = "孙悟空"; age = 18; gender = "男";
- 用 XML 表现：
- <student>
- <name>孙悟空</name>
- <age>18</age>
- <gender>男</gender>
- </student>
- 如今已经被 JSON 取代了。
- {"name":"孙悟空","age":18,"gender":"男"}
2. AJAX 特点
2.1 优点
- 可以无需革新页面而与服务器端举行通讯（发明 AJAX 的初志）；
- 允许你根据用户变乱来更新部分页面内容。
2.2 缺点
- 没有欣赏汗青，不能回退；
- 存在跨域标题（同源战略）；
- SEO 不友爱（SEO：搜刮引擎优化）。
3. HTTP
HTTP（hypertext transport protocol）协议（超文本传输协议），协议详细规定了欣赏器和万维网服务器之间相互通讯的规则。
欣赏器向服务器发送哀求，服务器向欣赏器回馈为相应，发送内容称哀求报文，反馈结果称为相应报文。
3.1 哀求报文
（重点留意格式与参数）
紧张包罗四个部分：
- 行
- 哀求范例：GET / POST
- URL 路径
- 协议版本：HTTP/1.1
- 头
- 格式：名字: 值
如：Host: name=**、Cookie: application/x-www-form-urlencoded
- 空行：必须有
- 体
- GET 哀求，哀求体为空
- POST 哀求，哀求体可以不为空
如：username=admin&pasword=123456
3.2 相应报文
紧张包罗四个部分：
- 行
- 协议版本：HTTP/1.1
- 相应状态码：200、300、404、。。。
- 相应状态字符串
- 头
- 格式：名字: 值
如：Host: name=**、Cookie: application/x-www-form-urlencoded
- 空行：必须有
- 体
- <html>
- <head>
- ...
- </head>
- <body>
- ...
- </body>
- </html>
4. AJAX 利用
4.1 焦点对象
XMLHttpRequest，AJAX 的全部操纵都是通过该对象举行的。
4.2 利用步调
- 创建 XMLHttpRequest 对象
- var xhr = new XMLHttpRequest();
- 设置哀求信息
- xhr.open(method, url);
- // 可以设置请求头，一般不设置
- xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
- 发送哀求
- xhr.send(body) // get 请求不传 body 参数，只有 post 请求使用
- 吸取相应
- //xhr.responseXML 接收 xml 格式的响应数据
- //xhr.responseText 接收文本格式的响应数据
- xhr.onreadystatechange = function (){
- if(xhr.readyState == 4 && xhr.status == 200){
- var text = xhr.responseText;
- console.log(text);
- }
- }
保举插件：nodemon，方便对 node 启动的服务历程举行自动重启
- 安装 nodemon：npm i -g nodemon
- 启动 node 服务：nodemon 服务器
4.3 办理 IE 缓存标题
标题：在一些欣赏器中（如 IE），由于缓存机制的存在，ajax 只会发送的第一次哀求，剩余多次哀求不会在发送给欣赏器而是直接加载缓存中的数据。
办理方式：欣赏器的缓存是根据 url 地点来记载的，以是我们只必要修改 url 地点即可克制缓存标题：xhr.open("get","/testAJAX?t="+Date.now());
4.4 AJAX 哀求状态
xhr.readyState 可以用来查察哀求当前的状态
- 0：表现 XMLHttpRequest 实例已经天生，但是 open() 方法还没有被调用。
- 1：表现 send() 方法还没有被调用，仍旧可以利用 setRequestHeader()，设定 HTTP 哀求的头信息。
- 2：表现 send() 方法已经实验，而且头信息和状态码已经收到。
- 3：表现正在吸取服务器传来的 body 部分的数据。
- 4：表现服务器数据已经完全吸取，大概本次吸取已经失败了。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。 |
发表于 2025-10-1 20:37:51
