AJAX基础

最新推荐文章于 2025-06-12 12:09:50 发布
最新推荐文章于 2025-06-12 12:09:50 发布
阅读量366 收藏 7
点赞数 8
文章标签： ajax okhttp 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/2301_79589631/article/details/136535245
版权

一.server

//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 GET');
});

//可以接受任意类型请求
app.all('/server',(request,response)=>{
    //设置响应头 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
    //设置响应头 设置允许自填
    response.setHeader('Access-Control-Allow-Headers','*');
    //设置响应体
    response.send('HELLO AJAX POST');
});

app.all('/json-server',(request,response)=>{
    //设置响应头 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
    //设置响应头 设置允许自填
    response.setHeader('Access-Control-Allow-Headers','*');
    //响应一个数据
    const data = {
        name: 'WuM1ng'
    };
    //对对象进行字符串转换
    let str = JSON.stringify(data);
    //设置响应体
    response.send(str);
});

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

//延时响应
app.all('/delay',(request,response)=>{
    //设置响应头 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
    //设置响应头 设置允许自填
    response.setHeader('Access-Control-Allow-Headers','*');
    //设置定时器
    setTimeout(()=>{
    //设置响应体
    response.send('HELLO Delay');
    },1000)
});

//jQuery 服务
app.all('/jquery-server',(request,response)=>{
    //设置响应头 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
    //设置响应头 设置允许自填
    response.setHeader('Access-Control-Allow-Headers','*');
    // response.send('Hello jQuery AJAX');
    const data = {name: 'WuM1ng'};
    response.send(JSON.stringify(data));
});

//axios 服务
app.all('/axios-server',(request,response)=>{
    //设置响应头 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
    //设置响应头 设置允许自填
    response.setHeader('Access-Control-Allow-Headers','*');
    // response.send('Hello jQuery AJAX');
    const data = {name: 'WuM1ng'};
    response.send(JSON.stringify(data));
});

//fetch 服务
app.all('/fetch-server',(request,response)=>{
    //设置响应头 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
    //设置响应头 设置允许自填
    response.setHeader('Access-Control-Allow-Headers','*');
    // response.send('Hello jQuery AJAX');
    const data = {name: 'WuM1ng'};
    response.send(JSON.stringify(data));
});

//jsonp 服务
app.all('/jsonp-server',(request, response) =>{
    // response.send('console.log("hello jsonp-server")');
    const data = {
        name: 'WuM1ng'
    };
    //将数据转化为字符串
    let str = JSON.stringify(data);
    //返回结果
    response.end(`handle(${str})`);
})

//用户名检测是否存在
app.all('/check-username',(request, response) =>{
    // response.send('console.log("hello jsonp-server")');
    const data = {
        exist: 1,
        msg: '用户名已经存在'
    };
    //将数据转化为字符串
    let str = JSON.stringify(data);
    //返回结果
    response.end(`handle(${str})`);
})

//
app.all('/jquery-jsonp-server',(request, response) =>{
    // response.send('console.log("hello jsonp-server")');
    const data = {
        name:'WuM1ng',
        city:['beijing','shanghai','shenzhen']
    };
    //将数据转化为字符串
    let str = JSON.stringify(data);
    //接收 callback 参数
    let cb = request.query.callback;

    //返回结果
    response.end(`${cb}(${str})`);
});

app.all('/cors-server',(request, response)=>{
    //设置响应头
    response.setHeader("Access-Control-Allow-Origin","*");
    response.setHeader("Access-Control-Allow-Headers","*");
    response.setHeader("Access-Control-Allow-Method","*");
    response.send('hello CORS');
})

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

二.原生AJAX

1-GET

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AJAX GET 请求</title>
    <style>
        #result{
            width: 200px;
            height: 100px;
            border: solid 1px #90b;
        }
    </style>
