Ajax 进阶扩展

最新推荐文章于 2021-08-05 22:20:13 发布

头上三尺很有神

最新推荐文章于 2021-08-05 22:20:13 发布

阅读量206

点赞数

分类专栏：前端 AJAX 文章标签： ajax java python js php

本文链接：https://blog.csdn.net/weixin_45060872/article/details/107286708

版权

前端同时被 2 个专栏收录

62 篇文章 0 订阅

订阅专栏

AJAX

2 篇文章 0 订阅

订阅专栏

Ajax 进阶扩展

XML

XML也是一种用来在不同的语言之间做数据传递的跟json的功能差不多
XML相对于json 是一种重量级的传递方式 json 就是一种轻量级的传递格式

XML跟html长得很像也是使用标签来标识的
XML格式要求 :

XML里面只能写双标签
标签名没有具体的规定可以随便写
他也有文档声明他的文档声明可以不写但是如果写了就必须是第一行
他必须有一个跟标签 (就是最外层的标签) 所有的内容都必须写在跟标签里面

<root>
    <items>
    <name>jack</name>
    <nianling>50</nianling>
    <gender>man</gender>
    </items>
      <items>
    <name>lucy</name>
    <nianling>12</nianling>
    <gender>girl</gender>
    </items>
      <items>
    <name>amy</name>
    <nianling>18</nianling>
    <gender>boy</gender>
    </items>
    
    </root>

XML 和 document 可以理解为是同一类型的不同对象这就意味着document里面有的方法 XML里面都有
XML的操作跟HTML基本一样但是 XML 只认标准语法
如果是某个浏览器的语法那么就不支持例如IE的innerText

<script>
    // console.log(document);
    var pList = document.getElementsByTagName("p");

    document.getElementById("btn").onclick = function () {
        var xhr = new XMLHttpRequest();
        xhr.open("get", "data.xml");
        xhr.send();
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                // console.log(xhr.responseText);
                console.log(xhr.responseXML);

                var stuList = xhr.responseXML.getElementsByTagName("items");
                console.log(stuList);

                // 获取不到里面的文本值 因为innerText是IE的语法 不是w3c的标准语法
                // console.log(stuList[0].children[0].innerText);

                console.log(stuList[0].children[0].textContent);
                // console.log(stuList[0].children[0].innerHTML);
                console.log(stuList[0].children[1].textContent);
                console.log(stuList[0].children[2].textContent);

                for (var i = 0; i < pList.length; i++) {
                    // console.log(pList[i]);

                    pList[i].innerHTML = stuList[0].children[i].innerHTML;
                }

            }
        }
    }
</script>

异步与同步请求

同步：指的是浏览器有一堆的任务要执行一件一件的来完成上一个任务没有做完就不能执行下一个任务

异步：需要执行很多代码但是其中的某一段代码的执行不会影响后面的代码的执行这个代码就是异步代码
异步代码执行的特点：就是需要等到同步的代码全部执行完再来执行异步代码

ajax 异步请求局部的数据请求
open方法的三个参数
参数1：请求方式
参数2：请求路径
参数3：布尔类型的值决定是否异步默认为true 异步 false表示同步(通常不会用)

document.getElementById("btn1").onclick=function(){
        var xhr=new XMLHttpRequest();
        xhr.open("get","data.php");
        xhr.send();
        xhr.onreadystatechange=function(){
            if (xhr.readyState == 4 && xhr.status == 200) {
                console.log(xhr.responseText);
            }
        }

        console.log("我是后面的")
    }



    document.getElementById("btn2").onclick=function(){
        var xhr=new XMLHttpRequest();

        xhr.open("get","data.php",false);
       
        xhr.onreadystatechange=function(){
            console.log("请求结束");
        }
        xhr.send();
        
        console.log("我是后面的")
    }

跨域

一个网站向另一个网站发发送请求
同源两个网站之间协议头端口号域名三个都一样的情况下就是同源
跨域两个网站之间协议头端口号域名三个有任意一个不一样的情况下就是跨域

