JS的AJAX

悠悠 2023-02-12 08:26 4阅读 0赞

## Ajax简介 ##

Ajax 异步通信技术，是Asynchronous JavaScript+XML的简写，这种技术允许向服务器请求额外的数据而无需卸载（刷新）页面。

> 百度百科：通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

浏览器网页的发展相对缓慢，网页可以传播消息，允许进行搜索查询（SEO）。SEO是搜索引擎优化，静态页面能被搜索到，如果页面是当需要的时候动态写入，那就无法搜索到。所以一个页面 SEO的优化，得写成静态页面。

> 静态页面的内容相对稳定，不需要向动态页面那样进行对数据库的读取调用操作而直接被打开呈现到浏览器上，因而打开速度快，同时也更利于搜索引擎的检索收录，利于SEO；

早期网页不能向其他语言一样直接给服务端发送消息，服务器返回消息，所以早期的通信都是前后端不分离的情况（跳转页面）。这种方式能够最大限度的允许我们通过SEO搜索页面，但是也有缺陷（就是无论怎么操作，都要重新刷新或跳转页面，即重新打开页面，这样会降低用户体验感）。

后来随着技术的不断进步，异步通信技术（不刷新）被逐渐使用。所以在早期，一直都是前端H5和php通信的方式（来回跳转页面的方式）。但是说句实在话，自从有了页面不跳转就能请求额外数据的想法，有了前后端分离，才有了H5程序员。

前后端分离，不需要重新跳转或刷新页面，不需要服务器渲染传回HTML文件，只需要服务器传给前端数据信息 。 （如不清楚请看： [前后端分离与前后端不分离的区别][Link 1] ）

那么现在SEO要怎么做？ 可以把需要搜索的部分和静态部分单独写成一些静态页面，放在网站中，允许搜索到，当跳转时，就能够跳转到我们搜索到的部分。举个例子：百度的广告连接，比如你搜索车厘子出来京东的广告链接，点击首先进入静态页面（写成静态页面方便被搜索到），然后通过静态页面进行不断跳转。

## Ajax技术核心 ##

Ajax技术核心是XMLHttpRequest对象，简称XHR。 IE7+、Firefox、Opera、Chrome和Safari都支持原生XHR对象，在这些浏览器中创建XHR对象可以直接实例化XMLHttpRequest。

XMLHttpRequest由微软发出，level1由于同源策略的限制，不能发送跨域请求，而且只能发送纯文本数据；level2新增很多功能：可以发送跨域请求，支持二进制数据的发送、接收，新增fromData对象，支持发送表单数据（服务端通过解析表单来获取数据），发送、获取数据时能够获取进度信息，可以设置请求的超时时间等。

#### （一）Ajax的通信的4个步骤： ####

1、新建XMLHttpRequest对象  
2、打开要发送的地址通道  
3、给XMLHttpRequest对象增加侦听器，用来侦听各种情况  
4、发送数据给打开的地址

#### （二）两种HTTP请求方式：GET/POST ####

GET：从指定的资源请求数据  
POST：向指定的资源提交要被处理的数据

GET请求的一些注释：请求可被缓存、请求保留在浏览器历史记录中、请求可被收藏为书签、请求不应在处理敏感数据是使用、请求有长度限制、请求只应当用于取回数据。

POST的一些注释：请求不会被缓存、请求不会保留在浏览器历史记录中、不能被收藏为书签、请求对数据长度没有要求。

## Ajax应用示例 ##

##### 一、简单ajax例子（nonejs写服务器部分），普通通信 #####

前端ajax部分

var xhr=new XMLHttpRequest();//新建请求对象
    xhr.addEventListener("load",loadHandler);//添加处理事件
    xhr.open("GET","http://127.0.0.1:8001");//打开发送到的地址
    xhr.send();//发送数据，没有空着
    // 事件处理
    function loadHandler(e){ 
    	console.log("从node服务接收到的数据：",xhr.response);
    }

服务器nodejs部分

然后运行服务文件，在浏览器打开前端页面，查看控制台的输出信息，证明已成功通信  
![在这里插入图片描述][20200525170746716.png]

##### 二、ajax本地通信，获取本地json数据，使用GET #####

需求：如何获取当前网页当所对应的内容当中的的json或者xml文件  
发现：不用开启node服务，就能实现本地文件预加载，作为配置文件，由外部加载进来

var xhr1=new XMLHttpRequest();
    xhr1.addEventListener("load",loadHandler);
    xhr1.open("GET","./a.json");
    xhr1.send();
    function loadHandler(e){ 
        console.log(xhr1.response);//直接打印是json格式的字符串
        console.log(JSON.parse(xhr1.response));//转化成对象
        // 改变页面文档颜色
        var obj=JSON.parse(xhr1.response);
        document.documentElement.style.backgroundColor=obj.backgroundColor;
    }

打开该页面  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70]

##### 二、ajax本地通信，获取本地xml数据，使用GET #####

