ajax小复习

最新推荐文章于 2024-07-17 09:58:39 发布

咩有猫腻.

最新推荐文章于 2024-07-17 09:58:39 发布

阅读量91

点赞数 1

分类专栏：前端后端

本文链接：https://blog.csdn.net/DcTbnk/article/details/105776071

版权

前端后端专栏收录该内容

45 篇文章 0 订阅

订阅专栏

ajax请求:
    超链接 和 form表单 是HTML提供的与后端交互的方法
    ajax请求,是JavaScript提供的与后端交互的方法


ajax请求的基本步骤:
    1,创建ajax对象
        const xhr = XMLHttpRequest()

    2,定义ajax请求相关设定
        xhr.open()
            get方式
                xhr.open('get' , url地址)
                地址之后可以拼接参数,语法与超链接传参语法相同

            post方式
                xhr.open('post' , url地址)

    3,发送ajx请求
        xhr.send()
            get方式
                xhr.send()

            post方式
                先定义请求头内容
                xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');

                xhr.send(参数)

    4,接收请求
        xhr.onload = function(){}

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,jsonp方法      现在很少用了
        2,cors方法       是后端程序员使用的方法,咱们不用写,知道就行
        3,proxy代理方法   前端现在的主流方法


proxy代理方法:

    服务器代理方法
        找到配置文件
        在 server{} 的 {}中设定代理配置 大约是 56-102行
        有固定的语法格式