</head>
<body>
    <button>点击发送请求</button>
    <div id="result"></div>
    <script>
        //获取button元素
        const btn = document.getElementsByTagName('button')[0];
        const result = document.getElementById("result");
        btn.onclick = function(){
            //1. 创建对象
            const xhr = new XMLHttpRequest();
            //2. 初始化
            xhr.open('GET','http://127.0.0.1:8000/server?a=100&b=200&c=300');
            //3. 发送
            xhr.send();
            //4. 事件绑定 处理服务端返回结果
            xhr.onreadystatechange = function(){
                //判断
                if (xhr.readyState === 4 && xhr.status === 200) {
                    // //处理结果
                    // //响应
                    // console.log(xhr.status);//状态码
                    // console.log(xhr.statusText);//状态字符串
                    // console.log(xhr.getAllResponseHeaders());//所有响应头
                    // console.log(xhr.response);//响应体

                    //设置result的文本
                    result.innerHTML = xhr.response;
                }
            }
        }
    </script>
</body>
</html>

2-POST

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AJAX POST 请求</title>
    <style>
        #result{
            width: 200px;
            height: 100px;
            border: solid 1px #903;
        }
    </style>
</head>
<body>
    <div id="result"></div>
    <script>
        //获取元素对象
        const result = document.getElementById("result");
        //绑定事件
        result.addEventListener("mouseover",function(){
            //1. 创建对象
            const xhr = new XMLHttpRequest();
            //2. 初始化设置
            xhr.open('POST','http://127.0.0.1:8000/server');
            //设置请求头
            xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
            xhr.setRequestHeader('name','WuM1ng');
            //3. 发送
            xhr.send('a=100&b=200&c=300');
            //4. 事件绑定
            xhr.onreadystatechange = function(){
                //判断
                if (xhr.readyState === 4 && xhr.status === 200){
                    //处理服务端返回结果
                    result.innerHTML = xhr.response;
                }
            }
        })
    </script>
</body>
</html>

3-JSON

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JSON响应</title>
    <style>
        #result{
            width: 200px;
            height: 100px;
            border: solid 1px #89b;
        }
    </style>
</head>
<body>
    <div id="result"></div>
    <script>
        const result = document.getElementById('result');
        //绑定键盘按下事件
        window.onkeydown = function(){
            //发送请求
            const xhr = new XMLHttpRequest();
            //设置响应体数据的类型
            xhr.responseType = 'json';
            //初始化
            xhr.open('GET','http://127.0.0.1:8000/json-server');
            //发送
            xhr.send();
            //事件绑定
            xhr.onreadystatechange = function(){
                if (xhr.readyState === 4 && xhr.status === 200){
                    //处理服务端返回结果
                    // console.log(xhr.response);
                    // result.innerHTML = xhr.response;
                    //手动对数据进行转化
                    // let data = JSON.parse(xhr.response);
                    // console.log(data);
                    // result.innerHTML = data.name;
                    //自动对数据转化
                    console.log(xhr.response);
                    result.innerHTML = xhr.response.name;
                }
            }
        }
    </script>
</body>
</html>

4-IE CACHING

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>IE CACHING</title>
    <style>
        #result{
            width: 200px;
            height: 100px;
            border: solid 1px #258;
        }
    </style>
</head>
<body>
    <button>点击发送请求</button>
    <div id="result"></div>
    <script>
        const btn = document.getElementsByTagName('button')[0];
        const result = document.querySelector('#result');
        btn.addEventListener('click',function(){
            const xhr = new XMLHttpRequest();
            xhr.open('GET','http://127.0.0.1:8000/ie?t='+Date.now());
            xhr.send();
            xhr.onreadystatechange = function(){
                if (xhr.readyState === 4 && xhr.status === 200){
                    result.innerHTML = xhr.response;
                }
            }
        })
    </script>
</body>
</html>

5-超时与网络异常

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>请求超时与网络异常</title>
    <style>
        #result{
            width: 200px;
            height: 100px;
            border: solid 1px #90b;
        }
    </style>
</head>
<body>
    <button>点击发送请求</button>
    <div id="result"></div>
    <script>
        const btn = document.getElementsByTagName('button')[0];
        const result = document.querySelector('#result');

        btn.addEventListener('click',function(){
            const xhr = new XMLHttpRequest();
            //超时设置
            xhr.timeout = 2000;
            //超时回调
            xhr.ontimeout = function(){
                alert("网络异常请稍后重试!");
            }
            //网络异常回调
            xhr.onerror = function(){
                alert("网络出现问题!");
            }
            xhr.open('GET','http://127.0.0.1:8000/delay');
            xhr.send();
            xhr.onreadystatechange = function(){
                if (xhr.readyState === 4 && xhr.status === 200){
                    result.innerHTML = xhr.response;
                }
            }
        })
    </script>
