AI导航网
微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦！

AJAX的学习记录

分类：Ajax作者：编程之家原文地址

AJAX 的开发笔记

HTTP

HTTP（hypertext transport protocol）协议『超文本传输协议』，协议详细规定了浏览器和万维网服务器之间互相通信的规则。
约定, 规则

请求报文

重点是格式与参数

行      POST  /s?ie=utf-8  HTTP/1.1
头      Host: atguigu.com
        Cookie: name=guigu
        Content-type: application/x-www-form-urlencoded
        User-Agent: chrome 83
空行
体      username=admin&password=admin

响应报文

行      HTTP/1.1  200  OK
头      Content-Type: text/html;charset=utf-8
        Content-length: 2048
        content-encoding: gzip
空行
体      <html>
            <head>
            </head>
            <body>
                <h1>尚硅谷</h1>
            </body>
        </html>

响应的状态码

  • 404
  • 403
  • 401
  • 500
  • 200

原生AJAX

GET请求的使用

// 获取button元素对象
        const btn = document.querySelector('button');  // 通过该方法可以直接通过标签选择器来获取对象
        const Box = document.querySelector('.Box');
        // 绑定事件
        btn.onclick = function(){
            // 分4步
            // 1，创建对象
            const xhr = new XMLHttpRequest();
            // 2,初始化，设置请求方法和url 即要请求的URL地址
            xhr.open('GET','http://127.0.0.1:8000/server');
            // 3,发送
            xhr.send();
            // 4，事件绑定 处理服务器返回的结果
            // on  when  当...时候  触发
            // readystate   是 xhr 对象中的属性， 表示请求的状态  0 1 2  3 4
            // change 改变
            xhr.onreadystatechange = function(){
                // 判断  当服务器返回了所有的结果时
                if(xhr.readyState === 4){
                    // 判断状态码  200  404  403  401  500
                    //  只要是200到300以内的状态码  都是表示成功
                    if(xhr.status >= 200 && xhr.status < 300){
                        // 处理结果  处理响应的  行 头 空行 体
                        //响应
                        // console.log(xhr.status);  // 状态码
                        // console.log(xhr.statusText);  //  状态字符串
                        // console.log(xhr.getAllResponseHeaders());  // 所有响应头
                        // console.log(xhr.response);  // 响应体

                        // 将获取到响应体  显示在Box div中
                        Box.innerHTML = xhr.response;

                    }
                }
            }


        }

POST请求的使用

  // 获取元素对象
        const Box = document.querySelector('.Box');
        // 绑定事件   当鼠标移到该div对象上时，触发该事件
        Box.addEventListener('mousemove',function(){
            // console.log('text');
            // 4步
            //1，创建对象
            const xhr = new  XMLHttpRequest();
            //2,初始化 设置类型与URL
            xhr.open('POST','http://127.0.0.1:8000/server');
            // 设置请求头
            xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
            //3,发送
            xhr.send('name = "小爱"……age=18');  // send的方法可以发送请求参数  数据要用引号包起来，因为只能是字符串
            //4,事件绑定
            xhr.onreadystatechange = function(){
                // 该事件只会在请求请求发送后结束后就会触发
                // 判断发送结束，返回的状态
                if(xhr.readyState === 4){
                    if(xhr.status >= 200 && xhr.status < 300){
                        // 处理服务端返回的结果
                        Box.innerHTML = xhr.response;
                    }
                }
            }

        })

JSON响应的处理

游览器端

 const Box = document.querySelector('.Box');
        // 绑定键盘的按下事件，这个可以是任意键
        window.onkeydown = function(){
            // 发送ajax请求  4步走
            const xhr = new XMLHttpRequest();
            // 设置响应体数据的类型
            xhr.responseType = 'json';   // 如果是手动转换就不要该行代码
            // 初始化，设置发送的请求类型和要请求的URL地址
            xhr.open('GET','http://127.0.0.1:8000/json-server')
            // 发送请求参数
            xhr.send();
            // 事件绑定  一旦发送结束，就触发该事件
            xhr.onreadystatechange = function(){
                if(xhr.readyState === 4){  // 该判断表示已经得到返回的请求的结果了
                    if(xhr.status >= 200 && xhr.status <300){
                        // Box.innerHTML = xhr.response;

                        // 手动对数据转换
                        // 通过JSON对象的parse()方法将一个json字符串转换为一个对象
                        // let obj = JSON.parse(xhr.response);
                        // Box.innerHTML = obj.name;
                        // console.log(obj);

                        //自动转换
                        console.log(xhr.response);
                        Box.innerHTML = xhr.response.name;
                    }

                }
            }

        }

