ajax请求 ajax求情封装（get post） ajax的兼容 同源策略和跨域方法 jsonp方式跨域 cors跨域_getajaxproxy

ajax请求

   <!--  
    超链接跳转传参和form表单跳转传参
    都必须要跳转页面,而且是去后端程序页面
    不利于前端开发

    之后,我们使用ajax来发送请求数据等,与后端程序进行数据交互

    ajax发送请求,完成数据交互,优点
        不用跳转页面,在当前页,就可以显示数据交互的结果
        所有的页面渲染操作,生成页面操作,都是在前端完成,减轻服务器的操作压力

        不用跳转,减轻服务器压力

    什么是ajax
        a : async   异步
        j : JavaScript
        a : and
        x : XML

        一个异步的 JavaScript 和 XML 的数据交互

        ajax技术最初只能和 XML格式的内容进行交互
        现在发展到可以和任意的后端程序内容进行交互

        现在是前后端数据交互的主要手段

    基本步步骤过程
        1,创建一个ajax对象
            const xhr = new XMLHttpRequest();
        2,配置定义请求信息内容
            xhr.open( '请求方式' , '请求地址?键名=数值&键名=数值...' );
            get方式可以在请求地址之后,拼接参数

        3,发送ajax请求
            xhr.send();

        4,接收相应内容
            xhr.onload = function(){}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

ajax请求总结1

        ajax请求的本质

            通过JavaScript方式,与后端程序以及数据库,进行交互

            之前的方式是 form表单 或者 超链接 都属于 HTML方式

        ajax请求的基本过程原理
            通过 ajax请求 是JavaScript定义好的程序
            向后端发送请求以及数据
            后端程序跟发送的请求以及数据,对数据库进行操作,并且获取操作结果
            ajax请求,通过响应体,获取后端操作结果

        优点:
            1,不用跳转页面,也可以在局部进行发送请求,获取响应结果
            2,页面渲染,可以通过前端操作完成,减轻后端程序压力

        程序执行步骤

            1,创建ajax实例化对象

                const xhr = new XMLHttpRequest();

            2,设定ajax对象,请求信息
                请求的方式
                请求的对象地址

                如果是get方式,可以在请求地址之后拼接参数

                xhr.open('get' , 'url地址?键名=数值&键名=数值...');

                xhr.open('post' , 'url地址');

            3,如果是post方式,必须要设定请求头,确保可以正确传参
              get方式不要设定

                语法形式是固定格式的内容
                xhr.setRequestHeader('content-type' , 'application/x-www-form-urlencoded');

            4,发送请求

                如果是get方式,是直接发送请求
                xhr.send()

                如果是post方式,需要在send()中定义参数
                xhr.send('键名=数值&键名=数值...')

            5,接收响应体
                xhr.onload = function(){
                    请求结束后要执行的内容
                    请求结果,也就是响应体
                    存储在 xhr.response 中
                }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

