[JavaScript知识库]原生ajax

原生ajax??Async?Javascript?And?XML

在网页不刷新的情况下可以请求数据然后实现网页局部刷新或者渲染

如何创建一个原生的ajax：

1.创建一个XMLHttpRequest的实例?为xhr

????readyState:?0?请求未初始化?刚刚实例化xmlHttpRequest

????readyState:?1?客户端与服务器建立链接?调用了open方法

????readyState:?2?请求已经被接受

????readyState:?3?请求正在处理中

????readyState:?4?请求处理完成,响应已就绪?已经拿到了服务器的返回结果

?2.为xhr.onreadystatechange设置事件监听

3.调用xhr.open(请求方式,请求地址,同步异步)

4.发送请求的数据

?????http常见状态码

????1xx?请求正在处理

????2xx?一般都表示成功

????3xx?一般都表示重定向

????4xx?一般都表示资源找不到?客户端错误

????5xx?服务器内部错误

let xhr = new XMLHttpRequest();
xhr.onreadystatechange = function (){

        if(xhr.readyState === 4){
            switch (xhr.status){
                case 200:{
                    console.log(JSON.parse(xhr.responseText));
                    break;
                }
                case 404:{
                    console.log("页面或者资源找不到");
                    break;
                }
            }

        }
    }
xhr.open("GET","https://cnodejs.org/api/v1/topicss",false);
xhr.send(null)
console.log(xhr);

?

同源策略：

跨域?(不同源)?JSONP?CORS(后端)?Proxy(代理)

同源：协议://域名:端口号??都一样?就是同源??如果有一个不一样?就是非同源(跨域)，

不同源的客户端脚本(javascript、ActionScript)在没明确授权的情况下，不能读写对方的资源。

?跨域概念：

浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对JavaScript施加的安全限制。

解决跨域的方法：

1.jsonp跨域：

原理：因为浏览器对script不存在同源策略，所以script可以跨域请求外部资源，返回的数据是json格式。

缺点：1、只能发送get请求，无法发送post请求

?2、无法判断请求成功还是失败

2.porxy代理：

原理：让代理服务器请求目标地址，因为请求是在服务端进行的，在服务端不存在跨域，从而解决跨域问题

实现：将原地址绑定在代理服务器下，让代理服务器发送请求。

3.CORS ( 跨域资源共享 )：

原理：只需要向响应头加上一个Access-Control-Allow-Origin?的响应头，表示这个资源是否允许指定域请求，就可以实现跨越操作

这种方案无需客户端作出任何变化 (客户端不用改代码)
普通跨域请求：只需服务端设置Access-Control-Allow-Origin;
带cookie跨域请求：前后端都需要进行设置；
前后端设置：根据xhr.withCredentiald字段判断是否带有cookie；
服务端设置：服务端对于CORS的支持，主要是通过设置Access-Control-Allow-Origin 来进行的，如果浏览器检测到相应的设置，就可以运行Ajax进行跨域的访问。