AJAX入门

最新推荐文章于 2023-05-27 16:06:06 发布
最新推荐文章于 2023-05-27 16:06:06 发布
阅读量539 收藏 1
点赞数
文章标签： ajax 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46065399/article/details/125694546
版权

AJAX

1. Ajax的作用

1.1 AJAX 简介

AJAX全称是 Asynchronous Javascript And XML，就是异步的 JS 和 XML

  • 通过 AJAX 可以在浏览器中向服务器发送异步请求，最大的优势是：无刷新获取数据

  • AJAX 是全新的编程语言，而是一种将现有的标准组合在一起使用的新方式

1.2 XML简介

​ XML 可扩展标记语言

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

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

比如说我有一个学生数据：

	name = "孙悟空"；age = 1； gender = “男”；

用 XML表示：

	<student>

		<name>孙悟空</name>

		<age>18</age>

		<gender>男</gender>

	</student>

​ 现在已经被 JSON 取代了

用 JSON 表示：
	{"name":"孙悟空","age":18,"gender":"男"}

1.3 AJAX 的特点

1.3.1 AJAX 的优点

​ 1) 可以无需刷新页面与服务器端进行通信

​ 2) 允许你根据用户事件来更新部分页面内容

1.3.2 AJAX 的缺点

​ 1) 没有浏览历史，不能回退

​ 2) 存在跨域问题(同源)（比如说在 a.com 向 b.com 发送请求，默认是不允许的）

​ 3) SEO 不友好（爬虫爬不到）

2. HTTP

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

2.1 请求报文

重点是格式与参数

行		POST /s?ie=utf-8 HTTP/1.1		(类型 url http协议版本)
头		Host: atguigucom				（name: value 型）
		 Cookie: name=guigu
		 Content-Type: application/x-wwwform-urlencoded
		 User-Agent: chrome 83
空行
体	    username=admin&password=admin	（GET请求请求体为空，POST请求请求体可以不为空）

2.2 响应报文

行		HTTP/1.1  200  OK				（http协议版本  响应状态码 响应状态字符串）
头		Content-Type: text/html;charset=utf-8
		 Content-length: 2048
		 Content-encoding: gzip
空行
体		<html>
			<head>
			</head>
			<body>
				<h1>林业大学</h1>
			</body>
		</html>

3.原生AJAX

3.1 准备工作

  • 安装node.js(http://nodejs.cn)
  • 安装express(服务端框架)(https://www.expressjs.com.cn/)
npm init --yes
npm install express -save

3.2 express框架基本使用

3.2.1 express基本使用
express基本使用.js

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

运行
node express基本使用.js


--------------------------------------------------------------------
安装 nodemon 自动重启工具，使得服务端代码发生改变时，服务端自动重启更新
npm install -g nodemon (全局安装)
npm install --save-dev nodemon	（只作为开发依赖）

运行：
nodemon express基本使用.js

3.3 GET/POST

​ 原生AJAX使用XHR

3.3.1 get请求
<style>
    #result{
        width: 200px;
        height: 100px;
        border: 1px solid #90b;
    }
</style>	

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

<script>
	const btn = document.getElementsByTagName('button')[0];
    const result = document.getElementById('result');

	// 1.创建对象
    const xhr = new XMLHttpRequest();
    // 2.初始化  设置请求方法和 url
    xhr.open('GET', 'http://127.0.0.1:8000/server');
    // 3.发送
    xhr.send();
    // 4.事件绑定 处理服务端返回的结果
    // on  when  当...时候
    // readystate 是 xhr 对象中的属性，表示状态，有 5 个值，
    //      0：未初始化（这是xhr最开始的值）， 
    //		1：open方法调用完毕， 
    //		2：send方法调用完毕， 
    //		3：服务端返回部分结果， 
    //		4：服务端返回所有结果
    // change  改变
    xhr.onreadystatechange = function(){
         	// 判断（服务端返回所有结果）
           if(xhr.readyState === 4){
                // 判断响应状态码 200 404 403 401 500 ...
                // 2xx 成功
                if(xhr.status >= 200 && xhr.status <= 300){
                    // 处理结果  行 头 空行 体
                    // // 1.响应行
                     console.log(xhr.status);//状态码
                     console.log(xhr.statusText);//状态字符串
                    // // 2.响应头
                     console.log(xhr.getAllResponseHeaders());//所有响应头
                    // // 3.响应体
                    // console.log(xhr.response);//响应体
                }
                else{

                }
            }
      }
</script>

	GET请求传参（url传参）：
            // url传参和搜索框中输入一样，先写问好，然后传参，多个参数用 & 分隔
            xhr.open('GET', 'http://127.0.0.1:8000/server?a=100&b=200');



server.js:
			
const express = require('express');
const app = express();
app.get('/server', (request, response) => {
	response.send('HELLO EXPRESS');
});
app.listen(8000, () => {
	console.log("服务已经启动，8000 端口监听中......");
})
3.3.2 POST请求
注意：post请求的请求体在send()方法里设置，可以是url参数的形式、key：value形式和单纯字符串形式

<style>
        #result{
            width: 200px;
            height: 100px;
            border: 1px solid #90b;
        }
