AJAX学习笔记

已于 2022-07-03 17:08:49 修改
阅读量377 收藏 1
点赞数
分类专栏： 学习心得 文章标签： ajax
于 2022-07-02 20:49:49 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_57927801/article/details/125570332
版权

目录

1.AJAX-HTTP协议请求报文与响应文本结构

请求报文

响应报文

在chrome查看请求响应报文

 2.node.js下载和使用

3.express框架下载和使用

 4.原生ajax简单交互

 POST方法

请求头设置

 JSON响应

5.nodemon自动重启工具安装

 6.IE缓存问题

7.延时和网络异常

 8.手动取消请求

9.重复请求

目录

1.AJAX-HTTP协议请求报文与响应文本结构

请求报文

响应报文

在chrome查看请求响应报文

 2.node.js下载和使用

3.express框架下载和使用

 4.原生ajax简单交互

 POST方法

请求头设置

 JSON响应

5.nodemon自动重启工具安装

 6.IE缓存问题

7.延时和网络异常

 8.手动取消请求

9.重复请求

10.jquary中的ajax请求

1.AJAX-HTTP协议请求报文与响应文本结构

请求报文

行 POST /s?ie=utf-8 HTTP/1.1
头 host: xxx.com
    cookie: name=xxx
    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
空行
体 <html>
        <head>
        </head>
        <body>
            <h1>体</h1>
        </body>
    </html>

在chrome查看请求响应报文

请求头：

⭐ 点击view source查看请求行

响应头：

 2.node.js下载和使用

1.打开网站nodejs.cn之后选择对应的系统进行下载

安装简单不做赘述

2.检查是否安装完成

打开cmd输入node -v查看

3.express框架下载和使用

1.初始化nodejs

npm init --yes

2.安装express框架

npm i express

⭐安装在项目目录下，否则会报错

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端口监听中。。。");
});

⭐释放端口只需要在上图的终端下按ctrl+c即可

4.打开浏览器输入你的ip地址:8000即可查看结果

 4.原生ajax简单交互

 1.创建get.html文件

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ajax get 请求</title>
    <style>
        #result {
            width: 200px;
            height: 100px;
            border: 1px solid rgb(60, 0, 255);
        }
    </style>
</head>

<body>
    <button>点击发送请求</button>
    <div id="result">

    </div>
</body>

</html>

2.创建server.js文件

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

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

//3.创建路由规则 request, response都是形参 '/server'表示显示在url上的参数
app.get('/server', (request, response) => {
    //设置响应头 【设置允许跨域】
    response.setHeader('Access-Control-Allow-Origin', '*');
    //设置响应
    response.send('HELLO AJAX');
});

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

3.打开带/server参数的网站

4.响应头显示

 5.在html文件添加点击事件查看状态

<script>
        //获取button元素
        const btn = document.getElementsByTagName('button')[0];
        //绑定事件
        btn.onclick = function () {
            //1.创建对象
            const xhr = new XMLHttpRequest();
            //2.初始化 设置请求的方法和url
            xhr.open('GET', 'http://localhost:8000/server');
            //3.发送
            xhr.send();
            //4.事件绑定
            /*
            on 当...的时候
            readystate 是xhr对象中的一个属性，表示状态 0 1 2 3 4 4表示加载完成可以调用
            change改变
            */
            xhr.onreadystatechange = function () {
                //判断
                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);//响应体
                    }
                }
            }
        }
    </script>

 在上面判断文档状态和状态码之后--添加代码响应点击之后的事件

//设置result的文本
result.innerHTML = xhr.response;

 POST方法

1.创建一个post文件

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ajax post 请求</title>
    <style>
        #result {
            width: 200px;
            height: 100px;
            border: 1px solid rgb(1, 64, 255);
        }
    </style>
</head>

<body>
    <div id="result">

    </div>
    <script>
        //1.创建元素对象
        const result = document.getElementById('result');
        //2.绑定事件
        result.addEventListener("mouseover", function () {
            //1.创建对象
            const xhr = new XMLHttpRequest();
            //2.初始化 设置类型和url
            xhr.open('POST', 'http://localhost:8000/server');
            //3.发送
            xhr.send();
            //4.事件绑定
            xhr.onreadystatechange = function () {
                //判断
                if (xhr.readyState === 4) {
                    //判断状态码
                    if (xhr.status >= 200 && xhr.status < 300) {
                        result.innerHTML = xhr.response;
                    }
                }
            }
        })
    </script>