ajax请求封装（get post）

   // ajax的最基本封装

    // 将 get请求方式 和 post请求方式 封装为两个函数
    function getAjaxSend(url , cb){
        // 1,创建ajax实例化对象
        const xhr = new XMLHttpRequest();

        // 2,设定ajax请求信息
        // 不需要定义请求的参数,直接拼接在url之后就可以了
        xhr.open('get' , url);

        // 3,发送请求
        xhr.send();

        // 4,接收相应
        xhr.onload = function(){
            // 调用参数函数,执行内容是响应体
            cb(xhr.response);
        }
    }


    // post请求方式
    // 要比get方式,多设定一个请求头
    // 还要多设定一个请求参数的数据
    function postAjaxSend(url , cb , dataStr){
        // 1,创建ajax实例化对象
        const xhr = new XMLHttpRequest();

        // 2,设定ajax请求信息
        xhr.open('post' , url);

        // post方式,必须要设定请求头
        xhr.setRequestHeader('content-type' , 'application/x-www-form-urlencoded');

        // 3,发送请求
        xhr.send(dataStr);

        // 4,接收相应
        xhr.onload = function(){
            // 调用参数函数,执行内容是响应体
            cb(xhr.response);
        }
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

ajax的兼容:

        1,请求兼容
            标准浏览器:
            const xhr = new XMLHttpRequest();

            低版本IE浏览器
            const xhr = new ActiveXObject('Microsoft.XMLHTTP');

            兼容形式
            if(){
                var xhr = new XMLHttpRequest();
            }else{
                var xhr = new ActiveXObject('Microsoft.XMLHTTP');
            }

        2,获取响应体的兼容

            判断ajax状态码为4,请求结束,并且浏览器成功分离响应体内容
                xhr.readyState == 4
            判断请求响应状态码 为 200-299,也就是请求成功
                正则表达式  /^2\d{2}$/.test(xhr.status)
                逻辑运算符  xhr.status >= 200 && xhr.status <= 299
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

同源策略和跨域方法

        同源策略:
            浏览器默认只允许同源的请求,获取响应体结果
                请求,只能获取自家的数据,不能拿别人的数据
        跨域方法:
            1,jsonp方法      现在很少用了
            2,cors方法       是后端程序员使用的方法,咱们不用写,知道就行
            3,proxy代理方法   前端现在的主流方法

    
    proxy代理方法:

        服务器代理方法
            找到配置文件
            在 server{} 的 {}中设定代理配置 大约是 56-102行
            有固定的语法格式
       //
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

jsonp方式跨域

    //     所谓的jsonp就是通过 script标签 的特殊属性来完成跨域请求
    //     1, script标签,可以通过 src属性,访问任意的文件内容,即时是跨域的文件也可以访问
    //     2, script标签,可以读取 src属性,加载的任意的外部文件内容,会将文件内容,作为 JavaScript程序来解析

    // script标签的两大特性
    //     1,本身就可以跨域,不受域名限制
    //       不管文件在哪儿,只要路径正确,就可以访问
    //     2,加载的文件内容,都会按照JavaScript程序的语法格式,来执行
    //       不管是什么文件,只要写的是JavaScript程序,都能执行

    // 在JavaScript程序中先定义好一个函数
    // 在PHP等后端程序中,调用这个函数
    // 将后端返回的数据,作为这个参数的参数设定

    // 问题:
    //     jsonp的无下限:
    //         只要是知道文件的地址,就可以给后端程序传参,和获取结果
    //         只要知道路径,谁要给谁数据
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

实例

php

<?php

// PHP可以定义相应的数据操作
// $arr = [
//     ['name'=>'张三','age'=>18,'sex'=>'男','addr'=>'北京'],
//     ['name'=>'李四','age'=>19,'sex'=>'女','addr'=>'上海'],
//     ['name'=>'王五','age'=>20,'sex'=>'不详','addr'=>'广州'],
// ];

// 操作读取数据库
$link = mysqli_connect('127.0.0.1' , 'root' , 'root' , 'nz2002' , 3306);
$sql = "SELECT * FROM `student`";
$result = mysqli_query($link , $sql);
$arr = mysqli_fetch_all($result,MYSQLI_ASSOC);



// 转化成字符串形式
$str = json_encode($arr);
// 输出的是js程序形式
// echo "console.log(JSON.parse('{$str}'))";

// 定义一个函数,函数是JavaScript中已有的函数
// 函数的参数,是PHP中获取到的参数
echo "fun({$str})";


mysqli_close($link);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

html

 <!-- 相对路径 -->
<!-- <script src="./demo.js"></script> -->

<!-- 绝对路径 -->
<!-- <script src="http://127.0.0.1/nz2002/week8_day01/01_jsonp/demo.js"></script> -->

<!-- 跨域的绝对路径,通过src也可以访问 -->
<!-- <script src="http://localhost/nz2002/week8_day01/01_jsonp/demo.js"></script> -->

<!-- 加载一个外部的txt文件,其中文本内容,是一串js代码 
     通过 src 属性,读取加载一个外部跨域文件内容
     txt文件中的内容是 : window.alert('我是txt文件中的js形式代码执行的结果');
     内容的形式 是 js 代码的形式 
     script标签,会将 读取到 window.alert('我是txt文件中的js形式代码执行的结果'); 尝试以js的方式运行
     内容正好是 js 代码,执行结果就和正常的js代码执行效果完全相同

-->
<!-- <script src="http://localhost/nz2002/week8_day01/01_jsonp/demo.txt"></script> -->

<!-- 通过script标签,访问一个PHP外部跨域程序 
     PHP程序要输出内容,不是直接写就行的
     在 <?php 起始表示符内
     必须是通过 echo   var_dump()    print_r() 输出内容
     PHP可以先定义好要传参的数据,然后转化为json串的形式,再以js程序的方式,传递给js程序

     实际项目中,PHP程序是返回一个函数形式的内容
     但是必须要在JavaScript中,提前定义好函数

     等于是在JavaScript中,提前定义好一个函数
     php程序,定义内容,来调用这个函数

     为了,可以返回接收PHP程序中的参数
     PHP程序中的参数,就定义为这个函数的参数
-->

<script>
    // 在JavaScript中提前定义好 这个函数名称
    function fun(res){
        console.log(res);
        // 接收到的数据就是存储在res中的后端PHP程序的操作结果
        // 之后这个res就便于我们使用了
    }
</script>
<!-- 加载外部php程序,返回这个函数,并且调用执行这个函数 -->
<script src="http://localhost/nz2002/week8_day01/01_jsonp/demo.php"></script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

cors跨域

    // 通过设定后端程序内容
    // 让浏览器不要阻止跨域访问
    // 通过后端程序,来让前端程序完成跨域


    // 实际项目中
    // jsonp  目前基本不使用,能用的都是10年前的老程序
    // cors   方式,是后端设定的效果,我们不用去管
    // 代理方式  前端要掌握的主要方式

    // 最终,不管是 get 还是 post 还是跨域
    // 可以通过 jQuery 和 框架 等方式,一站式解决
1
2
3
4
5
6
7
8
9
10
11
12

实例

php

<?php

// 设定之后,后台程序就允许跨域访问
// 写了这三行代码,就意味着这是一个共享的,开放的,随便访问的后端程序
// 任何一个前端程序,只要是允许的请求方式,只要地址对,都可以访问

// 允许访问的路径/域名
// 定义的是 *   * 星号,叫通配符,是表示任意内容,也就是任意的地址,路径都能访问
header("Access-Control-Allow-Origin:*");  
// 允许的请求方式
// 一般也是定义为星号
header("Access-Control-Request-Methods:*");
// 允许的请求头信息
header("Access-Control-Allow-Headers:x-requestd-with,content-type,test-token,test-sessid");

echo '我是跨域PHP程序的返回体';
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

html

<script>
    const xhr = new XMLHttpRequest();
    xhr.open('get' , 'http://localhost/nz2002/week8_day01/02_cors/demo.php');
    xhr.send();
    xhr.onload = function(){
        console.log(xhr);
    }
</script>
1
2
3
4
5
6
7
8