AJAX

1、express框架

基于Node.js的web开发框架

ajax需要对服务端发请求，我们需要一个服务端，所以假定服务端为ajax。

文件为.js

页面：

注意：必须在原生ajax文件夹上右键终端打开，不可在其他地方右键。

2、ajax案例准备（1、前端页面    2、服务端）

   需求：点击按钮，把服务端返回的响应体结果呈现出来，页面不刷新

   下图意思为 当客户端浏览器对服务器发送请求，如果url的路径为/server，则这个时候会执行这个回调函数里面的内容，并且由response做出响应

  

 右键后报错：原因端口占用

 cmd：表示普通窗口

 node: 表示服务还在启动

 则按ctrl C则释放 先CTRL 后C

node已变powershell

 

 

 

 

疑问：为什么result设置为id选择器时，本例不同。必须为class选择器

11、AJAX设置请求参数：

get请求在url中设置的 ?a=100$b=200$c=300

12、AJAX发送POST请求

注意：js代码改完后必须重新启动终端

 13、post请求设置参数

在post.html中设置xhr.send('a=100&b=200')

则a=100 b=200已经传递给服务器了

14、AJAX设置请求头信息

POST请求体不可以

设置请求头：

 15、

服务端返回的结果绝大多都是json格式数据

本节：手动自动接收json文件传递过来的字符串

server.js:

 

 定义了数组data，由于response.send只能发送字符串，所以中间做了处理，变成了字符串传递了过来

Json.html

 页面接收 手动转化 又把字符串变成了数组

 自动转化 

16、nodemon安装

nodemon server.js

server.js是服务端脚本

17、IE缓存

IE浏览器会对ajax请求结果做一个缓存，下一次再去发送请求时，这个时候走的是本地的缓存，而不是服务器返回的最新数据，此时对于时效性比较强的数据，

则在ie.html的网页后加上？t='+Date.now()

 

onreadystatechange取值有0、1、2、3、4，当为4时，此时结果全部返回

18、请求超时与网络异常处理

如果给服务端发出请求后 2s（假设)还没有返回结果，那我们就对用户来个提醒。“网络超时，请稍后重置”

在.js中设置超时

 在.html文件中设置超时提醒

19、取消请求

在结果还未回来时，可以手动取消请求

 20、

用户疯狂点击请求，服务器接收到很多，

需求：点击一个请求，先看一看之前有无相同请求，如果有，那我们取消之前的相同请求

用户点击按钮的瞬间是触发了整个函数，而不是只触发了x.send()这个。

设置了一个状态变量：issending

 21、JQuery发送AJAX请求

GET、POST、通用方法

GET请求传递的参数在url的后边，而POST在Network-中

json格式是一个对象，

GET、POST、

通用方法：

数据返回和处理用回调函数

 erroy包括超时等·都可以处理

POST请求还可以设置请求体。

23、Axios发送AJAX请求

GET、POST、通用方法

GET请求对请求体不设置

axios和JQuery参数很多，具体看官网使用教程

数据返回和处理基于promise

 POST请求url和请求体可以同时设置

POST顺序：url、请求头参数、请求体

24、

 AXIOS函数发送AJAX请求

 对返回信息进行处理

 25、使用fetch函数发送AJAX

 26、同源策略、跨域

同源：必须协议、域名、端口号必须完全相同

不可端口3000向端口8000发送请求，否则就是跨域。

AJAX默认遵循同源策略