[JavaScript知识库] 原生ajax（常见的http状态码/同源-跨域）

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> 原生ajax（常见的http状态码/同源-跨域） -> 正文阅读

[JavaScript知识库]原生ajax（常见的http状态码/同源-跨域）

原生ajax原理：

? ? ajax：一种请求数据的方式，不需要刷新整个页面；
? ? ajax的技术核心是 XMLHttpRequest 对象；
? ? ajax 请求过程：创建 XMLHttpRequest 对象、连接服务器、发送请求、接收响应数据；

ajax实现步骤

1.???创建ajax对象

? ? var xhr = new XMLHttpRequest();

2.??告诉ajax请求地址以及请求方式(ajax下的open方法)

　xhr.open(‘get’,’http://www.example.com’); 第一个参数为请求方式，第二个参数为请求地址/服务器端对应的路由请求地址

3.??????发送请求

? ? xhr.send();

4.??????获取服务器端与客户端的响应数据

xhr.onload = function () {

?????? 　　console.log(xhr.responseText);? xhr.responseText 获取服务器端的响应数据

}

http常见状态码

200 - 请求成功
301 - 资源（网页等）被永久转移到其它URL
404 - 请求的资源（网页等）不存在
500 - 内部服务器错误

【状态码分类】

?1**信息，服务器收到请求，需要请求者继续执行操作

2**成功，操作被成功接收并处理

3**重定向，需要进一步的操作以完成请求

4**客户端错误，请求包含语法错误或无法完成请求

5**服务器错误，服务器在处理请求的过程中发生了错误

同源和跨域

1.同源策略

同源策略是由网景提出的一个著名的安全策略，现在所有支持JavaScript?的浏览器都会使用这个策略。
实际上，这种策略只是一个规范，并不是强制要求，各大厂商的浏览器只是针对同源策略的一种实现。它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。

2.跨域

跨域有三个条件，满足任何一个条件就是跨域
?1：服务器端口不一致
?2：协议不一致
?3：域名不一致

解决方案：

1.jsonp

　　在远程服务器上设法动态的把数据装进js格式的文本代码段中，供客户端调用和进一步处理；在前台通过动态添加script标签及src属性，表面看上去与ajax极为相似，但是，这和ajax并没有任何关系；为了便于使用及交流，逐渐形成了一中非正式传输协议，人们把它称作 jsonp 。

<body>

    <form action="/" method="post" enctype="multipart/form-data">

        <input type="text" name="xinxi" id="info"><br>

        <input type="file" name="file" id="file"><br>

        <input type="button" value="提交" name="submit" id="btn">

    </form>

</body>

<script src="./jquery.js"></script>

<script>

    //提前写好函数，调用函数需要传参

    function callback(data){

        alert(data);

    }

    //动态添加script标签及src属性

    $('#btn').on('click',function(){

       var sc = document.createElement('script');

       sc.src = 'http://soul:8888/kuayu?cb=callback';

       $('head').append(sc);  

    })

</script>

?js

 1 var http = require('http');
 2 var url = require('url');
 3 var server = http.createServer();
 4 server.listen('8888',function(){
 5     console.log('8888');
 6 });
 7 server.on('request',function(req,res){
 8     var urls = url.parse(req.url,true);
 9     if(urls.pathname == '/kuayu'){
10         res.end('callback("jsonp")');//返回的数据需是前端定义的函数调用的形式
11     }
12 });

　jsonp的一个要点就是允许用户传递一个callback参数给服务端，?然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据，?这样客户端就可以随意定制自己的函数来自动处理返回数据了。

　　发现凡是拥有"src"这个属性的标签都拥有跨域的能力，比如script、img、iframe；?src 的能力就是把远程的数据资源加载到本地(图片、JS代码等);

2.cors

cors跨域的核心点是在服务端代码中设置一个响应头即可

<body>
    <form action="/" method="post" enctype="multipart/form-data" id="form">
        <input type="text" name="xinxi" id="info"><br>
        <input type="button" value="提交" name="submit" id="btn">
    </form>
</body>
<script src="./jquery.js"></script>
<script>
    $('#btn').on('click', function () {           
                $.ajax({
                        url: 'http://soul:8888/kuayu',
                        type:'delete',   
                        async:false,
                        success: function (data) {
                            alert(data);
                        },
                })
    })
</script>

var http = require('http');
var url = require('url');
var server = http.createServer();
server.listen('8888',function(){
    console.log('8888');
});
server.on('request',function(req,res){
　　　　// 允许所有请求域
　　　　// res.setHeader('Access-Control-Allow-Origin','*');
　　　　// 只允许具体的一个域进行数据共享
　　　　// res.setHeader('Access-Control-Allow-Origin','http://127.0.0.1:8000');

　　 var urls = url.parse(req.url,true);
    res.setHeader('Access-Control-Allow-Origin','*');
    if(req.method == 'POST' || req.method == 'GET'){
        if(urls.pathname == '/kuayu'){
            res.end('hello,world');
        }
　　　　// 客户端发送预先检查请求，响应会客户端，
    }else if(req.method == 'OPTIONS'){
        res.setHeader('Access-Control-Allow-Methods', 'DELETE');//设置所允许的真是请求（delete，put等）
        res.end('');
　　// 客户端发送真实请求，响应数据
    }else if(req.method == 'DELETE'){
        res.end('Bye');
    }
    
});

? ? 如果请求方式为get和post简单请求，则只需要设置响应头：res.setHeader('Access-Control-Allow-Origin','*');来允许某一个域或者所有域进行数据共享；

? ? ?若是其他方式的请求，会在发送真正的请求之前发送一个options请求，通过options请求里设置：res.setHeader('Access-Control-Allow-Methods', 'DELETE')，

告知服务器正式请求会使用哪一种?HTTP 请求方法。

JavaScript知识库最新文章

ES6的相关知识点

react 函数式组件 & react其他一些总结

Vue基础超详细

前端JS也可以连点成线（Vue中运用 AntVG6）

Vue事件处理的基本使用

Vue后台项目的记录（一）

前后端分离vue跨域，devServer配置proxy代理

TypeScript