</body>
</html>

6-取消请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>取消请求</title>
</head>
<body>
    <button>点击发送</button>
    <button>点击取消</button>
    <script>
        //获取元素对象
        const btns = document.querySelectorAll('button');
        let x = null;
        btns[0].onclick = function(){
            x = new XMLHttpRequest();
            x.open('GET','http://127.0.0.1:8000/delay');
            x.send();
        }
        // abort方法
        btns[1].onclick = function(){
            x.abort();
        }
    </script>
</body>
</html>

7-重复请求问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>重复请求问题</title>
</head>
<body>
    <button>点击发送</button>
    <script>
        //获取元素对象
        const btns = document.querySelectorAll('button');
        let x = null;
        //标识变量
        let isSending = false;//  是否正在发送AJAX请求

        btns[0].onclick = function(){
            //判断标识变量
            if(isSending) x.abort();//如果正在发送，就取消并创建新请求
            x = new XMLHttpRequest();
            //修改表示变量的值
            isSending = true;
            x.open('GET','http://127.0.0.1:8000/delay');
            x.send();
            x.onreadystatechange = function(){
                if(x.readyState === 4){
                    //修改标识变量
                    isSending = false;
                }
            }
        }
    </script>
</body>
</html>

三.jQuery-AJAX

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery 发送 AJAX 请求</title>
    <link crossorigin="anonymous" href="">
    <script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
    <div class="container">
        <h2 class="page-header">jQuery发送AJAX请求</h2>
        <button class="btn btn-primary">GET</button>
        <button class="btn btn-danger">POST</button>
        <button class="btn btn-info">通用性方法ajax</button>
    </div>
    <script>
        $('button').eq(0).click(function(){
            $.get('http://127.0.0.1:8000/jquery-server',{a:100,b:200},function(data){
                console.log(data);
            },'json');
        })
        $('button').eq(1).click(function(){
            $.post('http://127.0.0.1:8000/jquery-server',{a:100,b:200},function(data){
                console.log(data);
            });
        })
        $('button').eq(2).click(function(){
            $.ajax({
                //url
                url: 'http://127.0.0.1:8000/jquery-server',
                //参数
                data: {a:100,b:200},
                //请求类型
                type: 'GET',
                //响应体结果
                dataType: 'json',
                //成功的回调
                success: function(data){
                    console.log(data);
                },
                //超时时间
                timeout: 2000,
                //失败的回调
                error: function(){
                    console.log('出错了!');
                },
                //头信息设置
                headers: {
                    c:300,
                    d:400
                },
            })
        })
    </script>
</body>
</html>

四.axios-AJAX

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>axios 发送 AJAX请求</title>
    <script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/axios/1.5.0/axios.js"></script>
</head>
<body>
    <button>GET</button>
    <button>POST</button>
    <button>AJAX</button>
    <script>
        const btns = document.querySelectorAll('button');
        //配置 baseURL
        axios.defaults.baseURL = 'http://127.0.0.1:8000';
        btns[0].onclick = function(){
            //GET 请求
            axios.get('/axios-server',{
                //url 参数
                params: {
                    id:100,
                    vip:7
                },
                // 请求头信息
                headers: {
                    name:'WuM1ng',
                    age:19
                }
            }).then(value =>{
                console.log(value);
            });       
        }
        btns[1].onclick = function(){
            axios.post('/axios-server', 
                    //请求体
                    {
                    username:'admin',
                    password:'admin'
                },{
                //url
                params: {
                    id: 200,
                    vip: 9
                },
                //请求头参数
                headers: {
                    height:180,
                    weight:180,
                }
            });
        }
        btns[2].onclick = function(){
            axios({
                //请求方法
                method: 'POST',
                //url
                url: '/axios-server',
                //url参数
                params: {
                    vip:10,
                    level:30
                },
                //头信息
                headers: {
                    a:100,
                    b:200
                },
                data: {
                    username: 'admin',
                    password: 'admin',
                }
            }).then(response=>{
                console.log(response);
                //响应状态码
                console.log(response.status);
                //响应状态字符串
                console.log(response.statusText);
                //响应头信息
                console.log(response.headers);
                //响应体
                console.log(response.data);
            })
        }
    </script>
