创建AJAX五大基本步骤

夏小花花

已于 2022-12-08 23:22:39 修改

阅读量2.1k

点赞数 3

分类专栏： javascript 文章标签： ajax javascript

于 2022-11-19 20:29:01 首次发布

本文链接：https://blog.csdn.net/xiaohua616/article/details/127858259

版权

javascript 专栏收录该内容

40 篇文章 1 订阅

订阅专栏

文章目录

Ajax

Ajax

一、定义

一、同步和异步的区别

同步提交：当用户发送请求时，当前页面不可以使用，服务器将数据响应页面到客户端，响应完成后，用户才可以使用页面。

异步提交：当用户发送请求时，当前页面还可以继续使用，当异步请求的数据响应给页面，页面把数据显示出来 。

二、Ajax工作原理

客户端发送请求，请求交给xhr，xhr把请求提交给服务器，服务器进行业务处理，服务器响应数据交给xhr对象，xhr对象接收数据，由javascript把数据写到页面上，如下图所示：

二、创建Ajax五个基本步骤

一、创建XMLHttpRequest对象

在chrome浏览器中创建XMLHttpRequest对象的方式为:

const xhr = new XMLHttpRequest();

二、初始化设置请求方法和url

//POST请求
xhr.open('POST',"http://localhost:xxx");

//GET请求
//xhr.open('GET',"http://localhost:xxx/a=100&b=200");

三、发送（向服务器端发送请求）

GET和POST请求方式不同点：

	GET的请求参数在请求地址url中；
	POST的请求参数在发送请求Send()中；

//POST请求
xhr.send("a=100&b=200");
//GET请求
//xhr.send();

四、设置响应HTTP请求状态变化的函数

创建完HTTP请求之后，可以将HTTP请求发送给Web服务器了。发送HTTP请求的目的是为了接收从服务器中返回的数据。从创建XMLHttpRequest对象开始，到发送数据、接收数据、XMLHttpRequest对象一共会经历以下5中状态。

1. 未初始化状态。在创建完XMLHttpRequest对象时，该对象处于未初始化状态，此时XMLHttpRequest对象的readyState属性值为0。
2. 初始化状态。在创建完XMLHttpRequest对象后使用open()方法创建了HTTP请求时，该对象处于初始化状态。此时XMLHttpRequest对象的readyState属性值为1。
3. 发送数据状态。在初始化XMLHttpRequest对象后，使用send()方法发送数据时，该对象处于发送数据状态，此时XMLHttpRequest对象的readyState属性值为2。
4. 接收数据状态。Web服务器接收完数据并进行处理完毕之后，向客户端传送返回的结果。此时，XMLHttpRequest对象处于接收数据状态，XMLHttpRequest对象的readyState属性值为3。
5. 完成状态。XMLHttpRequest对象接收数据完毕后，进入完成状态，此时XMLHttpRequest对象的readyState属性值为4。
此时接收完毕后的数据存入在客户端计算机的内存中，可以使用responseText属性或responseXml属性来获取数据。

xhr.onreadystatechange = function(){
   //判断状态4：已将数据响应到JS中，进行渲染
   if(xhr.readyState==4){
       
   }
}

五、设置获取服务器返回数据的语句

响应状态码：200-300都是成功

if(xhr.status >= 200 && xhr.status < 300){
    //处理服务器端结果  行 头 空行 体
    //1.响应行
    //通过Ajax的异步调用获得服务器端数据之后，使用DOM来将网页中的数据进行局部更新
    result.innerHTML = xhr.response;//响应体
}

三、请求方式

下面代码可以直接复制下来，运行看下效果，请求方式，一定要先配置好 Express

axios

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。
从浏览器中创建 XMLHttpRequests;
自动转换 JSON 数据;
支持 Promise API;

axios 发送 AJAX请求

GET和POST请求，使用npm安装一下express，配置服务端，实现前端与服务端进行数据交互。
前端

<!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>axios 发送 AJAX请求</title>
    <script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/axios/1.1.3/axios.js"></script>
</head>
<body>
    <button>GET</button>
    <button>POST</button>
    <button>AJAX</button>
    <script>
        const btns = document.querySelectorAll('button');
        
        btns[0].onclick = function(){
            //GET请求
            axios.get('http://localhost:xxx/axios-server',{
                params:{
                    id:100,
                    vip:7
                }
            }).then(value=>{ //返回消息(比较详细)
                console.log(value);
            });
        }

        btns[2].onclick = function(){
            axios({
                //请求方法
                method: 'POST',
                //URL
                url:'http://localhost:xxx/axios-server',
                //Url参数
                params: {
                    a:100,
                    b:100
                }
            })
        }
    </script>
