AJAX知识点整理

已于 2022-03-28 15:59:36 修改
阅读量1.3k 收藏 7
点赞数
分类专栏： AJAX笔记 文章标签： javascript 前端 ajax
于 2022-03-28 15:59:21 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/JHY97/article/details/123736393
版权

目录

一、原生AJAX

1.1 AJAX简介

1.2 XML简介

1.3 AJAX的特点

1.3.1 AJAX的优点

1.3.2 AJAX的缺点

1.4 安装node.js

1.5 安装express

二、HTTP协议请求报文与响应文本结构

2.1 请求报文

2.2 响应报文

2.2.1 案例练习 - AJAX - GET请求的基本操作

2.2.2 案例练习 - AJAX - POST设置请求体

2.2.3 案例练习 - AJAX - 服务端响应JSON数据

三、nodemon安装

四、原生AJAX的基本使用

4.1 IE缓存问题

4.2 请求超时与网络异常处理

4.3 取消请求

4.4 AJAX请求重复发送问题

五、JQuery中的AJAX

5.1 get请求

5.2 post请求 

5.3 通用方法

六、Axios发送AJAX请求

6.1 axios - get请求

6.2 axios - post请求

6.3 axios函数发送请求

七、fetch函数发送AJAX请求

 八、跨域

8.1 同源策略

8.1.1 同源策略案例练习

8.2 如何解决跨域

8.2.1 JSONP

8.2.2 jQuery发送jsonp请求

8.3 CORS

一、原生AJAX

1.1 AJAX简介

AJAX，即异步的JS和XML。通过AJAX可以在浏览器中向服务器发送异步请求，最大优势：无刷新获取数据。AJAX是一中将现有的标准组合在一起使用的新方式

在网页中的应用：

  1. 搜索栏中输入后有相关关键词提醒
  2. 注册或者登录界面下，输入框输入内容后可能出现的下方文字提醒
  3. 鼠标移动到某一区域，弹出 上/下方 功能模块
  4. 移动到菜单栏，弹出二级或者三级的菜单栏

1.2 XML简介

XML 可扩展标记语言

XML 被设计用来传输和存储数据

XML和HTML类似，不同的是HTML中都是预定义标签，而XML中没有预定义标签，全是自定义标签，用来表示一些数据

1.3 AJAX的特点

1.3.1 AJAX的优点

  1. 可以无需刷新页面与服务器端进行通信
  2. 允许你根据用户事件来更新部分页面内容

1.3.2 AJAX的缺点

  1. 没有浏览历史，不能回退
  2. 存在跨域问题
  3. SEO不友好

1.4 安装node.js

Node.js 中文网Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。Node.js 的包管理器 npm，是全球最大的开源库生态系统。http://nodejs.cn/

1.5 安装express

1.终端初始化环境

npm init --yes

 2. 下载express包

npm install express --save

3. 代码编写

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

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

// 3. 创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装
app.get('/', (request,response)=>{
    // 设置响应
    response.send('HELLP EXPRESS');
});

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

4. 终端运行

node express基本使用.js 

二、HTTP协议请求报文与响应文本结构

2.1 请求报文

行        GET / POST  /s?ie=utf-8   HTTP/1.1

头        Host:

           Cookie:

           Content-type:

           User-Agent:

空行

体        例如：username:admin&password=admin        

(行 为GET，请求体为空；行 为POST，请求体可以不为空)

2.2 响应报文

行        HTTP/1.1  200  OK

头         Content-Type: text/html;charst=utf-8

             Content-length: 2048

             Content-encoding: gzip

空行

体           <html>

                       <head>

                                <body>

                                        ....

                                </body> 

                       </head>

               </html>

2.2.1 案例练习 - AJAX - GET请求的基本操作

案例前操作，需先安装nodeJS

server.js

// 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.send('HELLO AJAX');
    
});

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

1-GET.html

<!DOCTYPE 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 red;
        }
    </style>