ajax有个很重要的概念XML。 json早期不火，json数据也大，并非所有语言兼容json，但基本所有语言兼容XML。所以早期的数据传递除了使用文本数据传递外，还使用XML数据传递。 xml 容易解析，容易看，但是一旦数据多了，xml文件会非常大。

var xhr2=new XMLHttpRequest();
    xhr2.addEventListener("load",loadHandler);
    xhr2.open("GET","./abc.xml");
    xhr2.send();
    function loadHandler(e){ 
    	console.log(xhr2.responseXML)
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 1]  
如果想要拿到水果一类的名称和价格信息

var xhr2=new XMLHttpRequest();
    xhr2.addEventListener("load",loadHandler);
    xhr2.open("GET","./abc.xml");
    xhr2.send();
    function loadHandler(e){ 
        let fruits=xhr2.responseXML;
        let list=Array.from(fruits.getElementsByName("fruits"));
        list.forEach(item=>{ 
            console.log(item.getAttribute("title"),item.getAttribute("price"));
        })
    }

![在这里插入图片描述][20200525183557673.png]

##### 三、同步异步 #####

ajax 的 open() 方法的第三个参数是，async是否异步，默认是true异步，如果是false则意为同步；同步时不需要写事件侦听。建议不要使用同步方式，因为会让页面暂停，等待服务器返回信息。

open() 的第四第五个参数是user、password是访问获取通信是用户名和密码，不过用的很少。

##### 四、ajax的封装 #####

用Promise来封装。

需求：封装一个ajax，然后可以发送或接受数据。如果是GET方式，就将data作为参数写在地址后；如果是POST方式，就通过send()方法发送。所以要首先判断HTTP请求方式。

[querystring][] 模块提供用于解析和格式化 URL 查询字符串的实用工具。

// ES6模块化，type="GET" 允许有默认值
    import QueryString from "./js/QueryString.js"
    
    function ajax(data,type="GET"){ 
        if(type!=="GET") type="POST";
        return new Promise(function(resolve,reject){ 
            let getData="";
            let postData="";
            if(type==="GET"){ 
                getData="?"+QueryString.stringfiy(data);
            }else{ 
                postData=QueryString.stringfiy(data);
            }
            let xhr3=new XMLHttpRequest();
            xhr3.open("GET","http://127.0.0.1:8001"+getData);
            xhr3.onload=function(){ 
                resolve(xhr3.response);
            }
            xhr3.onerror=function(){ 
                reject("地址错误");
            }
            xhr3.send(postData);
        })
    }
    
    ajax({ a:3,b:5}).then(function(data){ 
        console.log(data);
    }).catch(function(msg){ 
        console.log(msg);
    })

然后开启node服务，服务文件还是上面那份，在终端直接开启该js服务文件  
![在这里插入图片描述][20200525221102979.png]  
在浏览器控制台打印有服务端返回的信息  
![在这里插入图片描述][20200525221241538.png]  
还可以看一下数据通信过程，打开Network下的XHR，刷新一下页面，会看到刚刚用ajax通信的内容，有要访问的地址，请求方式，请求成功状态，再往下还有跨域等信息…  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 2]

##### 五、文本对象 — 表单示例 #####

ajax的send方法中的： void send(Document data) 文档对象

示例：上传图片文件

<form>
        <input type="file">
        <input type="submit">
    </form>
    <script type="module"> var form=document.querySelector("form"); form.addEventListener("submit",submitHandler); function submitHandler(e){ e.preventDefault();//阻止默认事件 var file=form.firstElementChild;//<input type="file"> var xhr=new XMLHttpRequest(); xhr.addEventListener("load",loadHandler); xhr.open("POST","http://127.0.0.1:8001"); xhr.send(file.files[0]); console.log(file.files[0]);//file的属性 } function loadHandler(e){ console.log(this.response); } </script>

然后开启服务，效果截图如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 3]

##### 六、FormData对象 — 发送表单 #####

void send(FormData data) 数据对象，可以直接封装内容

先来看一下FormData怎么用的：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 4]  
然后可以融入ajax的send方法里面，发送一整个表单：

var form=document.querySelector("form");
    form.addEventListener("submit",submitHandler);
    function submitHandler(e){ 
        e.preventDefault();
        let fd=new FormData(form);
        let xhr=new XMLHttpRequest();
        xhr.addEventListener("load",loadHandler);
        xhr.open("POST","http://127.0.0.1:8001");
        xhr.send(fd);
    }
    function loadHandler(e){ 
        console.log(this.response);
    }

##### 七、http头部 #####

HTTP客户程序（例如浏览器），向服务器发送请求的时候必须指明请求类型（一般是GET或者POST）。一般请求头不用设置，但是如果请求类型是POST，就必须得写入专门的请求头，才能进行解析，  
如：xhr.setRequestHeader(“content-type”,”application/x-www-form-urlencoded”) 。

