知识笔记| AJAX—实现异步刷新

最新推荐文章于 2024-10-02 08:54:04 发布

小北@爱学习

最新推荐文章于 2024-10-02 08:54:04 发布

阅读量502

点赞数

分类专栏：知识笔记文章标签： ajax http

本文链接：https://blog.csdn.net/qq_43352105/article/details/110679628

版权

知识笔记专栏收录该内容

11 篇文章 0 订阅

订阅专栏

AJAX

全局刷新

在这里插入图片描述

局部刷新

在这里插入图片描述

Ajax介绍

这个一部对象上存在浏览器内部内存中的，使用js语法创建和使用该对象

异步–一次可以处理多个请求
Javascrip–javascrip的脚本，在浏览器中运行，创建异步对象发送请求更新页面的dom对象
xml–网络中传输的数据格式，使用json替换了xml的数据格式

XML

可扩展的标记语言，被设计用来传输和存储数据，标签名字均为自定义，被JSON替代

缺点

没有后退可言，存在跨域问题(同源处理),SEO不友好（爬虫爬不动结果）

HTTP协议

超文本传输协议，详细规定了浏览器和万维网服务器之间的相互通信规则约定

请求报文

行 POST / URL HTTP/1.1(请求版本类型)

头 Host：atguigu.com

Cookie：name=guigu

Content-type：application/x-www-form-urlencoded

User-Agent：chrome 83

空行

体 username=admin&&password=admin(get可以省略)
响应报文

行 HTTP/1.1 200 OK (404–找不到403–没有权限401–未授权500–内部错误)

头 Content-Type：text/html;charset=utf-8

Content-length：2048

Content-encoding：gzip

空行

体 html的内容

Express框架

是用来搭建了一个express.js的服务器可以用来访问本地的请求地址

异步

异步对象的实现步骤

创建对象
```
var xmlHttp=new XMLHttpRequest();
```

给异步对象绑定一个事件onreadystatechange

当异步对象发起请求，获取了数据都会触发这个事件，这个事件需要一个函数来处理状态的变化

btn.onclick=fun1()
//这个函数会被sent(),open()分别进行回调执行
xmlHttp.onreadystatechange=function(){
  处理请求的状态变化
  if(xmlHttp.readyState==4&&xmlHttp.status==200){
    //可以处理服务器端的数据，更新当前页面
  var data=xmlHttp.responseText;
    //数据更新部分可以使用jquery去实现
  document.getElementById("name").value=data;
  }
  }

 异步对象的属性readyState表示异步对象请求状态的变化

0：请求未初始化，创建异步请求对象 var xmlHttp=new XMLHttpRequest()
1：初始化异步请求对象，xmlHttp.open(请求方式，请求地址，true（异步)）
2：异步对象发送请求 xmlHttp.send()
3：异步对象接收应答数据，从服务端返回数据。内部处理
4：异步请求对象已经将数据解析完毕。可以读取数据，更新页面

异步对象的属性status表示网络请求的状况 200（成功）404（未访问到）500（出错）

初始异步请求对象

异步的方法open()

xmlHttp.open(请求方式get|post，“请求服务器端的地址”，true（异步)）
xmlHttp.open（“get”，“loginServlet?name=zs&&pwd=123”,true);

设置请求头

xml.sendRequestHeader('Content-Type','application/x-www-form-urlencoded')

设置自定义请求头

解决跨域问题

 response.setHeader('Access-Control-Allow-Origin', '*');

解决自定义Header请求头

response.setHeader('Access-Control-Allow-Headers', '*');

异步对象发送请求

xmlHttp.send()

获取服务器端返回的数据，使用异步对象的属性responseText

使用JSON实现请求

传送数据

const data={name:'aixuexi'}
let str=JSON.stringify(data);
response.send(str)

在html页面对数据进行修改

手动对数据进行修改

let data = JSON.parse(xhr.response)
console.log(data);
result.innerHTML = data.name;

利用xhr属性进行自动修改

xhr.responseType='json';
result.innerHTML = xhr.response.name;//直接可以获取需要的内容

IE缓存问题

当第一次对服务器发送请求会将信息放在存储器中，第二次发请求可能从存储器中去取，这对时效性是不好的，所以需要解决这个问题

http://127.0.0.1:8000/ie?t=+Date.now()//根据时间戳的不同就会不断发请求给服务器

超时和网络异常

xml.timeout = 2000;
//延迟回调
xml.ontimeout = function() {
  alert("网络异常，稍后重试");
};
//网络异常回调
xml.onerror = function() {
  aler("你的网络似乎出了问题");
}

请求取消

x.abort();

取消重复的访问服务器

添加一个标识变量去判断是否正在进行请求

let issending = false;

当new一个对象的时候就是true，send（)结束后就是false，如果刚开始true，则打断x.abort()

用Jquary实现发送请求

html页面中的JS文件实现

 //使用bootstrap设置样式，eq(0)表示第几个按钮下标
 $('button').eq(0).click(function() {
            //使用的get请求方式
            $.get('http://127.0.0.1:8000/jquery-server', {
                a: 100,
                b: 200
            }, function(data) {
                console.log(data);
            }, 'json'); //可以转化为对象的格式，不加则是字符串
        });

JS中的express框架中JSON对内容的处理

const data = { name: '张黑马加油' };
response.send(JSON.stringify(data));

通用Ajax的请求，可以去设置很多的返回信息

$('button').eq(2).click(function() {
            $.ajax({
                //url访问的地址
                url: 'http://127.0.0.1:8000/delay',
                //参数
                data: {
                    a: 100,
                    b: 200
                },
                //请求类型
                type: 'GET',
                //响应体结果
                dataType: 'json',
                //成功DE回调
                success: function(data) {
                    console.log(data);
                },
                //超时时间
                timeout: 2000,
                //失败的回调
                error: function() {
                    console.log("出错啦");
                }
            })
        })

用Axios实现发送请求

可以直接发送json数据类型

GET方式

axios.defaults.baseURL = 'http://127.0.0.1:8000';
        btns[0].onclick = function() {
            axios.get('/axios-server', {
                //url参数
                params: {
                    id: 100,
                    vip: 7
                },
                //请求头信息
                headers: {
                    name: 'aixuexi',
                    age: 20
                }
            }).then(value => {
                console.log(value);
            })
        }

POST方式

 btns[1].onclick = function() {
            axios.post( //url参数
                'axios-server', {
                    username: 'admin',
                    password: 'admin'
                }, {
                    params: {
                        id: 200,
                        vip: 9
                    },
                    //请求头信息
                    headers: {
                        heigh: 180,
                        weigh: 180,
                    }
                },
            );
        };

AJAX方法

btns[2].onclick = function() {
            axios({
                //请求方式
                type: 'GET',
                //url参数
                url: 'axios-server',
                params: {
                    id: 300,
                    vip: 8
                },
                headers: {
                    a: 400,
                    b: 500
                },
                data: {
                    username: 'zll',
                    password: 'zll'
                }
            }).then(response => {
                console.log(response);
            })
        }