</head>
<body>
    <button>点击发送请求</button>
    <div id="result"></div>
    <script>
        // 获取button元素  [0]指button标签下的第一个
        const btn = document.getElementsByTagName('button')[0];
        const result = document.getElementById('result')
        // 绑定事件
        btn.onclick = function(){
            // 1. 创建对象
            const xhr = new XMLHttpRequest(); 
            // 2. 初始化 设置请求方法和url
            xhr.open('GET','http://127.0.0.1:8000/server');
            // 3. 发送
            xhr.send();
            // 4. 事件绑定 处理服务端返回的结果
            xhr.onreadystatechange = function(){
                // 判断 (服务端返回了所有的结果)
                if(xhr.readyState === 4){
                    // 判断响应状态码 200 404 403 401 500
                    if(xhr.status >= 200 && xhr.status < 300){
                        // 处理结果  行 头 空行 体
                        // console.log(xhr.status);//状态码
                        // console.log(xhr.statusText);//状态字符
                        // console.log(xhr.getAllResponseHeaders());//所有响应头
                        // console.log(xhr.response);// 响应体

                        result.innerHTML = xhr.response;
                    } else {

                    }
                }
            }
        }
    </script>
</body>
</html>

2.2.2 案例练习 - AJAX - POST设置请求体

server.js 添加新的代码段，并重启服务

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

    // 设置响应体
    response.send('HELLO AJAX POST');
    
});

2-POST.html

<!DOCTYPE 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 POST请求</title>
    <style>
        #result{
            width: 300px;
            height: 300px;
            border: 1px solid skyblue;
        }
    </style>
</head>
<body>
    <div id="result"></div>
    <script>
        const result = document.getElementById('result');
        result.addEventListener('mouseover', function(){
            const xhr = new XMLHttpRequest();
            xhr.open('post','http://127.0.0.1:8000/server');
            xhr.send('a=1&b=2&c=3');
            xhr.onreadystatechange = function(){
                if(xhr.readyState === 4){
                    if(xhr.status >= 200 && xhr.status < 300){
                        result.innerHTML = xhr.response;
                    }
                }
            }
        });
    </script>
</body>
</html>

 鼠标移动入框内

 请求体

2.2.3 案例练习 - AJAX - 服务端响应JSON数据

server.js 添加新的代码段，并重启服务

app.all('/json-server', (request,response)=>{
    // 设置响应头 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
    // 设置响应头
    response.setHeader('Access-Control-Allow-Headers','*');
    // 响应一个数据
    const data = {
        name: '9527'
    }
    let str = JSON.stringify(data);
    response.send(data);

    
});

3-JSON.html

<!DOCTYPE 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>JSON响应</title>
    <style>
        #result{
            width: 200px;
            height: 200px;
            border: 1px solid skyblue;
        }
    </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){
                    if(xhr.status >= 200 && xhr.status < 300){
                        // 手动转化数据为JSON
                        // let data = JSON.parse(xhr.response);
                        console.log(xhr.response);
                        result.innerHTML = xhr.response.name;
                    }
                }
            }
        }
    </script>
</body>
</html>

 点击键盘后

三、nodemon安装

前提条件：已经安装nodeJS

nodemon可以使在修改服务器端文件后，会自动检测重启服务，省略手动重启步骤

nodemon - npm (npmjs.com)https://www.npmjs.com/package/nodemon

终端内输入

npm install -g nodemon

启动服务

nodemon [your node app]

 如果出现禁止允许脚本问题，在nodemon前加npx

npx nodemon [your node app]

 

四、原生AJAX的基本使用

4.1 IE缓存问题

server.js 添加新的代码段

app.get('/ie', (request,response)=>{
    // 设置响应头 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');

    // 设置响应体
    response.send('HELLO IE');
    
});

4-IE.html

<!DOCTYPE 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>IE缓存问题</title>
    <style>
        #result{
            width: 200px;
            height: 200px;
            border: 1px solid skyblue;
        }
    </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();
            // ?t='+Date.now()解决ie缓存问题
            xhr.open('GET','http://127.0.0.1:8000/ie?t='+Date.now());
            xhr.send();
            xhr.onreadystatechange = function(){
                if(xhr.readyState === 4){
                    if(xhr.status >=200 && xhr.status < 300){
                        result.innerHTML = xhr.response;
                    }
                }
            }
        });
    </script>
</body>
</html>

4.2 请求超时与网络异常处理

server.js 添加新的代码段

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

    setTimeout(() => {
        response.send('延时响应');
    },3000)
});

5-超时与网络异常.html

