首页 > 其他分享> 文章详细

ajax无刷新交互数据

2021-12-30 10:00:32 阅读：175 来源： 互联网

标签：xhr 8000 express 响应 ajax 设置刷新交互 response

一、Ajax:无刷新交互数据

1. Ajax的优缺点

优点

1.可以无需刷新页面与服务器端进行通信

2.允许你根据用户事件来更新部分页面内容

缺点

1.没有浏览历史，不能回退

2.存在跨域问题（同源）

3.SEO不友好

2. 案例准备

// 1.引入express
const express = require('express');
// 2.创建应用对象
const app = express();
// 3.创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装
app.get('/server',(request,response)=>{
    //设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
    response.setHeader('Access-Control-Allow-Headers','*');
    //设置响应体
    response.send('hello ajax');
});
app.post('/server',(request,response)=>{
    //设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
    //设置响应体
    response.send('hello ajax POST');
});
app.all('/server',(request,response)=>{
    //设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
    //设置响应体
    response.send('hello ajax POST');
});
// 4.监听窗口启动服务
app.listen(8000,()=>{
    console.log("服务意见启动，8000端口监听中。。。")
});

3. 基本操作

//绑定事件内
//1.创建对象
const xhr = new XMLHttpRequest();
//2.初始化 设置请求方法和url
//xhr.open('GET','http://127.0.0.1:8000/server');
xhr.open('POST','http://127.0.0.1:8000/server');
//设置请求头
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.setRequestHeader('name','aaaaaa');
//3.发送
//xhr.send();
xhr.send('a=100&b=200&c=300');
//4.时间绑定 处理服务器端返回的结果
// on when 当。。。。的时候
//readystate 是xhr对象的属性 表示状态 0 1 2 3 4
//0 —— （未初始化）：(XMLHttpRequest)对象已经创建，但还没有调用open()方法。
//1 ——  (载入)：已经调用open() 方法，但尚未发送请求。
//2 —— (载入完成)： 请求已经发送完成 即已经调用send()方法
//3 —— (交互)：可以接收到部分响应数据。
//4 —— (完成)：已经接收到了全部数据，并且连接已经关闭。
xhr.onreadystatechange = function(){
    //判断 （服务端返回了所有的结果）
    if (xhr.readyState === 4){
        //判断响应状态码 200 404 403 401 500
        // 2xx 成功
        if(xhr.status >=200 && xhr.status < 300 ){
            //处理结果 行 头 空行 体
            // 1.响应行
            console.log(xhr.status);//状态码
            console.log(xhr.statusText);//状态字符串
            console.log(xhr.getAllResponseHeaders());// 响应头
            console.log(xhr.response);//响应体
        }else{
            
        }
    }
}

4. Ajax 设置请求参数

在url后缀参数就行如：

http://127.0.0.1:8000/server?a=100&b=200&c=300

5. 服务端响应JSON数据

// 1.引入express
const express = require('express');
// 2.创建应用对象
const app = express();
// 3.创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装
app.all('/json-server',(request,response)=>{
    //设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
    //设置响应体
    response.send('hello ajax POST');
    //响应一个数据
    const data = {
        name : 'aaaaaa'
    };
    //对对象进行字符串转换
    let str = JSON.stringfy(data);
});
// 4.监听窗口启动服务
app.listen(8000,()=>{
    console.log("服务意见启动，8000端口监听中。。。")
});

//绑定事件内
//1.创建对象
const xhr = new XMLHttpRequest();
//设置响应体数据类型
xhr.responseType = 'json';
//2.初始化 设置请求方法和url
xhr.open('GET','http://127.0.0.1:8000/json-server');
//设置请求头
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.setRequestHeader('name','aaaaaa');
//3.发送
xhr.send();
//4.时间绑定 处理服务器端返回的结果
// on when 当。。。。的时候
//readystate 是xhr对象的属性 表示状态 0 1 2 3 4
xhr.onreadystatechange = function(){
    //判断 （服务端返回了所有的结果）
    if (xhr.readyState === 4){
        //判断响应状态码 200 404 403 401 500
        // 2xx 成功
        if(xhr.status >=200 && xhr.status < 300 ){
            //console.log(xhr.response);//响应体
            //手动对数据转化
            let data = JSON.parse(xhr.response);
            console.log(data);
            //自动转换
            console.log(xhr.response);
        }else{
            
        }
    }
}