判断是不是跨域就紧扣协议头端口域名是否全部一样
他不会去判断域名是不是指向的同一个网站

如果网站端口号没写默认是80

http://www.ty.com/1.html | http://www.ty.com/abc.html 同源

https://www.ky.com/1.html | http://www.ky.com/1.html 跨域因为协议头不一样

http://ky.com/1.html | http://www.ky.com/abc.html 跨域因为域名不一样

http://www.ky.com:8090/1.html | http://www.ky.com:8633/abc.html 跨域因为端口号不一样

浏览器的同源策略就是当我们使用ajax请求数据的时候只能访问同源的接口
跨域的影响 : 默认情况下浏览器不允许ajax访问跨域的接口

解决跨域的方式

JSONP
ajax 可以不跳转发送请求但是由于浏览器的同源策略不允许ajax访问跨域的资源
如果我们需要解决发送请求不跳转而且可以访问跨域资源的方法
img标签是可以访问跨域资源的但是不能用它来访问跨域接口因为其访问过后就会把接口当成图片来解析，拿不到
但是请求接口就是为了拿到相应数据
link也可以访问跨域资源但是同样拿不到数据

script 标签可以请求跨域资源而且拿到跨域资源之后就可以直接执行
script 请求数据的步骤：

1.先声明一个函数给这个函数传递一个参数

2.使用script的src属性去访问跨域资源并且在接口后面拼接一个参数 callback 属性值是我们声明的函数的名称

这个解决跨域问题的方法就叫做 jsonp

script引入外部文件的特点：引入外部文件之后就会根据js代码去解析
代码会不会执行跟文件类型无关会把引入的文件的内容读取出来当做js代码来执行
严格来说 script标签发送请求是把响应体当做js代码来执行

CORS（跨域资源共享）

CORS（Cross-origin resource sharing，跨域资源共享）是一个 W3C 标准，定义了在必须访问跨域资源时，浏览器与服务器应该如何沟通。CORS 背后的基本思想，就是使用自定义的 HTTP 头部让浏览器与服务器进行沟通，从而决定请求或响应是应该成功，还是应该失败。

CORS 需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE 浏览器不能低于 IE10。
整个 CORS 通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS 通信与同源的 AJAX 通信没有差别，代码完全一样。浏览器一旦发现 AJAX 请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。

因此，实现 CORS 通信的关键是服务器。只要服务器实现了 CORS 接口，就可以跨源通信。
浏览器将CORS请求分成两类：简单请求（simple request）和非简单请求（not-so-simple request）。

总结：默认情况下：浏览器出于保护接口的目的采取同源策略不允许 ajax访问跨域资源
原理：在响应头里面去设置允许所有的或者某些网站可以访问该服务器资源
header('Access-Control-Allow-Origin:需要的地址');
就是服务器告诉浏览器我不需要你的保护把路让开

Ajax原生的封装

 var my$ = {}
        my$.ajax = function ajax(params) {
            var xhr = new XMLHttpRequest();

            // 判断是否为get请求  如果是get请求 就直接拼接路径
            if (params.type == "get") {
                params.url = params.url + "?" + params.data;
            }

            xhr.open(params.type, params.url);

            if (params.type == "get") {
                xhr.send();
            } else {

                xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                xhr.send(params.data);
            }

            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    // console.log(xhr.responseText);
                    // success(xhr.responseText);


                    var res = xhr.responseText;

                    // 如果传递回来的数据是json  那么就要使用JSON.parse进行转换
                    // 如果传回的是XML  那么就是用转换对象调用转换方法 转成XNML对象
                    if (params.dataType == "json") {
                        res = JSON.parse(res);
                    } else if (params.dataType == "xml") {
                        var parser = new DOMParser();
                        res = parser.parseFromString(res, "text/xml");
                    }

                    // 如果是json 或者XML 就会做对应的转换  如果是普通字符串   就直接返回
                    params.success(res);
                }
            }
        }

        my$.get = function get() { }
        my$.post = function post() { }
        my$.ajaxaaa = function ajaxaaa() { }


        document.getElementById("btn1").onclick = function () {
            ajax({
                type: "get",
                url: "data1.php",
                data: "name=rose&age=12",
                success: function (obj) {
                    console.log(obj)
                },
                dataType: "json"
            });
        }

        document.getElementById("btn2").onclick = function () {
            // var xhr = new XMLHttpRequest();
            // xhr.open("get", "data2.php");
            // xhr.onreadystatechange = function() {
            //     if(xhr.readyState == 4 && xhr.status == 200) {
            //         console.log(xhr.responseText);

            //     }
            // }

            // xhr.send();


            ajax("post", "data2.php", "name=rose")
        }