<!DOCTYPE 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: 200px;
            border: 1px solid skyblue;
        }
    </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){
                    if(xhr.status >=200 && xhr.status < 300){
                        result.innerHTML = xhr.response;
                    }
                }
            }
        });
    </script>
</body>
</html>

4.3 取消请求

<!DOCTYPE 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>
    <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();
        }

        btns[1].onclick = function(){
            x.abort();
        }
        
    </script>
</body>
</html>

4.4 AJAX请求重复发送问题

<!DOCTYPE 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>
    <button>点击取消</button>
    <script>
        const btns = document.querySelectorAll('button');
        let x = null;
        // 添加标识变量
        let isSending = false;
        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;
                }
            }
        }

        btns[1].onclick = function(){
            x.abort();
        }
        
    </script>
</body>
</html>

五、JQuery中的AJAX

server.js

app.all('/jquery-server',(request,response) =>{
    response.setHeader('Access-Control-Allow-Origin','*');
    response.send('Hello JQuery AJAX');
});

5.1 get请求

$.get(url, [data], [callback], [type])

  • url:请求的URL 地址
  • data:请求携带的参数
  • callback:载入成功时回调函数
  • type:设置返回内容格式，xml, html, script, json, text, _default
        $('button').eq(0).click(function(){
            $.get('http:127.0.0.1:8000/jquery-server',{a:1,b:2},function(data){
                console.log(data);
            })
        });

5.2 post请求 

$.post(url, [data], [callback], [type])

  • url:请求的URL 地址
  • data:请求携带的参数
  • callback:载入成功时回调函数
  • type:设置返回内容格式，xml, html, script, json, text, _default
        $('button').eq(1).click(function(){
            $.post('http:127.0.0.1:8000/jquery-server',{a:1,b:2},function(data){
                console.log(data);
            })
        });

5.3 通用方法

app.all('/jquery-server',(request,response) =>{
    response.setHeader('Access-Control-Allow-Origin','*');
    // response.send('Hello JQuery AJAX');
    let data = {name:'9527'};
    response.send(JSON.stringify(data));
});
        $('button').eq(2).click(function(){
            $.ajax({
                // url
                url: 'http://127.0.0.1:8000/jquery-server',
                // 参数
                data: {a:1, b:2},
                // 请求类型
                type: 'GET',
                // 响应体结果
                dataType: 'json',
                //成功回调
                success: function(data){
                    console.log(data);
                },
                // 超时事件
                timeout: 2000,
                // 失败回调
                error:function(){
                    console.log('出错！');
                }
            });
        });

六、Axios发送AJAX请求

GitHub - axios/axios: Promise based HTTP client for the browser and node.jshttps://github.com/axios/axiosaxios (v0.26.1) - Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 Node.js 中。 | BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务https://www.bootcdn.cn/axios/

<script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/axios/0.26.1/axios.min.js"></script>

server.js

app.all('/asiox-server',(request,response) =>{
    response.setHeader('Access-Control-Allow-Origin','*');
    response.setHeader('Access-Control-Allow-Headers','*');
    let data = {name:'9527'};
    response.send(JSON.stringify(data));
});

6.1 axios - get请求

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: 10001,
                    vip: 7
                },
                // 请求头信息
                headers: {
                    name: 'zhang3',
                    age: 24
                }
            }).then(value => {
                console.log(value);
            });
        }

6.2 axios - post请求

        btns[1].onclick = function(){
            axios.post('/axios-server',
            {
                username: 'admin',
                password: 'admin123'
            },
            {
                params: {
                    id: 1002,
                    vip: 2
                },
                headers: {
                    height: 180,
                    weight: 70
                }
            })
        }

6.3 axios函数发送请求

        btns[2].onclick = function(){
            axios({
                // 请求方法
                method: 'POST',
                // url
                url: '/axios-server',
                // url参数
                params: {
                    id: 1003,
                    vip: 10
                },
                // 头信息
                headers: {
                    a:1,
                    b:2
                },
                // 请求体参数
                data: {
                    username: 'admin',
                    password: 'admin123'
                }
            }).then(response=>{
                // 响应状态码
                console.log(response.status);
                // 响应状态字符串
                console.log(response.statusText);
                // 响应头信息
                console.log(response.headers);
                // 响应体
                console.log(response.data);
            })
        }

七、fetch函数发送AJAX请求