服务器端

//1,第一步，引入express包

const express = require('express');

//2，第二步创建应用对象
const app = express();

//3,创建路由规则
// request  是对请求对象报文的封装  即请求对象
//  response  是对响应报文的封装，即响应对象

// 配置路由
// 接收get类型的请求
app.get('/server', (request, response) => {
    // 设置响应头，即请求头，设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    // 设置响应体
    response.send('HELLO AJAX');
})

// 接收post类型的请求
app.post('/server', (request, response) => {
    // 设置响应头，即请求头，设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    // 设置响应体
    response.send('HELLO AJAX');
})

// 接收任意类型的请求
app.all('/json-server', (request, response) => {
    // 设置响应头，即请求头，设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    // 响应一个对象给他
    const data = {
        name:'atguigu'
    }
    // t通过JSON对象的stringify()方法将一个对象转换为json类型的数据
    let str = JSON.stringify(data);
    
    // 设置回复该请求的响应体
    response.send(str);
})

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

IE缓存问题

浏览器端

 // 2,设置请求的类型和要请求的URL地址   发送一个请求参数，
            //将当前时间戳作为参数发送过去，这样浏览器就不会使用本地的缓存了
            xhr.open('GET','http://127.0.0.1:8000/ie?t='+Date.Now());

服务器端

// 4,针对IE缓存问题
app.get('/ie', (request, response) => {
    // 设置响应头，即请求头，设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    // 设置响应体
    response.send('HELLO IE');
})

发送请求超时与网络异常问题

浏览器端

   // 绑定事件 
        btn.addEventListener('click',function(){
            // 4,步骤
            // 1，新建一个ajax的对象
            const xhr = new XMLHttpRequest();
            // 设置延时2s
            xhr.timeout = 2000;
            // 延时回调  即xhr对象发送请求时，延时的时候会调用的函数
            xhr.ontimeout = function(){
                alert('网络异常，请稍后重试！！！');
            }

            // 网络异常回调  发送请求时，出现网络出现异常时，会自动调用的回调函数
            xhr.onerror = function(){
                alert('你的网络似乎出现了一些问题！')
            }



            // 2,设置请求的类型和要请求的URL地址
            xhr.open('GET','http://127.0.0.1:8000/delay')

        })

服务器端

// 5,延时响应
app.get('/delay', (request, response) => {
    // 设置响应头，即请求头，设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    // 设置响应体
    // 定义一个定时器函数
    setTimeout(() => {
            // 设置响应体
        response.send('HELLO err');
    }, 3000);
    
})

取消ajax请求

浏览器端

 btns[1].onclick = function(){
            // 通过ajax对象的abort()方法即可取消点这个发送请求
            x.abort();
        }

重复请求问题

浏览器端

 // 获取元素对象
        const btns = document.querySelectorAll('button');
        // 定义一个变量用来存放ajax对象
        let x = null;
        // 定义一个标识符变量。用来记录发送的状态
        let isSending = false; //  是否正在发送ajax请求

        // 绑定事件
        btns[0].addEventListener('click',function(){
            // 判断发送标识的状态
            if(isSending) {
                x.abort();  //如果正在发送，则取消该请求，然后后面创建一个新的ajax请求
            } 
            x = new XMLHttpRequest();
            // 修改发送请求的状态
            isSending = true; // 表示正在发送请求
            x.open('GET','http://127.0.0.1:8000/delay');
            x.send();
            if(x.readyState === 4){
                // 修改标识符
                isSending = false;  // 表示没有在发送请求，因为已经发送结果
            }
        })

fetch() 函数发送ajax请求

浏览器端

//获取对象
        const btn = document.querySelector('button');

        btn.onclick = function(){
            // 通过fetch函数发送ajax请求
            fetch('http://127.0.0.1:8000/fetch',{

                // 请求方法
                method:'POST',
                // 请求头
                headers:{
                    name:'wotule '
                },
                // 请求体
                body:'username=admin&password=admin'
            }).then(response =>{
                // fetch 函数的返回值也是一个promise异步对象
                // return response.text();
                // 如果服务器返回的是json字符串对象，即使用下面方法
                return response.json();
            }).then(response =>{
                console.log(response);
            })
        }

服务器端

// 6，axios服务响应
app.all('/fetch', (request, response) => {
    // 设置响应头，即请求头，设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    let obj = {
        name:'xiaoai',
        age :18
    }
    response.send(JSON.stringify(obj));
    
})

跨域问题，解决一 jsonp方法，使用script标签

浏览器端