</body>

</html>

2.在server文件中加上

app.post('/server', (request, response) => {
    //设置响应头 【设置允许跨域】
    response.setHeader('Access-Control-Allow-Origin', '*');
    //设置响应体
    response.send('HELLO AJAX post');
});

注意：加完之后要重启端口

3.传递参数给服务器部分形式

⭐参数可以任意形式，只要服务端可以对数据进行处理

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

请求头设置

在open方法之后输入

4.1预定义请求头

//设置请求头
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');

4.2自定义请求头

xhr.setRequestHeader('name', 'zhougongjin');

出现错误！！！

 解决方法1：在后端中设置响应头

//设置响应头，防止自定义请求头出错
 response.setHeader('Access-Control-Allow-Headers', '*');

解决方法2：直接接受全部的请求方法

app.all('/server', (request, response) => {
    //设置响应头 【设置允许跨域】
    response.setHeader('Access-Control-Allow-Origin', '*');
    //设置响应头，防止自定义请求头出错
    response.setHeader('Access-Control-Allow-Headers', '*');
    //设置响应体
    response.send('HELLO AJAX post');
});

 JSON响应

简易版：

app.all('/json-server', (request, response) => {
    //设置响应头 【设置允许跨域】
    response.setHeader('Access-Control-Allow-Origin', '*');
    //响应一个数据
    const data = {
        name: 'zhougongjin'
    }
    //对象字符串转换
    let str = JSON.stringify(data);
    //设置响应头，防止自定义请求头出错
    //response.setHeader('Access-Control-Allow-Headers', '*');
    //设置响应体
    response.send(str);
});

进阶版：

1.手动对数据进行处理

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JSON响应</title>
    <style>
        #result {
            width: 200px;
            height: 100px;
            border: 1px solid rgb(1, 64, 255);
        }
    </style>
</head>

<body>
    <div id="result"></div>
    <script>
        //创建对象
        const result = document.getElementById('result');
        //绑定事件
        window.onkeydown = function () {
            //发送请求
            const xhr = new XMLHttpRequest();
            //初始化
            xhr.open('GET', 'http://localhost:8000/json-server');
            //发送
            xhr.send();
            //事件绑定
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status >= 200 && xhr.status < 300) {
                        //手动转换
                        let data = JSON.parse(xhr.response);
                        result.innerHTML = data.name;
                    }
                }
            }
        }
    </script>
</body>

</html>

2.自动数据转换

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JSON响应</title>
    <style>
        #result {
            width: 200px;
            height: 100px;
            border: 1px solid rgb(1, 64, 255);
        }
    </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://localhost:8000/json-server');
            //发送
            xhr.send();
            //事件绑定
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status >= 200 && xhr.status < 300) {
                        //自动转换
                        console.log(xhr.response);
                        result.innerHTML = xhr.response.name;
                    }
                }
            }
        }
    </script>
</body>

</html>

5.nodemon自动重启工具安装

在终端输入

npm install -g nodemon

启动方式

nodemon 文件名.js

 

 6.IE缓存问题

服务端数据改变，IE进行了本地缓存，没能实现数据的实时变化

解决方法：

//发送请求
 xhr.open('GET', 'http://localhost:8000/ie?t=' + Date.now());

通过获取当前事件的时间戳，实时获取数据

修改serve.js文件

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

7.延时和网络异常

超时处理回调函数

serve.js模拟延时效果：

//延时响应
app.get('/delay', (request, response) => {
    //设置响应头 【设置允许跨域】
    response.setHeader('Access-Control-Allow-Origin', '*');
    //设置延时
    setTimeout(() => {
        //设置响应体
        response.send('延时响应');
    }, 3000)

});

html实现代码：

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>延时和网络异常</title>
    <style>
        #result {
            width: 200px;
            height: 100px;
            border: 1px solid #0509ee;
        }
    </style>
</head>