WorkerOrGlobalScope.fetch() - Web API 接口参考 | MDN (mozilla.org)https://developer.mozilla.org/zh-CN/docs/Web/API/fetch语法

Promise<Response> fetch(input[, init]);

server.js 添加代码段 

app.all('/fetch-server',(request,response) =>{
    response.setHeader('Access-Control-Allow-Origin','*');
    response.setHeader('Access-Control-Allow-Headers','*');
    let data = {name:'9527'};
    response.send(JSON.stringify(data));
});

 fetch.html

    <button>AJAX请求</button>
    <script>
        const btn = document.querySelector('button');
        btn.onclick = function(){
            fetch('http://127.0.0.1:8000/fetch-server',{
                // 请求方法
                method:'POST',
                // 请求头
                headers:{
                    name: 'zhang3'
                },
                body: 'username=admin&password=admin123'
            }).then(response => {
                return response.json();
            }).then(response => {
                console.log(response);
            })
        }
    </script>

 八、跨域

8.1 同源策略

  • 同源策略(Same-Origin Policy)最早由Netscape 公司提出，是浏览器的一种安全策略
  • 同源： 协议、域名、端口号必须完全相同
  • 跨域： 违背同源策略就是跨域

违背同源策略就是跨域

8.1.1 同源策略案例练习

server.js

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('服务已经启动...');
});

index.html

    <h1>同源策略测试案例</h1>
    <button>点击获取数据</button>
    <script>
        const btn = document.querySelector('button');
        btn.onclick = function(){
            const xhr = new XMLHttpRequest();
            xhr.open('GET','/data');
            xhr.send();
            xhr.onreadystatechange = function(){
                if(xhr.readyState === 4){
                    if(xhr.status >=200 && xhr.status < 300){
                        console.log(xhr.response);
                    }
                }
            }
        }
    </script>

8.2 如何解决跨域

8.2.1 JSONP

1. JSONP是什么

        JSONP（JSON with Padding），是一个非官方的跨域解决方案，只支持get请求

2. JSONP怎么工作的

        在网页有一些标签天生具有跨域能力，比如：img、link、iframe、script

        JSONP就是利用script标签的跨域能力来发送请求的

3. JSONP的使用

        1） 动态的创建一个script标签

var script = document.createElement('script');

        2) 设置 script 的src ，设置回调函数

script.src = "http://localhost:3000/testAJAX?callback=abc";
function abc(data) {
	alert(data.name);
};

        3）将script插入到文档中

document.body.appendChild(script);

        4）原生JSONP实践 - 案例练习

server.js添加代码段

app.all('/check-username',(request,response) => {
    const data = {
        exist:1,
        msg:'用户名已经存在'
    }
    let str = JSON.stringify(data);
    response.end(`handle(${str})`);
});

jsonp.html

    用户名： <input type="text" id="username">
    <p></p>
    <script>
        const input = document.querySelector('input');
        const p = document.querySelector('p');

        function handle(data){
            input.style.border = '1px solid red';
            p.innerHTML = data.msg;
        }
        input.onblur = function(){
            // 获取用户输入值
            let username = this.value;
            // 向服务器端发送请求，检测用户名是否存在
            // 创建script标签
            const script = document.createElement('script');
            // 设置标签的src属性
            script.src = 'http://127.0.0.1:8000/check-username';
            document.body.appendChild(script);
        }
    </script>

8.2.2 jQuery发送jsonp请求

server.js添加代码段

app.all('/jquery-jsonp-server',(request,response) => {
    const data = {
        name:'王小明',
        city:['厦门','上海','深圳']
    }
    let str = JSON.stringify(data);
    // 接收 callback 参数
    let cb = request.query.callback;
    response.end(`${cb}(${str})`);
});

jquery-jsonp.html