<div id="result"></div>
    <script>
        //处理数据
        function handle(data) {
            //获取 result 元素
            const result = document.getElementById('result');
            result.innerHTML = data.name;
        }
    </script>
    <!-- <script src="http://127.0.0.1:5500/%E8%AF%BE%E5%A0%82/%E4%BB%A3%E7%A0%81/7-%E8%B7%A8%E5%9F%9F/2-JSONP/js/app.js"></script> -->
    <script src="http://127.0.0.1:8000/jsonp-server"></script>

服务器端

//jsonp服务
app.all('/jsonp-server',(request, response) => {
    // response.send('console.log("hello jsonp")');
    const data = {
        name: '尚硅谷atguigu'
    };
    //将数据转化为字符串
    let str = JSON.stringify(data);
    //返回结果  返回的结果要是一个js代码的字符串
    response.end(`handle(${str})`);
});

跨域问题，解决二 ，使用官方的方法CORS

服务器端

app.all('/cors-server', (request, response)=>{
    //设置响应头，加上下面的3行代码即可实现跨域
    response.setHeader("Access-Control-Allow-Origin", "*");   // 表示允许任何URL地址请求
    response.setHeader("Access-Control-Allow-Headers", '*');// 表示允许任何类型的请求头
    response.setHeader("Access-Control-Allow-Method", '*');  // 表示允许任何类型的请求方法
    // response.setHeader("Access-Control-Allow-Origin", "http://127.0.0.1:5500"); // 该行代码表示指定只能该URL地址访问该服务器
    response.send('hello CORS');
});

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。

相关推荐

ajax 上传文件项目下载
IE6是一个非常老旧的网页浏览器，虽然现在很少人再使用它，但是在某些特殊情况下，我们可能还需要使用IE6来访问网页。而在IE6中，我们通常会使用JavaScript来提交表单，来看一下具体操作。
ajax .post()
PHP中的count()函数是用来计算数组或容器中元素的个数。这个函数十分方便，在编写代码时使用频率也非常高。无论你是要统计数组的长度、统计字符串中字符出现的次数还是统计对象中属性的个数，count()都可以帮助你轻松
ajax 不返回值 写法
使用 AJAX（Asynchronous JavaScript and XML）技术可以在不刷新整个页面的情况下，向服务器发送请求并接收响应。通常来说，我们使用 AJAX 请求是为了获取后台数据，并将其展示在前端页面上。然而，有时候我们只需要
ajax 下载文件 blob
Ajax（Asynchronous JavaScript and XML）是一种用于改进网页用户体验的技术，通过与服务器进行异步通信，实现在网页上局部刷新数据而不必整个页面刷新的功能。在实际开发中，我们经常需要从服务器端下载文件，而传统
ajax 下载excel文件流
本文将介绍如何通过AJAX下载Excel文件流。通过AJAX，我们可以在不刷新整个页面的情况下，向服务器发送请求并获取响应数据。在某些场景下，我们需要通过AJAX下载Excel文件流，以便于在前端使用或保存到本地。本文将详
ajax .get .post
Ajax是一种用于客户端和服务器之间的异步通信技术。通过Ajax，我们可以在不刷新整个页面的情况下向服务器发送请求并获得响应数据。而在Ajax的基础上，.get和.post是两种常用的请求方法，它们分别用于发送GET和POST请
ajax 上传 excel
AJAX（Asynchronous JavaScript and XML）是一种在网页上实现异步数据传输的技术。通过AJAX，网页可以在不刷新整个页面的情况下与服务器进行数据交互，提升用户体验和页面性能。在实际应用中，AJAX广泛用于表单提交、
ajax 下拉 360取不到值
在使用Ajax下拉加载数据的过程中，有时候会出现无法取到360度的问题。这个问题可能是由于代码逻辑的问题导致的，也有可能是网络延迟引起的。为了解决这个问题，我们需要对代码进行仔细排查，并且在合适的地方添加适当
ajax 与 .post 区别
本文将介绍Ajax和.post之间的区别。Ajax是一种用于在网页上进行异步通信的技术，能够在不刷新整个页面的情况下更新部分页面内容。.post是jQuery中的一个方法，用于向服务器发送POST请求。虽然它们都可以用于发送异步
ajax 上传文件 目录权限
AJAX（Asynchronous JavaScript and XML）是一种在Web页面上进行异步数据请求和交互的技术。它的出现使得页面在后台与服务器进行数据交互的同时，不需要重新加载整个页面。在网页开发中，常常需要实现文件上传功能，
    pythonJavaScriptjavaHTMLreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-bootreact-native