原生ajax（常见的http状态码/同源-跨域）

最新推荐文章于 2024-04-14 06:23:00 发布

三毛敲代码

最新推荐文章于 2024-04-14 06:23:00 发布

阅读量377

点赞数

文章标签： ajax javascript jquery

本文链接：https://blog.csdn.net/m0_54241909/article/details/120618027

版权

原生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>

 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 请求方法。

三毛敲代码

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
原生ajax（常见的http状态码/同源-跨域）

<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"> <
复制链接

扫一扫