创建AJAX五大基本步骤

简介: 创建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端口监听中");
})
目录
相关文章
|
5月前
|
前端开发
Ajax请求步骤(十)
Ajax请求步骤(十)
|
9月前
|
前端开发
前端学习笔记202306学习笔记第四十三天-ajax的经典四大步骤3
前端学习笔记202306学习笔记第四十三天-ajax的经典四大步骤3
53 0
|
9月前
|
前端开发
前端学习笔记202306学习笔记第四十三天-ajax的经典四大步骤1
前端学习笔记202306学习笔记第四十三天-ajax的经典四大步骤1
44 0
|
9月前
|
前端开发
前端学习笔记202306学习笔记第四十三天-ajax的经典四大步骤4
前端学习笔记202306学习笔记第四十三天-ajax的经典四大步骤4
42 0
|
9月前
|
前端开发
前端学习笔记202306学习笔记第四十三天-ajax的经典四大步骤2
前端学习笔记202306学习笔记第四十三天-ajax的经典四大步骤2
39 0
|
Web App开发 前端开发 JavaScript
使用AJAX基本步骤
使用AJAX基本步骤
137 0
使用AJAX基本步骤
|
XML 前端开发 JavaScript
Ajax 使用的基本场景和步骤| 学习笔记
快速学习 Ajax 使用的基本场景和步骤。
87 0
Ajax 使用的基本场景和步骤| 学习笔记
|
前端开发 开发者
Ajax 中4个步骤的讲解| 学习笔记
快速学习 Ajax 中4个步骤的讲解。
90 0
Ajax 中4个步骤的讲解| 学习笔记
express学习46-ajax实现步骤
express学习46-ajax实现步骤
77 0
express学习46-ajax实现步骤
|
前端开发
Ajax-05:Ajax请求的基本步骤
Ajax-05:Ajax请求的基本步骤
146 0
Ajax-05:Ajax请求的基本步骤