AJAX笔记（1）-原生的AJAX使用

1.AJAX简介

ajax是异步的JS和XML，可以向服务器发送异步请求从而无刷新获取数据

2.XML简介

xml是可拓展文本标记语言，通常用来存储数据

<student>
	<name>张三</name>
	<sex>男</sex>
</student>

现在通常使用JSON格式代替

{”student“{”name“:“张三"，”sex“:"男"}}

3.AJAX的缺点

1）没有浏览历史，不能回退
2）存在跨域问题（同源）
3）SEO（搜索引擎优化）不友好，因为是动态响应的，所以在HTTP响应体中没有

4.EXPRESS框架的使用

1）下载nodejs
2）VScode中创建项目，在项目最外层打开终端，要求路径全英文
3）编写express服务器脚本

//1.引入express
const express = require('express');

//2.创建应用对象
const app = express();

//3.创建路由规则
//request封装请求报文
//response封装响应报文
app.get('/',(request,response)=>{
    //设置响应
    response.send('Hello,Express!');
});

//4.监听端口启动服务
app.listen(8000,()=>{
    console.log('服务已启动，8000端口监听中...');
});

3）终端安装express

npm init --yes
npm i express

安装出错可以尝试以管理员发生打开VScode
4）再次右键以终端方式打开express运行脚本的上级文件夹

node+' '+Tab  即可运行脚本

5)浏览器打开 127.0.0.1：8000显示响应

6.一般在JS中创建方法使用AJAX

<script>
        const btn = document.getElementById('send');
        btn.onclick = function(){
            console.log('test');
            //创建对象
            const xhr = new XMLHttpRequest();
            //设置请求方式和URL
            xhr.open('GET','http://127.0.0.1:8000/server');
            //设置响应头信息
            //xhr.setRequestHeader('Content-Type','application/x-www-from-urlencoded');
            //发送
            xhr.send(); 
            //事件绑定处理服务器发送回的结果
            //readystate是xhr对象中的属性，表示状态，有0、1、2、3、4
            xhr.onreadystatechange = function(){
                //判断（4表示服务器返回了所有的结果）
                if(xhr.readyState === 4){
                    //判断响应状态码
                    if(xhr.status >= 200 && xhr.status < 300){
                        //处理结果 行 头 空行 体
                        console.log(xhr.status);//状态码
                        console.log(xhr.statusText);//状态字符串
                        console.log(xhr.getAllResponseHeaders);//所有响应头
                        console.log(xhr.response);//响应体
                    }
                    else{

                    }
                }
            }
        }
    </script>

7.AJAX传递参数方式

1）GET方式
在url后缀参数，如：

xhr.open('GET','http://127.0.0.1:8000/server?a=100&b=200&c=300');

2）POST方式
在send()方法中传参，格式不限，服务端能处理就行

xhr.send('a=100&b=200&c=300');
xhr.send('a:100&b:200&c:300');

8.JSON格式数据的传输

服务端代码（使用express框架）

app.all('/json-server',(request,response)=>{
    //设置响应头，设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
    //响应头    
    response.setHeader('Access-Control-Allow-Headers','*')
    //设置响应
    const data = {
        name:'liuyang'
    };
    let str = JSON.stringify(data);//只能传输字符串
    response.send(str);
});

前端接收JS代码

if(xhr.status >= 200 && xhr.status <= 300){
                        // console.log(xhr.response);
                        // rlt.innerHTML = xhr.response;
                        //1.手动对数据转化
                        // let data = JSON.parse(xhr.response);
                        // console.log(data);
                        // rlt.innerHTML = data.name;
                        //2.自动转化数据
                        //在send()前设置接收数据的格式：xhr.responseType = 'json';
                        //rlt.innerHTML = xhr.response.name;
                    }

9.使用nodemon自动重启工具

使用该工具后修改服务端代码就不用重启终端了

#安装命令
npm install -g nodemon
#重启终端
nodemon server.js
#使用失败时加npx
npx nodemon  server.js

10.解决IE缓存问题

在发送的URL后加上参数便于识别，如：

xhr.open('GET','http://127.0.0.1?t='+Date.now())

11.AJAX请求超时的处理

//超时设置
xhr.timeout = 2000;
//超时回调
xhr.ontimeout = function(){
    alert('响应超时,请稍后重试');
}
//网络异常回调
xhr.onerror = function(){
	alert('网络异常,请稍后重试');
}

12.AJAX取消请求

let xhr = null; 
btn1.onclick = function(){
	xhr = new XMLHttpRequest();
	xhr.open('GET','http://127.0.0.1:8000/server');
	xhr.send(); 
}
//abort方法取消请求
btn2.onclick = function(){
	xhr.abort();
}

13.AJAX解决重复请求问题

添加一个标识变量

<script>
        const btn = document.getElementById('send');
        const rlt = document.getElementById('result');
        let issending = false;
        let xhr = null;
        btn.onclick = function(){
            //判断标识变量
            if(issending){
                xhr.abort();//如果正在发送请求,则取消并发送一个新的请求
            }
            xhr = new XMLHttpRequest();
            issending = true;
            xhr.open('GET','http://127.0.0.1:8000/delay');
            xhr.send(); 
            xhr.onreadystatechange = function(){
                if(xhr.readyState === 4){
                   issending = false;
                    if(xhr.status >= 200 && xhr.status < 300){
                        rlt.innerHTML = xhr.response;
                    }
                    else{

                    }
                }
            }
        }
 </script>