6. nodemon自动重启工具安装

全局安装与开发环境安装

npm install -g nodemon

npm install --save-dev nodemon

7. IE缓存问题解决

// 1.引入express
const express = require('express');
// 2.创建应用对象
const app = express();
// 3.创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装
app.get('/ie',(request,response)=>{
    //设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
    //设置响应体
    response.send('hello ie');
});
// 4.监听窗口启动服务
app.listen(8000,()=>{
    console.log("服务意见启动，8000端口监听中。。。")
});

//绑定事件内
//1.创建对象
const xhr = new XMLHttpRequest();
//设置响应体数据类型
xhr.responseType = 'json';
//2.初始化 设置请求方法和url
xhr.open('GET','http://127.0.0.1:8000/ie?t='+Date.now());
//3.发送
xhr.send();
//4.时间绑定 处理服务器端返回的结果
// on when 当。。。。的时候
//readystate 是xhr对象的属性 表示状态 0 1 2 3 4
xhr.onreadystatechange = function(){
    //判断 （服务端返回了所有的结果）
    if (xhr.readyState === 4){
        //判断响应状态码 200 404 403 401 500
        // 2xx 成功
        if(xhr.status >=200 && xhr.status < 300 ){
            console.log(xhr.response);//响应体
            
        }else{
            
        }
    }
}

8. Ajax 请求超时与网络异常处理

// 1.引入express
const express = require('express');
// 2.创建应用对象
const app = express();
// 3.创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装
app.get('/delay',(request,response)=>{
    //设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
    setTimeout(()=>{
        //设置响应体
        response.send('延时响应');
    },3000)
    //设置响应体
    response.send('hello ie');
});
// 4.监听窗口启动服务
app.listen(8000,()=>{
    console.log("服务意见启动，8000端口监听中。。。")
});

let xhr = null; //全局变量
//绑定事件内
//1.创建对象
xhr = new XMLHttpRequest();
//超时设置 2s 设置
xhr.timeout = 2000;
xhr.ontimeout = function(){
    alert('网络异常，请稍后重试！！');
}
//网络异常回调
xhr.onerror = function(){
    alert('你的网络似乎出现了一些问题！');
}
//2.初始化 设置请求方法和url
xhr.open('GET','http://127.0.0.1:8000/delay');
//3.发送
xhr.send();
//4.时间绑定 处理服务器端返回的结果
// on when 当。。。。的时候
//readystate 是xhr对象的属性 表示状态 0 1 2 3 4
xhr.onreadystatechange = function(){
    //判断 （服务端返回了所有的结果）
    if (xhr.readyState === 4){
        //判断响应状态码 200 404 403 401 500
        // 2xx 成功
        if(xhr.status >=200 && xhr.status < 300 ){
            console.log(xhr.response);//响应体
        }else{
            
        }
    }
}

9. Ajax 取消请求

xhr.abort();//let xhr = null; //全局变量

10. Ajax 重复请求问题

let isSending = false; //全局变量，是否正在发送Ajax请求
let xhr = null; //全局变量

//绑定事件内
//1.创建对象
xhr = new XMLHttpRequest();
//2.初始化 设置请求方法和url
xhr.open('GET','http://127.0.0.1:8000/delay');
//3.发送
xhr.send();
//4.时间绑定 处理服务器端返回的结果
// on when 当。。。。的时候
//readystate 是xhr对象的属性 表示状态 0 1 2 3 4
xhr.onreadystatechange = function(){
    //判断表示变量
    if(isSending) xhr.abort();//如果正在发送，则取消该请求，创建一个新的请求
    //判断 （服务端返回了所有的结果）
    if (xhr.readyState === 4){
        //修改标识变量
        isSending = true;
        //判断响应状态码 200 404 403 401 500
        // 2xx 成功
        if(xhr.status >=200 && xhr.status < 300 ){
            isSending = false;
            console.log(xhr.response);//响应体
        }else{
            
        }
    }
}

标签：xhr,8000,express,响应,ajax,设置,刷新,交互,response
来源： https://blog.csdn.net/qq_45938466/article/details/122229661

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9