AJAX【随手记】

AJAX可以在不加载整个页面的情况下与服务器交换数据并更新部分网页内容，即异步更新（无刷新获取数据）。例如百度搜索词条下面会出现其他相关的词条或者在浏览 网页时快滚到底部时页面显示更多内容就是用AJAX实现。

AJAX是异步的js和xml（xml的作用是传输和存储数据）（异步是指客户端不需要等待服务器响应，在服务器处理请求时客户端可以进行其他操作）。

XML

是可拓展标记语言，用来传输和存储数据。和html不同的是没有预定义标签，全都是自定义标签，用来表示数据。例如要显示名字就直接定义标签为<name>。

简单来说html用来呈现数据，而XML用来存储和传输数据。

现在xml已经被JSON替代，JSON表示更加简洁化，可以快速将字符串转化为js对象。如：{“name”：“我”；“age”：“17”；“职业”：“学生”}

优缺点

优点：可以无需刷新页面与服务器进行通信；允许根据用户事件来更新部分页面内容。

缺点：没有浏览历史，不能回退；存在跨域问题（即在该服务向另一个服务发送请求，AJAX默认不允许，可解决）；SEO（搜索引擎优化）不友好。

利用控制台检查报文

f12 ->network(网络) -> 刷新页面点击第一条 ->查看通信报文

express框架的基本使用

首先在终端中下载express框架

1、npm init --yes ==> 初始化   2、npm i express ==>安装express框架

3、使用框架

//1、映入express
const { response } = require('express');
const express = require('express');

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

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

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

4、启动服务：同样终端打开，输入node express的基本使用.js（后面是我的文件名），启动后就会显示“服务已经启动，8000端口监听中....”，接下来打开浏览器输入127.0.0.1:8000，打开后就可以看到“HELLO EXPRESS”。最后就可以打开网络端口查看交互。

AJAX的基本使用

创建XMLHttpRequest对象

该对象用于和服务器交换数据

语法：variable=new XMLHttpRequest()；

若浏览器不支持则创建variable=new ActiveXObject("Microsoft.XMLHTTP");

向服务器发送请求

使用XMLHttpRequest对象的open()和send()方法。

open（）方法的url参数是服务器上文件的地址，该文件可以是任何类型的文件也可以是服务器脚本文件。

XMLHttpRequest对象如果要用于AJAX的话，open中的async参数必须为true。

当使用async=true时，要规定在响应处于onreadystatechange事件中的就绪状态时执行的函数，示例：

当使用ansync=false，只需要改参数并且将代码放到send（）语句后面即可（不推荐使用false），示例：

如果需要像HTML表单那样POST数据，要使用setRequestHeader()来添加HTTP的头，示例：

 服务器响应

 如果来自服务器的响应并非XML，使用respondeText属性，反之如果响应是XML属性并且需要作为XML对象进行解析则使用responseXML属性。

respinseText:

responseXML: 

onreadystatechange事件 

每当 readystate（存有XMLHttpRequest的状态信息)改变时，就会触发onreadystatechange事件

 注意：onreadystatechange事件被触发4次（0-4），分别为0-1，1-2，2-3，3-4对应着readystate的每个变化。

回调函数