</body>
</html>

五.fetch-AJAX

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>fetch 发送 AJAX请求</title>
</head>
<body>
    <button>AJAX请求</button>
    <script>
        const btn = document.querySelector('button');
        btn.onclick = function(){
            fetch('http://127.0.0.1:8000/fetch-server?vip=10',{
                //请求方法
                method: 'POST',
                //请求头
                headers: {
                    name:'WuM1ng'
                },
                //请求体
                body: 'username=admin&password=admin'
            }).then(response => {
                // return response.text();
                return response.json();
            }).then(response =>  {
                console.log(response);
            });
        }
    </script>
</body>
</html>

六.跨域

1-同源策略

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
</head>
<body>
    <h1>WuM1ng</h1>
    <button>点击获取用户数据</button>
    <script>
        const btn = document.querySelector('button');
        btn.onclick = function(){
            const x = new XMLHttpRequest();
            //满足同源策略,url可以简写
            x.open("GET",'/data');
            //发送
            x.send();
            //判断
            x.onreadystatechange = function(){
                if (x.readyState === 4 && x.status === 200){
                    console.log(x.response);
                }
            }
        }
    </script>
</body>
</html>
const express = require('express');
const app = express();
app.get('/home',(request,response)=>{
    //响应一个页面
    response.sendFile(__dirname + '/index.html');
});

app.get('/data',(request,response)=>{
    response.send('用户数据');
});

app.listen(9000, ()=>{
    console.log("服务已经启动")
})

2-JSONP

const data = {
    name: 'WuM1ng'
};

handle(data);

1.原理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>原理演示</title>
    <style>
        #result{
            width: 300px;
            height: 100px;
            border: solid 1px #78a;
        }
    </style>
</head>
<body>
    <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/code/05.%E8%B7%A8%E5%9F%9F/2-JSONP/js/app.js"></script> -->
    <script src="http://127.0.0.1:8000/jsonp-server"></script>
</body>
</html>

2.JSONP实践

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>案例</title>
</head>
<body>
    用户名: <input type="text" id="username">
    <p></p>
    <script>
        //获取input元素
        const input = document.querySelector('input');
        const p = document.querySelector('p');
        //声明 handle 函数
        function handle(data){
            input.style.border = "soild 1px #f00";
            //修改 p 标签提示文本
            p.innerHTML = data.msg;
        }
        //绑定事件
        input.onblur = function(){
            //获取用户输入值
            let username = this.value;
            //向服务端发送请求 检测用户名是否存在
            //1. 创建 script 标签
            const script = document.createElement('script');
            //2. 设置标签 src 属性
            script.src = 'http://127.0.0.1:8000/check-username';
            //3. 将 script 插入到文档中
            document.body.appendChild(script);
        }
    </script>
</body>
</html>

3.jQuery-jsonp

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery-jsonp</title>
    <style>
        #result{
            width: 300px;
            height: 100px;
            border: solid 1px #089;
        }
    </style>
    <script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
</head>
<body>
    <button>点击发送 jsonp 请求</button>
    <div id="result"></div>
    <script>
        $('button').eq(0).click(function(){
            $.getJSON('http://127.0.0.1:8000/jquery-jsonp-server?callback=?',function(data){
                $('#result').html(`
                    名称: ${data.name},
                    校区: ${data.city}
                `)
            });
        });
    </script>
</body>
</html>

3-CORS

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CORS</title>
    <style>
        #result{
            width: 200px;
            height: 100px;
            border: solid 1px #90b;
        }
    </style>
</head>
<body>
    <button>发送请求</button>
    <div id="result"></div>
    <script>
        const btn = document.querySelector('button');
        btn.onclick = function(){
            //1.创建对象
            const x = new XMLHttpRequest();
            //2.初始化设置
            x.open("GET","http://127.0.0.1:8000/cors-server");
            //3.发送
            x.send();
            //4.绑定事件
            x.onreadystatechange = function(){
                if (x.readyState === 4 && x.status === 200){
                    console.log(x.response);
                }
            }
        }
    </script>
</body>
</html>