</body>
</html>

服务端

//axios服务
app.all('/axios-server',(request,response)=>{
    //设置响应头
    response.setHeader('Access-Control-Allow-Origin','*');
    //response.setHeader('Access-Control-Allow-Headers','*');
    const data = {name: 'XXx'};
    // //定时器
    setTimeout(() => {
        response.send(JSON.stringify(data));
    }, 1000);
    
});

jquery 发送 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>Document</title>
    <script crossorigin src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.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(2).click(function(){
            $.ajax({
                //请求url
                url: 'http://localhost:xxx/jquery-server',
                //请求参数
                data: {a:100,b:200},
                //请求类型
                type: 'POST',
                //响应体结果设置
                dataType: 'json',
                //成功的回调函数
                success: function(data){
                    console.log(data);
                },
                //超时时间
                timeout: 2000,
                //失败的回调函数
                error: function(){
                    console.log("请求超时！！！");
                }
            })
        })
    </script>
</body>
</html>

服务端
all任何请求类型都可以接收

app.post('/jquery-server',(request,response)=>{
    //设置响应头
    response.setHeader('Access-Control-Allow-Origin','*');
    const data = {name: 'xxx'};
    // //定时器
    setTimeout(() => {
        response.send(JSON.stringify(data));
    }, 1000);
    
});

fetch 发送 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>fetch 发送 AJAX请求</title>
</head>
<body>
    <button>AJAX请求</button>
    <script>
        const btn = document.querySelector('button');
        btn.onclick = function(){
            fetch('http://localhost:xxx/fetch-server',{
                //请求方法
                method: 'POST',
                //请求头
                headers: {
                    name: 'xx'
                },
                //请求体
                body: 'username=admin'
            }).then(response=>{
                return response.json();
            }).then(response=>{
                console.log(response);
            })
        }
    </script>
</body>
</html>

服务端

//fetch服务
app.all('/fetch-server',(request,response)=>{
    //设置响应头
    response.setHeader('Access-Control-Allow-Origin','*');
    response.setHeader('Access-Control-Allow-Headers','*');
    const data = {name: 'xxx'};
    // //定时器
    setTimeout(() => {
        response.send(JSON.stringify(data));
    }, 1000);
    
});

XMLHttpRequest超时与网络异常请求

前端

<!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>Document</title>
    <style>
        #div1{
            width: 300px;
            height: 300px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div id="div1">

    </div>
    <button>点我发送请求</button>
    <script>
        const btn = document.getElementsByTagName('button')[0];
        const result = document.getElementById('div1');

        //绑定事件
        btn.addEventListener("click",function(){
            //1.创建对象
            const xhr = new XMLHttpRequest();
            //超时设置
            xhr.timeout = 2000;
            //超时回调
            xhr.ontimeout = function(){
                alert("网络异常，请稍后重试！！！");
            }
            //网络异常回调
            xhr.onerror = function(){
                alert("你的网络似乎出了一些问题！");
            }
            //2.初始化 设置请求方法和url
            xhr.open('GET',"http://localhost:xxx/delay");
            //设置请求头
            //Content-Type  设置请求体内容的类型
            xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
            //3.发送
            xhr.send();
            //4.事件绑定
            xhr.onreadystatechange = function(){
                //判断
                if(xhr.readyState==4){
                    //判断响应状态码
                    if(xhr.status >= 200 && xhr.status < 300){
                        //处理服务器端结果  行 头 空行 体
                        //1.响应行
                        result.innerHTML = xhr.response;//响应体
                    }
                }
            }
        })

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

服务端

//延迟响应
app.all('/delay',(request,response)=>{
    //设置响应头
    response.setHeader('Access-Control-Allow-Origin','*');
    response.setHeader('Access-Control-Allow-Headers','*');
    //定时器
    setTimeout(() => {
        response.send("延迟响应");
    }, 1000);
});

express使用配置

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

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

//3.服务器端代码


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

夏小花花

关注

3
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
创建AJAX五大基本步骤

同步和异步的区别？同步提交：当用户发送请求时，当前页面不可以使用，服务器将数据响应页面到客户端，响应完成后，用户才可以使用页面。异步提交：当用户发送请求时，当前页面还可以继续使用，当异步请求的数据响应给页面，页面把数据显示出来。
复制链接

扫一扫