常用的获取、设置请求头的方法有：

> getResponseHeader()           获取头部指定的属性值  
> getAllResponseHeaders()     获取所有头部属性  
> setRequestHeader()              设置头部属性，必须在open以后，send以前写入

示例：客户端 写入请求头，读取响应头

var  xhr=new XMLHttpRequest();
    xhr.addEventListener("load",loadHandler);
    xhr.open("GET","http://127.0.0.1:8001");
    
    // 请求消息，必须在open后，send前写入
    // 如果ajax与php通信使用POST方法时，必须这样写入消息头，PHP才可以解析POST数据
    // 写入请求头
    xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
    
    // 如果请求头有自定义的数据，必须服务器做允许跨域请求头设置
    xhr.setRequestHeader("names","xietian");
    xhr.send("bbb");
    
    function loadHandler(e){ 
        // console.log(xhr.response)
        console.log(xhr.getAllResponseHeaders());//获取所有响应头
        console.log(xhr.getResponseHeader("content-type"));//获取到响应头的结果
    }

服务端 获取请求头，设置响应头：

##### 八、timeout 超时、其他事件 #####

**1、简介**  
如：request.timeout = 2000;  
指请求在被自动终止前所消耗的毫秒数（**超时时间**）。默认值为 0，意味着没有超时；  
超时并不应该用在一个 document environment 中的同步 XMLHttpRequests 请求中，否则将会抛出一个 InvalidAccessError 类型的错误；  
当超时发生（或当进度由于预定时间到期而终止时）， timeout 事件将会被触发（**超时事件**）；  
必须设置在open以后，send之前。

小案例：

var  xhr=new XMLHttpRequest();
    xhr.addEventListener("load",loadHandler);
    // 超时事件
    xhr.addEventListener("timeout",timeoutHandler);
    xhr.open("GET","http://127.0.0.1:8001");
    // 超时时间
    xhr.timeout=2000;
    xhr.send();
    
    function timeoutHandler(e){ 
        xhr.abort();//关闭当前通信 因为超时，服务器一直没有返回消息，属于挂起状态
    }
    
    function loadHandler(e){ 
    
    }

**2、其他事件**

**loadstart** ：当程序开始加载时，loadstart 事件将被触发。也适用于 `<img>` 和 `<video>` 元素。

**Progress** ：进度事件会被触发用来指示一个操作正在进行中；  
  loaded：当前加载字节  
  total：总字节

**abort** ：当一个资源的加载已中止时，将触发 abort事件（挂起）。

**error**：当一个资源加载失败时会触发error事件。

**load**：当一个资源及其依赖资源已完成加载时，将触发load事件。

**loadend**：当一个资源加载进度停止时，触发loadend事件（适用于例如 XMLHttpRequest调用, 以及`<img>`或`<video>`元素的内容）。  
  loaded 已加载  
  total 总计数据

##### 九、readyState、readystatechange #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 5]  
**readystatechange 事件** ：当一个文档的 readyState 属性发生更改时，readystatechange 事件会被触发。  
状态主要分为：  
  （1）信息 100-101  
  （2）成功 200-206  
  （3）重定向 300-307  
  （4）客户端错误 400-417  
  （5）服务器错误 500-505

这样，ajax 重新用 Promise 进行封装：

import QueryString from "./js/QueryString.js"
    
    function ajax(data,type="GET"){ 
        if(type!=="GET") type="POST";
        return new Promise(function(resolve,reject){ 
            let getData="";
            let postData="";
            if(type==="GET"){ 
                getData="?"+QueryString.stringfiy(data);
            }else{ 
                postData=QueryString.stringfiy(data);
            }
            let xhr=new XMLHttpRequest();
            xhr.open(type,"http://127.0.0.1:8001"+getData);
            xhr.onreadystatechange=function(){ 
                if(xhr.readyState<4) return;
                if(xhr.status===200){ 
                    resolve(xhr.response);
                }else{ 
                    reject(xhr.response);
                }
            }
            xhr.onerror=function(){ 
                reject("地址错误");
            }
            xhr.send(postData);
        })
    }
    
    ajax({ a:3,b:5}).then(function(data){ 
        console.log(data);
    }).catch(function(msg){ 
        console.log(msg)
    })

[Link 1]: https://www.cnblogs.com/skaarl/p/9658114.html
[20200525170746716.png]: https://img-blog.csdnimg.cn/20200525170746716.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200525172401744.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200525181619236.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ==,size_16,color_FFFFFF,t_70
[20200525183557673.png]: https://img-blog.csdnimg.cn/20200525183557673.png
[querystring]: http://nodejs.cn/api/querystring.html
[20200525221102979.png]: https://img-blog.csdnimg.cn/20200525221102979.png
[20200525221241538.png]: https://img-blog.csdnimg.cn/20200525221241538.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200525221625626.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200628112020307.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200628114703409.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/2020062820092656.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ==,size_16,color_FFFFFF,t_70