</style>
    
<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?name=qsz&password=123');
         
    	xhr.send('a=100&b=200&c=300');   //以url参数形式
    	// xhr.send('a:100&b:200&c:300');   //以 key:value形式
    	// xhr.send('12365492');

         xhr.onreadystatechange = function(){
               if(xhr.readyState === 4){
                   if(xhr.status >= 200 && xhr.status <= 300){
                       console.log(xhr.response);
                   }
               }
         }
     })
</script>
           
           
server.js:
			
const express = require('express');
const app = express();
app.post('/server', (request, response) => {
	response.send('HELLO EXPRESS');
});
app.listen(8000, () => {
	console.log("服务已经启动，8000 端口监听中......");
})
3.3.3 设置请求头
<style>
    #result{
        width: 200px;
        height: 100px;
        border: 1px solid #90b;
    }
</style>

<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?name=qsz&password=123');
            
            // 设置请求头
            // Content-Type：设置请求体类型
            xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
            // 自定义请求头
            xhr.setRequestHeader('name','bjfu')

            xhr.send('a=100&b=200&c=300'); 
            xhr.onreadystatechange = function(){
                if(xhr.readyState === 4){
                    if(xhr.status >= 200 && xhr.status <= 300){
                        result.innerHTML = xhr.response;
                    }
                }
            }
        })
</script>

server.js:
// all 可以接收任意类型的请求，因为自定义name请求头后会发出options请求校验是否可用
app.all('/server', (request, response) => {
    // 设置响应头 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
	response.setHeader('Access-Control-Allow-Headers','*'); // * 表示所有类型请求头都允许被接受(因为有自定义请求头，所以要带上)
	// 设置响应
	response.send('HELLO AJAX POST');
});
3.3.4 JSON(响应体为对象时)
<style>
    #result{
        width: 200px;
        height: 100px;
        border: 1px solid #90b;
    }
</style>

<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){

                    // 手动转换
                    // str = JSON.parse(xhr.response)
                    // console.log(str)
                    // result.innerHTML = str.name

                    // 自动(上面设置响应体数据类型)
                    console.log(xhr.response)
                    result.innerHTML = xhr.response.name
                }
            }
        }
    }
</script>

          
server.js:
// 传输对象类型数据
const data = {
	name:'bjfu'
};
            
app.all('/server', (request, response) => {
	response.send(JSON.stringfy(data));
});

​ 运行结果：

1657250836266 
当不设置json转换时
<style>
    #result{
        width: 200px;
        height: 100px;
        border: 1px solid #90b;
    }
</style>

<div id="result"></div>

<script>
    const result = document.getElementById('result');
        
    window.onkeydown = function(){
        // 创建对象
        const xhr = new XMLHttpRequest();

        // 初始化
        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){
                    console.log(xhr.response)
                }
            }
        }
    }
</script>
            
server.js:
// 传输对象类型数据
const data = {
	name:'bjfu'
};
            
app.all('/server', (request, response) => {
	response.send(data);
});

​ 运行结果：

1657252820973
3.3.5 请求超时与网络异常
<style>
    #result{
        width: 200px;
        height: 100px;
        border: 1px solid #90b;
    }
</style>

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

<script>
    const result = document.getElementById('result');      

    document.getElementById('btn').onclick = function(){
        const xhr = new XMLHttpRequest();

        // 超时设置（下面设置为 2s后 请求未响应就取消）
        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>


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

    // 延时3s
    setTimeout(() => {
        // 设置响应
        response.send('HELLO AJAX DELAY');
    }, 3000);
});
      		
// 网络异常回调可以通过在控制台网络中设置离线再点击按钮触发
3.3.6 取消请求
<button>点击发送请求</button>
<button>点击取消</button>

<script>
	const btn = document.querySelectorAll('button');
    let xhr = null;

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


server.js:
app.get('/delay', (request, response) => {
    // 设置响应头 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
    // 延时3s
    setTimeout(() => {
        // 设置响应
        response.send('HELLO AJAX DELAY');
    }, 3000);
});
3.3.7 重复请求问题
<button>点击发送请求</button>

<script>
    const btn = document.querySelector('button');
    let xhr = null;
    // 标识变量
    let isSending = false;  // 是否正在发送AJAX请求
    
	btn.onclick = function(){
        if(isSending) xhr.abort();
        xhr = new XMLHttpRequest();
        
        // 修改标识变量的值
        isSending = true;
        
        xhr.open('GET', 'http://127.0.0.1:8000/delay')
        xhr.send();
        xhr.onreadystatechange = function(){
            if(xhr.readyState === 4){
                isSending = true
            }
        }
    };