Wu-M1ng
关注
Ajax 基础
流楚丶格念的博客
01-26 4961
AJAX基础1. 概述2. 快速上手2.1. readyState2.1.1. 时间轴2.2. 遵循 HTTP 1. 概述 Web 程序最初的目的就是将信息（数据）放到公共的服务器，让所有网络用户都可以通过浏览器访问。 在此之前，我们可以通过以下几种方式让浏览器发出对服务端的请求，获得服务端的数据： 地址栏输入地址，回车，刷新特定元素的 href 或 src 属性表单提交 这些方案都是我们无法通过或者很难通过代码的方式进行编程（对服务端发出请求并且接受服务端返回的响应），如果我们可以通过 JavaScrip
ajax基础
sandy_star
07-18 913
Ajax基础 一、什么是ajax？ 简单来说，ajax相当于浏览器发送请求与接收响应的代理人，以实现在不影响用户浏览页面的情况下，局部刷新页面数据，从而提高用户体验。 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yZJSkcRh-1595061406434)(C:\Users\sandy燕\AppData\Roaming\Typora\typora-user-images\image-20200718113314646.png)] 二、ajax的实现步骤 1.创建ajax对
AJAX基础知识
是程序喵呀
07-23 1177
​ 异步的 JS 和 xml(EXtensibleMarkupLanguage)​ 通过 JS 异步的向服务器发送请求并接收响应数据​ 同步访问：​ 当客户端向服务器发送请求时，服务器在处理的过程中，浏览器只能等待，效率较低​ 异步访问：​ 当客户端向服务器发送请求时，服务器在处理的过程中，客户端可以做其他的操作，不需要一直等待​ AJAX优点：​ 1.异步访问​ 2.局部刷新​ 使用场合：​ 1.搜索建议。
Ajax基础
weixin_47672177的博客
09-26 8225
Ajax是什么？服务器是什么？如何实现前后端数据交互？实际开发中，网页的数据需要从服务器获取。而Ajax技术就是来实现这一功能的。
Ajax基础知识
qq_45359288的博客
04-08 1189
目录一. 原生AjaxAjax简介XML 简介AJAX 的特点二. HTTP相关问题HTTP 请求报文HTTP 响应报文常见的响应状态码不同类型的请求及其作用区别 一般http请求 与 ajax请求三. 原生AJAX 的基本使用 XHR1. 准备工作1.1 安装Node.js1.2 安装express2. 运行原理及实现2.1 Ajax实现步骤2.2 服务器端响应的数据格式2.3 请求参数传递 一. 原生Ajax Ajax简介 AJAX 全称为Asynchronous JavaScript And
Ajax基础入门
weixin_67318211的博客
04-03 729
1.什么是Ajax技术？ AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），AJAX不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的独立的 Web 应用程序的技术。 通过在浏览器与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行局部更新。 2.为什么要采用Ajax技术（优缺点） 使用Ajax的最大优点，就是能在不更新整个页面的前提下和服务器进行数据交互。这使得W
Ajax基础详解
2403_87566238的博客
02-24 1175
定义：发送请求后，无需等待响应即可继续执行其他任务。响应通过回调函数、事件监听等方式处理。同步交互与异步交互的区别在于同步交互需要等待结果，而异步交互不需要等待。客户端向服务器端发送请求，必须等待结果返回，才能向服务器端发送下一次请求。说明：异步交互就是第二次请求不需要等待第一次请求结束之后就可以开始。优点：支持高效并发处理提高资源利用率提升用户体验，减少等待时间缺点：实现相对复杂错误处理较为困难增加开发和维护成本。
Ajax基础教程
hero_th的博客
12-19 2322
Ajax的实现步骤 1.创建Ajax对象 var xhr = new XMLHttpRequest(); 2.告诉Ajax请求地址以及请求方式 xhr.open('get','http://www.example.com'); 3.发送请求 xhr.send(); 4.获取服务器端给与客户端的相应数据 xhr.onload = function () { console.log (xhr.responseText); } 5.example <script type=" text/ja
AJAX基础 项目实战
gegejiawei的博客
06-18 1690
项目一：二级联动菜单实现 jQuery对ajax的支持 1、jQuery对ajax进行封装，提供了$.ajax(); 2、语法：$.ajax(options); – 传入json对象 常用设置项及说明 1、url 发送请求地址 2、type 请求类型get | post 3、data 向服务器传递的参数 4、dataType 服务器响应的数据类型 text | json | xml | HTML | jsonp | scri
14ajax课程_AJAX基础_
10-02
**AJAX基础详解** 在现代Web开发中，AJAX（Asynchronous JavaScript and XML）是一种核心技术，它使得网页能够实现异步数据交换，无需刷新整个页面即可更新部分内容。本教程将深入探讨AJAX的基础知识，帮助你理解其...
ajax 基础
06-30
以下是对Ajax基础知识的详细阐述： 1. **工作原理** - Ajax 的核心是 XMLHttpRequest 对象，它允许JavaScript在后台与服务器通信，而不会打断用户的交互。 - 一个典型的Ajax流程包括创建XMLHttpRequest对象、打开...
Ajax基础教程（扫描版）
01-10
原书名：Foundations of Ajax 原出版社： Apress 作者： （美）Ryan Asleson,Nathaniel T.Schutta 译者： 金灵 等 丛书名： 图灵程序设计丛书 出版社：人民邮电出版社 ISBN：7115144818 上架时间：2006-2-14 ...
Ajax基础教程之封装(三)
10-22
在本篇“Ajax基础教程之封装(三)”中，我们将探讨如何将常见的Ajax请求进行封装，以便在多个地方重用代码并提高效率。Ajax（Asynchronous JavaScript and XML）是一种在不刷新整个页面的情况下与服务器交换数据并...
JS手写代码篇---手写ajax
2403_88913721的博客
06-08 423
AJAX请求允许网页异步获取服务器数据而不刷新整个页面。实现步骤包括：创建XMLHttpRequest对象，设置超时和回调函数，监听请求状态，处理网络/超时错误，设置请求头和响应类型后发送请求。示例代码展示了完整的AJAX实现流程：定义成功/失败回调，检查HTTP状态码，处理响应数据或错误信息。该方法通过异步通信提升了用户体验，避免了页面重载。
【在线五子棋对战】五、前端扫盲：html && css && javascript && ajax && jquery && websocket
lirendada的博客
06-12 640
HTML基础知识点摘要 HTML是网页开发的基础语言，由标签构成。常见标签包括： 基础结构标签：html、head、body、title 文本标签：h1-h6标题、p段落、br换行、b/i/u/s格式化文本 媒体标签：img图片（src必填）、a超链接（href必填） 布局标签：table表格、ul/ol列表 表单标签：form表单域、input输入控件（文本框、密码框、单选框、复选框等） 标签间存在父子或兄弟关系，形成DOM树结构。表单是用户输入的主要途径，包含表单域和控件。HTML标签可通过属性设置样式
JSON 与 AJAX
Auscy的博客
06-12 594
本文系统介绍了JSON与AJAX的核心技术与高级应用。JSON部分详解了语法规范、数据类型、与JS对象的区别，以及循环引用处理和大数据解析方案。AJAX部分对比了XHR与Fetch API的差异，展示了Axios拦截器等进阶用法，并提供了复杂数据交互、性能优化和安全防护的实践方案。文章还探讨了JSON5/BSON等新技术、GraphQL等替代方案，以及WebAssembly结合应用场景，最后总结了面试高频问题和生产环境最佳实践，为开发者构建高效Web应用提供了全面指导。
ajax访问阿里云天气接口，获取7天天气
最新发布
一只想成为斗战圣佛的小猴子
06-12 252
'Authorization': "APPCODE c63ddd9d9f404df1913593131ff84a67",// 将'你的API密钥'替换为实际的API密钥。'X-Requested-With': 'XMLHttpRequest' //跨域。// 处理返回的数据。type: 'GET', // 或者 'POST'，根据API要求。dataType: 'json', // 预期服务器返回的数据类型。alert("暂时无法获取天气数据")// 请求成功时的回调函数。// 请求失败时的回调函数。
OkHttp 中实现断点续传 demo
wulong756273的博客
06-10 327
OkHttp实现断点续传的核心是通过HTTP Range请求头指定下载范围。主要步骤包括：1)获取已下载字节数；2)创建带Range头的请求；3)检查服务器是否支持断点续传(206状态码)；4)使用RandomAccessFile从断点追加写入文件；5)实时更新下载进度。关键点在于处理Range请求、文件随机访问和进度跟踪，需注意服务器支持检查和异常处理。该方案可有效提升大文件下载体验，支持网络中断后自动恢复。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值