Ajax在jQuery中的使用

$.ajax({
            type: "post",
            // 通常情况下 我们需要传递参数 并且还要把他拼接呈key=value形式的字符串
            // data:"name=rose&age=12",

            // jquery封装的ajax里面 data参数可以直接传递对象 jQuery会自动帮我们转换成key=value这种形式
            data: { "name" : "jack", age : 15 },

            url: "data.php",

            // 是响应成功时执行的函数
            success: function (obj) {
                console.log(obj);
            },

            // dataType一定不能忘 这个参数是告诉jQuery 响应体是什么类型 让jQuery帮我们自动转换
            dataType: "json",

            // 是请求发生错误时 触发的函数
            error: function () {
                console.log("error");
            }

        })

formData

使用formData传递参数需要注意的点

使用FormData传递数据必须是post请求
创建FormData对象创建时可以传参参数是form表单元素必须是DOM元素
传递的form对象能获取到的只能找到带有name属性的表单元素
如果想要额外传递其他参数 FormData对象调用append方法添加进去

		var xhr = new XMLHttpRequest();
         xhr.open("post", "data.php");

        // 使用formData对象 发送数据 只能使用post请求
        //formData 可以自动帮我们添加请求头
        var fm  = new FormData();
       // fm.append("name", "jack");
       // fm.append("type", "帅哥");

       // var fm = new FormData(form);
       // var fm = new FormData($("form"));
       
      	var fm = new FormData($("form")[0]);
      	fm.append("box", "你好");

        xhr.send(fm);
        xhr.onreadystatechange = function() {
         if(xhr.readyState == 4 && xhr.status == 200) {
        	console.log(xhr.responseText);
                    
        }
    }

如果通过jQuery发送ajax请求并且使用FormData对象传递数据
processData : false 告诉jQuery 将数据原样传递不用转换成key=value形式
contentType : false 告诉jQuery不用再加请求头了因为FormData已经自动加上

	$("#btn1").click(function() {
            var fm = new FormData($("form")[0]);
            $.post({
                data : fm ,
                // 相当于告诉jQuery  不用对我传递的对象进行转换  不用转成key=value的字符串
                processData : false,

                // 是formData自动给请求加了请求头  就是告诉jQuery  不用加请求头了
                contentType : false,
                url : "./data.php",
                success : function(obj) {
                    console.log(obj);  
                }
            })
        })

Ajax 提取图片

file 类型的input标签传入文件之后文件内容在 file.files[0]
取到文件想要显示 : 少不了img 需要将文件转化成url

转换成url有两种方式 :

临时路径
直接在前端使用 URL.createObjectURL进行转换
缺点 : 一旦网页关闭临时路径就会被清空获取不到文件了
永久保存

file.onchange = function() {
    		console.log(111);
            
            console.dir(file);
            console.log(file.files[0]);
            
            // img.src = file.files[0];  // 报错  因为src属性 只能给url路径 不能给对象

            // 使用临时路径
            var url = URL.createObjectURL(file.files[0]);
            console.log(url);
            
            img.src = url;
     }

ajax2.0版本提出解决办法

file.onchange = function() {
    var xhr = new XMLHttpRequest();
    xhr.open("post","./data.php");

    var fm = new FormData();
    fm.append("file", file.files[0] )

    xhr.send(fm);
    xhr.onreadystatechange = function() {
        if(xhr.readyState == 4 && xhr.status == 200) {
            
            console.log(xhr.responseText);
            img.src = xhr.responseText;
        
        }
    }

 }