</script>

server.js:
app.get('/delay', (request, response) => {
    // 设置响应头 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
    // 延时3s
    setTimeout(() => {
        // 设置响应
        response.send('HELLO AJAX DELAY');
    }, 3000);
});

4. jQuery发送AJAX请求

4.1 GET 请求

$.get(url,[data],[callback],[type])
  • url 请求的 url 地址
  • data 请求携带的 url 参数
  • callback 载入成功时的回调函数
  • type 设置返回内容格式，xml，html，script，json，text，_default

4.2 POST请求

$.post(url,[data],[callback],[type])
  • url 请求的 url 地址
  • data 请求携带的 url 参数
  • callback 载入成功时的回调函数
  • type 设置返回内容格式，xml，html，script，json，text，_default

4.3 通用方法 ajax()

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<div class="container">
        <h2 class="page-header">jQuery发送AJAX请求</h2>
        <button class="btn">GET</button>
        <button class="btn">POST</button>
        <button class="btn">通用型方法ajax</button>
</div>

<script>
		//get请求
        $('button').eq(0).click(function(){
            $.get('http://127.0.0.1:8000/jquery-server',{a:100, b:200}, function(data){
                console.log(data)
            },'json')
        });
		//post请求
        $('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',
                // url 参数
                data:{a:100, b:200},
                // 请求类型
                type:'GET',
                // 响应体结果
                dataType:'json',
                // 成功的回调
                success: function(data){
                    console.log(data)
                },
                // 超时时间
                timeout:2000,
                // 失败的回调
                error: function(){

                },
                // 头信息（注意自定义请求头时，服务器端--server.js 同样需要设置 response.setHeader('Access-Control-Allow-Headers','*');）
                // headers: {
                //     c:300,
                //     d:400
                // }
            })
        });
</script>

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

5. Axios发送AJAX请求

<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.0.0-alpha.1/axios.min.js"></script>

<div class="container">
        <button class="btn">GET</button>
        <button class="btn">POST</button>
        <button class="btn">通用型方法ajax</button>
</div>

