AJAX学习笔记——原生AJAX（一）

---

一、什么是AJAX

AJAX 全称为 Asynchronous JavaScript And XML，就是异步的 JS 和 XML。
AJAX 不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式。
AJAX 可以在浏览器不刷新的情况下向服务器发送异步请求。
举个栗子，在百度浏览器的搜索框输入“ajax”时下方会显示含有“ajax”关键词的一些提醒，这个效果便是使用了AJAX。同样使用了AJAX的还有注册时的用户名重复的提醒等等。

二、XML与JSON

XML 是可扩展标记语言，被设计用来传输和存储数据。
XML 和 HTML 类似，不同的是 HTML 中都是预定义标签，而 XML 中没有预定义标签，全都是自定义标签，用来表示一些数据。
比如说我有一个学生数据：

name = "孙悟空" ; 
age = 18 ; 
gender = "男" ; 

用 XML 表示（“< >”中的内容可自定义）：

<student>
	<name>孙悟空</name> 
 	<age>18</age>
  	<gender>男</gender>
</student>

最开始，AJAX在使用数据交互时所使用的格式就是XML。
当服务端给客户端（浏览器）返回结果时，返回的就是XML格式的字符串，前端JS在接收到这个结果之后对这个数据内容进行解析，把数据提取出来然后对数据做一个处理。
不过现在已经被JSON取代了，用 JSON 表示上述的学生数据：

{"name":"孙悟空","age":18,"gender":"男"}

它可以直接借助于JSON的一些API的方法快速将字符串转成JS对象，灵活度是远胜于XML的。

三、AJAX优缺点

• 优点：
  1、可以无需刷新页面而与服务器端进行通信；
  2、允许你根据用户事件（鼠标、键盘、表单事件等）来更新部分页面内容。

• 缺点：
  1、没有浏览历史，不能回退；
  2、存在跨域（在a服务端不能向b服务端发送请求）问题(同源)；
  3、SEO 不友好（搜索引擎优化）。
  比如说，京东的页面是通过AJAX向服务端发送请求，服务端收到请求后返回结果并通过JS动态创建到页面当中，所以爬虫会爬不到这个数据（对爬虫不友好），同时访问页面的源代码利用搜索引擎搜索商品的关键字也是搜索不到的。
  此处在我咨询爬虫大佬后得知，可以利用爬虫发送ajax请求包（通过抓包获取）从而获取到商品数据，只不过确实会麻烦一点。

四、前期准备

1、Node.js的安装（作为AJAX的服务端）

2、安装Express服务端框架

在终端输入npm init --yes进行初始化（注意路径不能出现中文）。

输入npm install express安装express，这里有条提示是喊我更新npm，按照提示输入进行更新，然后再安装一次就可以了。

3、Express的基本使用

• 创建express基本使用.js文件

//1.引入express
const express = require('express');

//2.创建应用对象
const app = express();

//3.创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装
app.get('/',(request,response)=>{
    //设置响应
    response.send('HELLO EXPRESS');

});

//4.监听端口启动服务
app.listen(8080,()=>{
    console.log("服务已经启动，8080 端口监听中...");
})

• 使用node命令执行脚本
  
• 在浏览器中输出127.0.0.1:8080路径
  
  到此为止，我们已经把这个http服务启动起来了，然后我们就可以借助这个服务跟前端的ajax做一个交互。