AJAX

认识AJAX

AJAX：

全称为Asynchronous Javascript and XML 就是异步的js和xml
允许浏览器与服务器进行通讯而无需刷新当前页面的技术都被叫做AJAX
浏览器与服务器交互且不用刷新整个页面的方法

XMLHttpRequest:

该对象是对JavaScript的一个扩展，可 使网页与服务器进行通信。是创建Ajax应用的最佳选择。
实际上通常把Ajax当成XMLHttpRequest对象的代名词

AJAX的优点

1. 可以无需刷新页面而与服务器端进行通信

2. 允许通过事件来更新页面内容

AJAX的缺点

没有浏览历史，不能回退

搭建AJAX库

1.创建AJAX

new XMLHttpRequest();

2.连接到服务器

AJAX.open(方法，要读的文件，true（代表异步）)

3.发送请求（告诉服务器需要什么）

AJAX.send()

4.接受返回值

onreadystatechange
readystate：//浏览器和服务器进行到哪一步了
readystate=4代表交互已完成
0代表该没有调用open方法
1代表已调用send，正在发送请求
2代表send（）方法完成已收到全部响应内容
3代表正在解析响应内容
4代表响应内容解析完成，可以在客户端使用了
status：//HTTP状态码
200代表成功
responseText请求的文本内容

---

另外就是前后端交互的跨域问题了，这个问题可以通过很多种方式来解决

---

首先说什么是跨域：

跨域:

浏览器从一个域名的网页去请求另一个域名的资源时，域名、端口、协议任一不同，都是跨域

为什么会有跨域:

在前后端分离的模式下，前后端的域名是不一致的，此时就会发生跨域访问问题。在请求的过程中我们要想回去数据一般都是post/get请求，所以…跨域问题出现
跨域问题来源于JavaScript的同源策略，即只有 协议+主机名+端口号(如存在)相同，则允许相互访问。也就是说JavaScript只能访问和操作自己域下的资源，不能访问和操作其他域下的资源。跨域问题是针对JS和ajax的，html本身没有跨域问题，比如a标签、script标签、甚至form标签（可以直接跨域发送数据并接收数据）等

同源策略的定义：

同源策略(Same-Origin Policy)最早由NETscape公司提出，是一种浏览器的安全策略。
同源：协议，域名，端口号必须完全相同
违背同源策略就是跨域

跨域的解决方案：

后端设置响应头：

以node.js为例

app.all('/json-server',(request,response)=>{
    //设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
    
    const data={
        name: 'wxy'
    };
    let str= JSON.stringify(data);
    //设置响应
    response.send(str);
    

}); 

app.all('/jquery-server',(request,response)=>{
    //设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
    const data={name:'wxy',}
    //设置响应
    // response.send('HELLO JQuery AJAX');
    response.send(JSON.stringify(data));

}); 


app.all('/axios-server',(request,response)=>{
    //设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
    const data={name:'wxy',}
    //设置响应
    // response.send('HELLO JQuery AJAX');
    response.send(JSON.stringify(data));

}); 

通过JSONP：

JSONP(JSON with Padding),是一个非官方的跨域解决方案，纯粹凭借程序员的聪明才智开发出来的，只支持get请求
JSONP怎么工作的?
在网页有一些标签天生具有跨域能力，比如: img link iframe script。
JSONP就是利用script标签的跨域能力来发送请求的。

也就是说通过js文件来绕过同源策略