<script>
    const btn = document.querySelectorAll('button');

    axios.defaults.baseURL = 'http://127.0.0.1:8000';

    btn[0].onclick = function(){
            
        axios.get('/axios-server',{
            // url 参数
            params:{
                id:100,
                vip:7
            },
            // 请求头信息
            headers:{
                name:'qsz',
                age:21
            }
        }).then(response => {
            console.log(response)
        })
    };

    btn[1].onclick = function(){
        axios.post('/axios-server',{
            username:'admin',
            password:'admin'
        },{
            // url 参数
            params:{
                id:100,
                vip:7
            },
            // 请求头信息
            headers:{
                name:'qsz',
                age:21
            }
        }).then(response => {
            console.log(response)
        })
    };

    btn[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>

server.js:
// axios服务
app.all('/axios-server', (request, response) => {
    
    response.setHeader('Access-Control-Allow-Origin','*');
    response.setHeader('Access-Control-Allow-Headers','*');
    const data = {
        name:'bjfu'
    };
    response.send(JSON.stringify(data));
});

6. fetch发送AJAX请求

<div class="container">
        <button class="btn">fetch 发送 ajax 请求</button>
</div>

<script>
        const btn = document.querySelector('button');

        btn.onclick = function(){
            fetch('http://127.0.0.1:8000/fetch-server?id=200&ps=15',{
                // 请求方法
                method:'POST',
                // 请求头
                headers:{
                    name:'qsz'
                },
                // 请求体
                body:'username=admin&passowrd=admin'
            }).then(response => {
                // return response.text();
                return response.json()
            }).then(response => {
                console.log(response);
            })
        }
</script>

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

7 设置CORS响应头实现跨越

server.js:

​ response.setHeader(‘Access-Control-Allow-Origin’,‘*’);

二哈带你看程序
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Ajax入门教程
qq_22075913的博客
03-31 4971
Ajax 学习目标 了解Ajax的概念和作用 了解同步和异步的区别 能够使用jQuery的$.get()和$.post()发送Ajax请求 能够使用jQuery的$.ajax()方法发送Ajax请求 能够定义和解析json 能够使用Jackson转换json格式 能够使用fastjson转换json格式 第一章-JS的AJAX 知识点- AJAX的概述 1.目标 能够理解异步的概念 2.路径 什么是Ajax 什么是异步 为什么要学习Ajax 3.讲解 3
Ajax 技术上手
仗剑天涯，从摘要开始
12-26 1254
Ajax 技术 第1章 认识Ajax 1.1 初识 ajax 我们平常上网，不管是注册账号，还是浏览网页，其本质就是通过客户端向服务器发送请求，服务器接到请求后返回处理后的数据给客户端； 在我们之前学习代码中，向服务器提交数据典型的应用是就是 form 表单，其中的 action 就是我们提交数据的服务器端地址； 完成一个 form 表单； 当我们点击提交按钮时，页面就会跳转到服务器页面；...
Ajax入门
mimo_mimo的博客
03-12 159
ajax基本知识，http协议，express框架，get、post请求基本操作及案例
AJAX快速入门
qq_50121370的博客
11-08 632
AJAX全称为Asynchronous JavaScript And XML，就是异步的JS和XML。通过AJAX可以向浏览器发送异步的请求，可以无刷新的获取数据。AJAX不是编程语言，它是现有的标准组合在一起的新方法。XML可扩展标记语言。XML被设计用来传输和存储数据。XML和HTML类似，但XML中的标签都是自定义标签，没有预定义标签。XML表示数据：
从零开始学习 AJAX：超详细！15 分钟搞定 AJAX 原理和使用方法
最新发布
weixin_56242678的博客
05-27 6539
本文将会介绍 AJAX 的原理和使用方法，并帮助你在短时间内掌握这一重要的前端技术。我们将从 AJAX 的基本概念入手，深入探讨 AJAX 的核心技术——XMLHttpRequest 对象以及常用的数据交互方式。通过本文的学习，你将能够轻松地了解 AJAX 的工作方式和应用场景，从而为你的 Web 应用程序添加更多的交互性和实时性。
ajax入门经典
05-03
对于基础比较弱的童鞋来说还是不错的一本参考资料
Ajax入门学习教程（一）
10-20
AJAX（Asynchronous JavaScript And XML）翻译成中文就是“异步Javascript和XML”。下面简单给大家介绍了ajax入门学习知识，需要的的朋友参考下吧
Ajax基础入门
weixin_67318211的博客
04-03 603
1.什么是Ajax技术？ AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），AJAX不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的独立的 Web 应用程序的技术。 通过在浏览器与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行局部更新。 2.为什么要采用Ajax技术（优缺点） 使用Ajax的最大优点，就是能在不更新整个页面的前提下和服务器进行数据交互。这使得W
ajax_入门实例_
03-20
NULL 博文链接：https://kaka100.iteye.com/blog/865502
AJAX最基础的知识
02-09
ajaxjichu，ajax基础1
ajax经典入门详解
11-06
ajax经典入门详解
Ajax的知识，Ajax入门经典
09-02
Ajax的知识结构和内容,详细介绍Ajax，是初学AJAX的必读之书，慢慢提高AJAX知识。
Ajax 入门经典
07-25
Ajax很好的教程,我已经看过了,学到不少东西
Ajax从入门到精通（全）
码农研究僧的博客
07-15 1606
前言 异步JavaScript和XML 快速地将增量更新于用户界面，不需刷新整个页面即可回应用户操作 一种独立于 Web 服务器软件的浏览器技术 全局刷新：整个页面被刷新覆盖，传输大量数据 局部刷新：内部被刷新覆盖，内部有发送请求，传输量少 即ajax的核心为局部刷新 ...
ajax入门 不要畏惧 很简单 进了门一切都好学多了
lovejavalovejava的专栏
03-19 2953
   以前总是听别人说ajax是多么的好，然后自己就去借了本书看，哇塞感觉好难哦，什么介绍javascript,html,css，还有很多一些东西。看的那个难啊，然后就是硬着头皮把它给看完了，但是就是缺少了一步最关键的步骤，运行它。理解它的原理。了解它的机制。去感觉它，触摸它。    现在拿了一个实例自己去练习了一下，发现，嗯，可以感觉到它的存在了。可以触摸到了。好开心啊，还有那些很复杂的介绍
AJAX&JQuery基础（适合入门-新手）
ttxxi_的博客
11-12 1259
关于原生AJAX基础我在我自己的上一篇博客进行了简单阐述，需要的话自提https://blog.csdn.net/ttxxi_/article/details/83991752 在申明一下：我只是个大二学生，写的东西很基础，因为我也只是刚刚才接触，所有这个个人觉得也适合和我一样刚刚开始学的人看一下，大佬们喷的时候可以肆无忌惮一点，我觉得我就需要骂一骂hhh 一、AJAX简介 Ajax 即“A...
ajax入门
05-27
以下是入门步骤： 1. 创建 XMLHttpRequest 对象（浏览器内置对象）： ```javascript var xmlhttp = new XMLHttpRequest(); ``` 2. 发送请求（使用 GET 或 POST 方法）： ```javascript xmlhttp.open("GET", "url...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值