<body>
    <button>点击发送请求</button>
    <div id="result"></div>
    <script>
        //创建对象
        const btn = document.getElementsByTagName('button')[0];
        const result = document.getElementById('result');
        //点击事件
        // btn.onclick = function () {
        btn.addEventListener('click', function () {
            //创建新对象
            const xhr = new XMLHttpRequest();
            //超时设置2s之后取消请求
            xhr.timeout = 2000;
            //超时回调
            xhr.ontimeout = function () {
                alert("网络异常，请稍后重试！！")
            }
            //网络异常回调
            xhr.onerror = function () {
                alert("你的网络不可用，请检查之后再访问！！")
            }
            //发送请求
            xhr.open('GET', 'http://localhost:8000/delay');
            //发送
            xhr.send();
            //事件绑定
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status >= 200 && xhr.status < 300) {
                        result.innerHTML = xhr.response;
                    }
                }
            }
        })
    </script>
</body>

</html>

网络异常模拟要使用chrome的调试：

 效果：

 8.手动取消请求

html代码实现【引用了上一节的delay】

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <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 xhr = null;

        btns[0].onclick = function () {
            xhr = new XMLHttpRequest();
            xhr.open('GET', 'http://localhost:8000/delay');
            xhr.send();
        }
        btns[1].onclick = function () {
            xhr.abort();
        }
    </script>
</body>

</html>

9.重复请求

 html代码

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>重复请求</title>
</head>

<body>
    <button>点击发送</button>
    <script>
        //获取元素对象
        const btns = document.querySelectorAll('button');
        let xhr = null;

        //标识变量
        let issending = false; // 是否正在发送AJAX请求

        btns[0].onclick = function () {
            //判断标识变量
            if (issending) { xhr.abort() };
            xhr = new XMLHttpRequest();
            //修改标识变量值
            issending = true;
            xhr.open('GET', 'http://localhost:8000/delay');
            xhr.send();
            //文档状态为4的时候
            xhr.onreadystatechange = function () {
                if (xhr.readystate === 4) {
                    //修改标识变量值
                    issending = false;
                }
            }
        }
    </script>
</body>

</html>

10.jquary中的ajax请求

在serve.js中设置一个all请求

//JQUARY中ajax请求
app.all('/jquary-server', (request, response) => {
    //设置响应头 【设置允许跨域】
    response.setHeader('Access-Control-Allow-Origin', '*');
    const data = { name: '周公瑾' };
    //设置响应体
    // response.send('HELLO jquary ajax');
    response.send(JSON.stringify(data));
});

创建一个jquary-ajax请求.html文件

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link crossorigin="anonymous" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css"
        rel="stylesheet">
    <script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <title>JQUARY-AJAX请求应用</title>
</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://localhost:8000/jquary-server', { a: 100, b: 200 }, function (data) {
                console.log(data);
            }, 'json');
        })
        $('button').eq(1).click(function () {
            $.post('http://localhost:8000/jquary-server', { a: 100, b: 200 }, function (data) {
                console.log(data);
            });
        })
    </script>
</body>

</html>

在服务端转换数据之后在前端定义数据显示类型的差异

GET直接把参数显示在url上，POST要在payload中查看

 

 ⭐jquary中通用请求方法

$('button').eq(2).click(function () {
            $.ajax({
                //url
                url: 'http://localhost:8000/jquary-server',
                //参数
                data: { a: 100, b: 200 },
                //请求类型
                type: 'GET',
                //成功之后回调
                success: function (data) {
                    console.log(data);
                }
            }
            );
        })
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link crossorigin="anonymous" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css"
        rel="stylesheet">
    <script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <title>JQUARY-AJAX请求应用</title>
</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://localhost:8000/jquary-server', { a: 100, b: 200 }, function (data) {
                console.log(data);
            }, 'json');
        })
        $('button').eq(1).click(function () {
            $.post('http://localhost:8000/jquary-server', { a: 100, b: 200 }, function (data) {
                console.log(data);
            });
        })
        $('button').eq(2).click(function () {
            $.ajax({
                //url
                // 超时测试
                // url: 'http://localhost:8000/delay',
                url: 'http://localhost:8000/jquary-server',
                //参数
                data: { a: 100, b: 200 },
                //请求类型
                type: 'GET',
                //响应体结果
                dataType: 'json',
                //成功之后回调
                success: function (data) {
                    console.log(data);
                },
                //超时时间
                timeout: 2000,
                //失败的回调
                error: function () {
                    console.log('出错拉！！！');
                }
            }
            );
        })
    </script>