<!DOCTYPE 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>jQuery发送jspon请求</title>
    <style>
        #result{
            width: 300px;
            height: 300px;
            border: 1px solid skyblue;
        }
    </style>
    <script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.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}<br>
                    城市：${data.city}
                `)
            });
        });
    </script>
</body>
</html>

8.3 CORS

跨源资源共享（CORS） - HTTP | MDN跨源资源共享 (CORS)（或通俗地译为跨域资源共享）是一种基于 HTTP 头的机制，该机制通过允许服务器标示除了它自己以外的其它origin（域，协议和端口），这样浏览器可以访问加载这些资源。跨源资源共享还通过一种机制来检查服务器是否会允许要发送的真实请求，该机制通过浏览器发起一个到服务器托管的跨源资源的"预检"请求。在预检中，浏览器发送的头中标示有HTTP方法和真实请求中会用到的头。https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS

1. CORS 是什么？

        CORS（Cross-Origin Resource Sharing），跨域资源共享。CORS 是官方的跨域解决方 案，它的特点是不需要在客户端做任何特殊的操作，完全在服务器中进行处理，支持 get 和post 请求。跨域资源共享标准新增了一组HTTP 首部字段，允许服务器声明哪些 源站通过浏览器有权限访问哪些资源

2. CORS 怎么工作的？
        CORS 是通过设置一个响应头来告诉浏览器，该请求允许跨域，浏览器收到该响应 以后就会对响应放行。

3. CORS的使用

        主要是服务器端的设置：

app.all("/cors-server" , function (request , response) {
	//通过response 来设置响应头，来允许跨域请求
	response.set("Access-Control-Allow-Origin","*");
    response.set("Access-Control-Allow-Headers","*");
    response.set("Access-Control-Allow-Method","*");
	response.send("hello CORS");
});

JHY97
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
ajax简介_动力节点Java学院整理
10-19
主要为大家详细介绍了ajax基础知识点，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Ajax知识点
woai_mihoutao的博客
04-28 510
一、Ajax基础 1. 传统网站中存在的问题 网速慢的情况下,页面加载时间长,用户只能等待 表单提交后,如果一项内容不合格,需要重新填写所有表单内容 页面跳转,重新加载页面,造成资源浪费,增加用户等待时间 2. Ajax概述 Ajax:标准读音['ei,dʒaeks]，中文音译:阿贾克斯 它是浏览器提供的一套方法,可以实现页面无刷新更新数据,提高用户浏览网站应田的体验。 3. Ajax的应用场景 页面上拉加载更多数据 列表数据无刷新分页（例如当点击某个网页的左边侧边栏时，只有右边的内容发生改
ajax知识点
m0_61852712的博客
10-11 404
ajax知识点
Ajax的重要知识点：全是干货，新手学习，老手回顾
最新发布
catchchen的博客
04-03 755
因此需要在外部声明一个标识变量，来存储是否有ajax请求，先传入false的值，表示没有，然后进行元素事件绑定，判断是否标识变量为true，是true的话，执行abort方法，然后创建ajax实例，将变量值改为true，然后发送ajax请求，然后进行服务器事件绑定，在服务器事件绑定内部，当readyState状态为4的时候，即服务器响应完成之后，整个ajax交互完成，修改标识变量为false。//上面这行代码在浏览器中运行会报错，浏览器有安全机制，name属性是我们单独加的自定义属性，因此会报错。
Ajax知识点总结、不用再找其他资源的总结
m0_67393039的博客
03-19 1492
目录 一、Ajax 的概念 二、Ajax 原理（发送 Ajax 请求的五个步骤） 三、XMLHttpRequest 对象详解 发送请求 POST 请求时注意 onreadystatechange 事件 服务器响应的内容 四、手写 Ajax 手写第一个 Ajax 请求 封装 Ajax 请求（重要） Ajax 请求：get 请求举例 Ajax 多个接口的嵌套请求（重要） 五、jQuery 中的 Ajax 六、Promise 七、零七杂八 （1）?URL地址的概念 （2）接口的概念 （3）接口文档 1. 什么是接
今天抽时间给大家整理jquery和ajax的相关知识
11-22
hi，今天礼拜二，做点什么事呢，哎想起来了，正好前两天在一直都在学习ajax相关知识，今天接着学jquery和ajax的相关知识吧。 1、jQuery —–jQuery与AJAX—– AJAX即“Asynchronous Javascript And XML”（异步...
ASP.NET项目知识点整理与项目总结
07-15
涉及ASP.net Web开发中的AJAX、JQuery、Bootstrap、JSON等开发技术，易懂实用。
Ajax学习笔记个人总结
09-12
根据个人学习Ajax的过程总结，整理了Ajax相关基础知识点，对Ajax的使用有较详细的介绍，通过个别举例，可以快速了解Ajax的功能，比较适合初学者入门。
important:知识点记录
04-30
再来40道this面试题酸爽继续(1.2w字用手整理) 为什么 0.1 + 0.2 = 0.300000004 JS事件流 JS事件循环 es6 promise generator函数的操作 总结面试中 promise 相关题目的套路 AJAX原理及常见面试题 ES6教程 ...
Ajax 基础知识点汇总（代码+知识点+xmind思维导图）
11-19
代码+知识点汇总，采用xmind框图导出，知识点简单明了，无论是学过还是没学过，通过这个资料过一遍绝对对ajax整体清楚明了。
Ajax知识要点总结
07-28
对Ajax技术的简要总结，关键对象，属性，方法的功能描述，供你查询。
ajax知识点总结
qiuyushuofeng的专栏
06-06 400
ajax知识点总结
AJAX知识点总结
酒客的博客
11-15 767
AJAX重要知识点总结 一、原生AJAX 1.1AJAX简介 AJAX全称为Asynchronous Javascript And XML,就是异步的JavaScript和XML。通过AJAX可以在浏览器中实现向服务器发送异步请求，最大的优势：无刷新获取数据。 1.2XML简介 XML可扩展标记语言，XML被设计用来传输和存储数据。XML和HTML类似，不同的是HTML中都是预定义标签，而XML中没有预定义标签，全都是自定义标签，用来表示一些数据，如： 比如说有一个学生数据 name="张三";age="1
AJAX 基础知识
Cc200171的博客
06-08 374
3、ajax的工作原理客户端发送请求，请求交给xhr，xhr把请求提交给服务，服务器进行业务处理，服务器响应数据交给xhr对象，xhr对象接收数据，由javascript把数据写到页面上，如下图所示 在IE浏览器中创建XMLHttpRequest对象的方式为:在Netscape浏览器中创建XMLHttpRequest对象的方式为: 由于无法确定用户使用的是什么浏览器,所以在创建XMLHttpRequest对象时,最好将以上两种方法都加上.如以下代码所示: 2、创建HTTP请求 创建HTTP请求可
AJAX知识点大全 最全笔记 知识点合集
liuzizhoufaith的博客
04-20 1417
第一章 绪论 第一讲.AJAX简介 不刷新的情况下向服务端发送请求,获得响应 AJAX全称是Asynchronous JavaScript And XML 异步的JS和XML 通过AJAX可以在浏览器中向服务器发送异步请求,最大的优势是无刷新获取数据 AJAX不是新的编程语言,而是一种将现有标准组合在一起使用的新方式 如: 百度在搜索内容时,会出现关键词的相关词提醒,就是用的AJAX 当注册网站时输入用户名,如果用户名用过了,会提示用户名不可用,也是AJAX 网站的二级菜单,一般都是鼠标放上去了
AJAX的知识点详细总结
ZS74520的博客
09-22 869
AJAX相关知识要点 一、原生AJAX 1.1 AJAX简介 AJAX全称为Asynchronous JavaScript And XML，就是异步的JS 和 XML。通过AJAX可以在浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据。 1.2 XML简介 XML可扩展标记语言，XML被设计用来传输和存储数据。XML和HTML类似，不同的HTML中都是预定义标签，而XML中没有预定义标签，全都是自定义标签，用来表示一些数据。例如： 比如说有一个学生数据 name="张三";age="14";sex=
AJAX的基本知识(精简总结)
code^_^熊的博客
01-03 236
1.1AJAX 简介 AJAX，就是异步的JS和XML。 AJAX的优点:在无需刷新整个页面的情况下，更新数据，进而更新页面的部分信息。 提炼成一句话:无需刷新获取数据。 (配一张图:游览器 和 服务器 传输的) 1.2XML简介 XML相关历史 以前，游览器向服务器发送数据,服务器响应后将相关数据以XML的标准发送到游览器，现在采用 JSON的标准来进行响应并发送数据到游览器。 XML的相关了解: 下面，总结一下XML相关的了解: XML:可扩展性标记语言 作用:用来传输和存储数据 XML:无预定义标签，
cshtml页面点不出ajax
09-13
接下来，请检查您的代码是否正确设置了 AJAX 请求。您可以尝试以下示例代码： ```javascript $(document).ready(function() { $('#myButton').click(function() { $.ajax({ url: 'your-url', method: 'POST', /...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

JHY97

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值