yujiabao702的博客

CORS是跨域资源共享，是官方的跨域解决方案，特点是不需要再客户端做任何操作，完全在服务器中进行，支持 get 和 post 请求。跨域资源共享标准新增了一组HTTP首部字段，允许服务器声明哪些源站通过浏览器有权限访问哪些资源。通过设置一个响应头告诉浏览器，该请求允许跨域，浏览器收到响应以后就会对响应放行。拓展：除了上面响应头以外，还有别的响应头需要了解。CORS怎么工作的？此时点击以后就会报错。此时就可以跨域请求了。

此时会发现写的时候url后面拼接的callback是个问号 ，但是发送的时候是有值的。服务端是可以把这个参数接收到的，接收到以后会把这个值作为调用的函数名。此后就是调用这个方法，把值放在 result 盒子里。此时点击按钮，会发现值已经放上去了作为会点函数名。

需求：实现检查用户名是否可用的功能，输入用户名，失去焦点的时候发送请求，检查用户名是否可用，这里就直接返回已存在，因为没有数据库。此时就完美实现跨域问题。

创建一个 index.html 页面，但是不要 alt+b 打开，而是通过发送 ajax 请求的方式去获取这个页面，此时这个页面就是 http 协议的，如果 alt+b 打开那就是 file 协议的，在这个页面还有一个按钮获取数据，调取的接口也是 9000 这个端口的服务器，此时 协议（http）相同，域名（127.0.0.1）相同，端口号（9000）相同，这就不会产生跨域问题。点击按钮，因为协议，域名，端口号都是一样的，满足同源策略，所以不会出问题。看到是可以成功发送请求的，但是有报错。

post() 有四个参数，第一个是 url，第二个是发送的参数（是一个对象），第三个参数是一个回调函数，回调函数有个参数是响应体，第四个参数是响应体类型，一般设置为 json。get() 有四个参数，第一个是 url，第二个是发送的参数（是一个对象），第三个参数是一个回调函数，回调函数有个参数是响应体，第四个参数是响应体类型，一般设置为 json。通过 $.get() 方式发送 Ajax 的 get 请求。type 请求的类型，比如 'get'data 发送的参数，是一个对象。3.通用型ajax请求。

在发送一个请求之前，可以先看看之前有没有发送相同请求，如果说有，就可以把前面发送的请求取消掉，只发送最新的请求。如果用户多次发起同一个请求，这个时候服务器压力就会很大，这个问题需要解决。发送请求的时候，判断标识变量，如果正在发送，就取消上一个请求。发送请求获取全部数据以后就改变标识变量为 false。设置标识变量，判断前面是否发送相同请求。发送请求的时候，标识变量为 true。

此时点击按钮发送请求等待 3s 返回结果的过程中，我们点击取消按钮就可以取消这个请求。在请求的过程当中，结果还没有回来之前，我们可以通过代码手动取消请求。为了实现手动取消的效果，服务器端还是 3s 以后才会返回数据。通过 xhr 对象的 abort() 方法就可以手动取消请求。

设置请求超时就取消请求，在发送 Ajax 请求的步骤里设置，通过 xhr 对象的 timeout 属性。还可以设置请求超时的回调，通过 xhr 对象的 ontimeout 属性设置。为了呈现请求超时的效果，我们在路由规则里设置 3s 以后服务器才返回结果。可以通过 xhr 对象的 onerror 属性去设置网络异常的回调函数。为了实现网络异常效果，通过后台控制器去设置。请求时间过长的时候需要进行处理。

IE浏览器会对Ajax请求结果去做一个缓存，这样就会导致一个问题，下次再去发送请求的时候，就会去走本地的缓存，而不是服务器返回的最新的数据，这样一来对时效性比较强的需求就会有影响。在 url 接口上拼接一个参数，Date.now()是当前的时间戳，每次点击的时间戳都不一样，所以浏览器就会认为这是两次不同的请求，就可以避免IE缓存问题。什么是IE缓存问题？

修改本地服务器文件的时候，每次修改代码都要重新启动就很麻烦，安装 nodemon 包，就可以不用手动重启，保存代码就会自动重启。重新启动服务器，此时就不用 node 命令启动了，用 nodemon 命令启动。

在实际应用中，我们向服务端发送请求，服务端返回的大都是 JSON 格式的数据。接着去处理这个数据，有两种方式，一种是手动转化，还有一种是自动转化。手动转化是通过 JSON.parse 去转化 JSON格式的数据。先去处理 express 文件，返回 JSON 格式的数据。自动转化是借助xhr对象上的responseType属性。所以我们要知道这个结果我们怎么处理。

但是会报错，是因为这个name是我们自定义的请求头，不是预定义的，像Content-Type就是预定义的 ，如果需要实现自定义的响应头，那么需要加一个特殊的响应头。这样还不能实现，是因为我们发送的时候还会给服务器发送一个 option 类型的请求，也就是预检请求，校验这个头信息可用不可用。这个OPTON请求因为在服务器中得不到对应的结果，所以就会报错，此时我们把服务器文件中的post路由规则改为all就行了。在 open 步骤以后就可以使用这个方法去设置请求头。不设置这个请求头的话，是下面这样的。

将发送Ajax请求的 open 步骤中，将类型改为 POST即可。在本地服务器 js 文件中添加 POST 规则。

在 open 步骤的时候，传 url 时后面通过？拼接参数，多个参数之间用 & 隔开。

案例：点击按钮，在下面的方框展示请求内容。发送Ajax请求的步骤。

此时本地服务器就搭建好了，我们在浏览器去访问可以得到回应。npm i express 安装 express 框架。npm init 初始化包管理工具。

HTTP（hypertext transport protocol）协议，又叫超文本传输协议，协议详细规定了浏览器和万维网服务器之间相互通信的规则。协议就是一种约定，一种规则。主要约定了两块内容，一块是请求（浏览器给服务器发的内容），一块是响应（服务器给浏览器返回的结果）。浏览器给服务器发送的内容叫做请求报文，服务器给浏览器返回的结果叫做响应报文。

Ajax全称为 Asynchronous JavaScript And XML,就是异步的JS和XML。通过Ajax技术可以在浏览器中向服务器发送异步请求，最大的优势: 无刷新获取数据。Ajax不是新的编程语言，而是一种将现有的的标准组合在一起使用的新方式。XML 全称 Extensible Markup Language。XML 可拓展标记语言。XML 被设计用来传输和存储数据。