</body>

</html>

AXIOS中的请求方法

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.0.0-alpha.1/axios.js"></script>
    <title>axios发送请求</title>
</head>

<body>
    <button>GET</button><button>POST</button><button>AJAX</button>
    <script>
        const btns = document.querySelectorAll('button');
        //配置baseurl
        axios.defaults.baseURL = 'http://localhost:8000';
        //点击事件绑定
        btns[0].onclick = function () {
            //get请求
            axios.get('/axios-server', {
                //url参数
                params: {
                    id: 100,
                    vip: 10
                },
                //请求头信息
                Headers: {
                    name: '周公瑾',
                    age: 20
                }
            }).then(value => {
                console.log(value);
            })
        }
    </script>
</body>

</html>
//axios
app.all('/axios-server', (request, response) => {
    //设置响应头 【设置允许跨域】
    response.setHeader('Access-Control-Allow-Origin', '*');
    const data = { name: '周公瑾' };
    //设置响应体
    // response.send('HELLO jquary ajax');
    response.send(JSON.stringify(data));
});

 

大学森小白
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
ajax学习笔记
11-30
ajax学习笔记。。。。。。。。。。。。。。。。。。。。。。
Ajax学习：设置CROS响应头实现跨域（跨域资源共享）
weixin_47295886的博客
12-02 1750
Access-Control-Max-Age：预请求结果缓存。Access-Control-Allow-Headers：设置头信息（自定义头不允许 所以需要在响应前接收的任意请求头）Access-Control-Allow-Credentials: 跨域请求时候，是否允许携带验证信息（cookie）Access-Control-Expose-Headers：暴露头部信息，客户端同意的哪些头可以暴露。Access-Control-Allow-Methods：设置请求允许的方法。http和http不需要。
Ajax学习：Ajax设置请求头信息
weixin_47295886的博客
11-28 9126
设置请求头部分：前端工作人员setRequestHeader设置请求头信息，一般将身份校验的信息放在头信息中，传递给服务器，服务器的对参数进行提取，对用户的身份做校验。这时候会预检请求会校验 前端会再发一个请求 所以post接收不了 需要变成all。可以在服务器端使用Access-Control-Allow-Headers。会报错 ，因为不是预定义的请求头 ，浏览器有安全机制。请求报文的：请求行可以设置，请求体可以设置。下面是设置请求头信息。
ajax请求携带自定义请求头header（跨域和同域）
爱吃红豆的猫
03-15 6738
1.ajax请求时是不会自动带上cookie的，要是想让他带上的话，必须设置withCredential为true。
AJAX的跨域问题使用设置响应头和JsonP的方式实现跨域------AJAX
春风若有怜花意，可否许我再少年
11-18 313
AJAX的跨域问题使用设置响应头和JsonP的方式实现跨域------AJAX
【Ajax】笔记-设置CORS响应头实现跨域
德仔
08-01 701
CORS(Cross-Origin Resource Sharing),跨域资源共享。CORS是官方的跨域解决方案，它的特点是不需要在客户端做任何特殊的操作，完全在服务器中进行处理，支持get和post请求。跨域资源共享标准新增了一组HTTP首部字段，允许服务器声明哪些源站通过浏览器有权限访问哪些资源。CORS是通过设置一个响应头来告诉浏览器，该请求允许跨域，浏览器收到该响应以后就会对响应放行。//2. 初始化设置。
Ajax学习笔记整理
10-22
Ajax: Asynchronous JavaScript and Xml , 异步js脚本和xml , 常用来实现页面局部的异步刷新, 对提高用户体验有很大帮助. Xml在多语言时较有优势, 但Ajax技术实际上较多采用Json对象而不是Xml来处理数据
jquery中ajax学习笔记4
10-28
### jQuery中Ajax学习笔记4：缓存问题与中文问题详解 #### 缓存问题解析 在Web开发过程中，经常会遇到浏览器缓存导致的数据更新问题。本文档将详细讲解如何识别和解决缓存问题。 ##### 什么是缓存问题？ 缓存...
jQuery+AJAX学习笔记
10-10
jQuery+AJAX学习笔记
Ajax学习笔记
11-15
### Ajax学习笔记精要 #### 一、Ajax概述 ##### 1.1 什么是Ajax？ Ajax，全称为Asynchronous JavaScript and XML（异步的JavaScript和XML），是一种用于改善网页应用性能的技术。它允许网页在无需重新加载整个...
16ajax学习笔记1
08-08
在本篇16ajax学习笔记1中，我们将探讨Ajax的基础概念、使用方法以及jQuery库中的Ajax实现。 1、发送请求： Ajax的首要任务是创建XMLHttpRequest对象，这是浏览器提供的API。在JavaScript中，我们可以通过new ...
jquery中ajax学习笔记3
10-28
由于很多知识都已经做了详细介绍，本节只介绍需要修改的代码，使用jqery封装的ajax使用XML格式接收服务器端的数据，web.xml、后台的servet都不用改
AJAX学习笔记.docx
08-01
AJAX（Asynchronous JavaScript and XML）是Web开发中的一种核心技术，它使得网页可以在不刷新整个页面的情况下与服务器进行异步通信，从而实现内容的动态更新。这一技术的出现极大地提升了用户体验，因为它避免了...
AJax 学习笔记一(XMLHTTPRequest对象)
10-29
今天学习了点关于XMLHttpRequest对象的一些方法和属性，有点体会，在这里也想记录起来。
Ajax学习笔记个人总结
09-12
根据个人学习Ajax的过程总结，整理了Ajax相关基础知识点，对Ajax的使用有较详细的介绍，通过个别举例，可以快速了解Ajax的功能，比较适合初学者入门。
2、原生AJAX
weixin_49931650的博客
05-22 1158
前文：我会先讲一些要点，后面附带源码【记得启动服务】 <style> #result { width: 200px; height: 100px; border: solid 1px #90b; } </style> 1、GET请求 ********************************** ajax *************************..
ajax响应头怎么修改,jquery中ajax请求如何设置http请求头
weixin_32815027的博客
08-05 2242
jquery中ajax请求如何设置http请求头，jQuery Ajax可以通过headers或beforeSend修改request的HTTP headers也可以获取HTTP headers，在ajax里面还有许多功能可以设置，大家可以多看看jquery的api慢慢摸索。jQuery Ajax可以通过headers或beforeSend修改request的HTTP headers，例如：$.a...
Failed to execute 'setRequestHeader' on 'XMLHttpRequest': The object's state must be OPENED."
热门推荐
苏云南雁的博客
02-20 1万+
解决跨域时采用了cors，VUE中用了原生js写法，post请求报了这个错 这个问题是由于需要先打开XMLHttpRequest 错误写法： var xhr = new XMLHttpRequest(); //设置请求的类型及url //post请求一定要添加请求头才行不然会报错 xhr.setRequestHeader("Content-type","application/x-...
Ajax的重要知识点：全是干货，新手学习，老手回顾
最新发布
catchchen的博客
04-03 2131
因此需要在外部声明一个标识变量，来存储是否有ajax请求，先传入false的值，表示没有，然后进行元素事件绑定，判断是否标识变量为true，是true的话，执行abort方法，然后创建ajax实例，将变量值改为true，然后发送ajax请求，然后进行服务器事件绑定，在服务器事件绑定内部，当readyState状态为4的时候，即服务器响应完成之后，整个ajax交互完成，修改标识变量为false。//上面这行代码在浏览器中运行会报错，浏览器有安全机制，name属性是我们单独加的自定义属性，因此会报错。
Ajax学习笔记pink老师
07-29
以下是一份简要的Ajax学习笔记，希望对您有所帮助： 1. 什么是Ajax？ - Ajax全称为Asynchronous JavaScript and XML（异步JavaScript和XML），是一种用于创建交互式Web应用程序的技术。 - 它通过在后台与服务器...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值