原生 AJAX-EW帮帮网

原生 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 响应报文

主要包含四个部分：

行
1. 协议版本：HTTP/1.1
2. 响应状态码：200、300、404、。。。
3. 响应状态字符串
头
- 格式：名字: 值
  
  如：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：表示服务器数据已经完全接收，或者本次接收已经失败了。

原生 AJAX

原生 AJAX

1. 认识 Ajax

1.1 Ajax 简介

1.2 XML 简介

2. AJAX 特点

2.1 优点

2.2 缺点

3. HTTP

3.1 请求报文

3.2 响应报文

4. AJAX 使用

4.1 核心对象

4.2 使用步骤

4.3 解决 IE 缓存问题

4.4 AJAX 请求状态

网站公告

今日签到

热门文章

最新发布