AJAX

3.XML的简单易于在任何应用程序中读/写数据，这使XML很快成为数据交换的唯一公共语言，虽然不同的应用软件也支持其他的数据交换格式，但不久之后它们都将支持XML，那就意味着程序可以更容易的与 Windows、 Mac OS、 Linux以及其他平台下产生的信息结合，然后可以很容易加载XML数据到程序中并分析它，并以XML格式输出结果。

4.html是预定义标签，xml是自定义标签。

1.3AJAX的特点

1. ajax的最大的优点就是实现动态不刷新，通过异步方式，来提升用户的体验，同时优化了浏览器和服务器之间的传输

2. 可以把一部分以前由服务器负担的工作转移到客户端，利用客户端闲置的资源进行处理，减轻服务器和带宽的负担，节约空间和成本。

3. 基于 Web标准，使用文档对象模板（Document Object Model）作动态显示和交互；使用XML和XSLT进行数据交换及相关操作；使用XMLHTTPRequest进行异步数据查询和接收；使用JavaScript将所有的东西绑定在一起。

简单来说就是：

//1.引入express
const express = require('express');
//2.创建应用应用对象
const app = express();
//创建路由规则
//request 是请求报文的封装
//response 是对响应报文的封装

app.get('/server', (request, response)=>{
 //设置一个响应头 这只是设置允许跨域
 response.setHeader('Access-Control-Allow-Origin','*');
 //设置响应
 response.send('HELLO EXPRESS');
});

我们右键终端打开执行代码：

输入命令：node 脚本名

得到结果：

这时我们可以看到我们的8000端口正在监听！！

3.AJAX案例

单击网页中的按钮和实现和服务端的交互（GET）

<!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: solid 1px #90b;
        }
    </style>
</head>
<body>
    <button>点击发送请求</button>
    <div id = "result"></div>
    <script>
        //获取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?a=100&b=200&c=300');
           //3.发送
           xhr.send();
           //4.事件绑定 处理服务端返回结果
           //on when 当。。。时候
           xhr.onreadystatechange = function(){
                //判断 （服务端返回了所有的结果）
                if(xhr.readyState === 4){
                    //判断响应状态码 200 404 403 401 500
                    //200-300之间都是成功的
                    if(xhr.status >= 200 && xhr.status <300){
                        //处理结果
                        //处理结果 响应行 头 空 体
                        //1.响应
                        //console.log(xhr.status); //状态码
                        //console.log(xhr.statusText); // 状态字符串
                        //console.log(xhr.getAllResponseHeaders()); //所有响应头
                        //console.log(xhr.response); // 响应体
                        //设置result
                        result.innerHTML = xhr.response;
                    }
                }
           }
        }
    </script>
</body>
</html>

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>AJAX POST 请求</title>
    <style>
        #result{
            width: 200px;
            height: 100px;
            border: solid 1px #909090;
        }
    </style>
</head>
<body>
    <div id = "result"></div>
    <script>
        //获取元素对象
        const result = document.getElementById("result");
        //绑定事件
        result.addEventListener("mouseover",function(){
            //1.创建对象
            const xhr = new XMLHttpRequest();
            //2.初始化 设置类型与 url
            xhr.open('POST','http://127.0.0.1:8000/server');
            //设置请求头
            xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
            xhr.setRequestHeader('name','guoqiang')
            //3.发送
            xhr.send('a=100&b=200&c=300');
            //4.事件绑定
            xhr.onreadystatechange = function(){
                if(xhr.readyState === 4){
                    if(xhr.status >= 200 && xhr.status <300){
                        //处理服务端返回的结果
                        result.innerHTML = xhr.response;
                    }
                }
            }
        });
    </script>
</body>
</html>

服务端代码块：

//1.引入express
const express = require('express');
//2.创建应用应用对象
const app = express();
//创建路由规则
//request 是请求报文的封装
//response 是对响应报文的封装

app.get('/server', (request, response)=>{
    //设置一个响应头 这只是设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
    //设置响应
    response.send('HELLO EXPRESS');
});

app.all('/server', (request, response)=>{
    //设置一个响应头 这只是设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
    //响应头
    response.setHeader('Access-Control-Allow-Headers','*');
    //设置响应
    response.send('HELLO EXPRESS POST');
});

app.all('/json-server', (request, response)=>{
    //设置一个响应头 这只是设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
    //响应头
    response.setHeader('Access-Control-Allow-Headers','*');
    //响应一个数据
    const data = {
        name: 'atguoaing'
    };
    //进行对对象字符串的转化
    let str = JSON.stringify(data);
    response.send(str);
    //设置响应
    response.send('HELLO AJAX JSON');
});

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

实现效果

5.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>
    <style>
        #result{
            width: 200px;
            height: 100px;
            border: solid 1px #898989;
        }
    </style>
</head>
<body>
    <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.responseType = 'json';
            xhr.send();
            xhr.onreadystatechange = function(){
                if(xhr.readyState === 4){
                    if(xhr.status >= 200 && xhr.status < 300){
                        //console.log(xhr.response);
                        //result.innerHTML = xhr.response;
                        //手动对数据进行转化
                        //let data = JSON.parse(xhr.response);
                        //console.log(data);
                         //result.innerHTML = data.name;
                        //自动转换
                        console.log(xhr.response);
                        result.innerHTML = xhr.response.name; 
                    }
                }
            }
        }
    </script>
</body>
</html>

服务端代码块

//1.引入express
const express = require('express');
//2.创建应用应用对象
const app = express();
//创建路由规则
//request 是请求报文的封装
//response 是对响应报文的封装

app.get('/server', (request, response)=>{
    //设置一个响应头 这只是设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
    //设置响应
    response.send('HELLO EXPRESS');
});

app.all('/server', (request, response)=>{
    //设置一个响应头 这只是设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
    //响应头
    response.setHeader('Access-Control-Allow-Headers','*');
    //设置响应
    response.send('HELLO EXPRESS POST');
});

app.all('/json-server', (request, response)=>{
    //设置一个响应头 这只是设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
    //响应头
    response.setHeader('Access-Control-Allow-Headers','*');
    //响应一个数据
    const data = {
        name: 'atguoaing'
    };
    //进行对对象字符串的转化
    let str = JSON.stringify(data);
    response.send(str);
    //设置响应
    response.send('HELLO AJAX JSON');
});

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

实现效果图:

6.AJAX案例

针对ie缓存问题，的解决办法：

<!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: 100px;
            border: solid 1px greenyellow;
        }
    </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.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>

服务端代码块：

//1.引入express
const express = require('express');
//2.创建应用应用对象
const app = express();
//创建路由规则
//request 是请求报文的封装
//response 是对响应报文的封装

app.get('/server', (request, response)=>{
    //设置一个响应头 这只是设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
    //设置响应
    response.send('HELLO EXPRESS');
});

app.all('/server', (request, response)=>{
    //设置一个响应头 这只是设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
    //响应头
    response.setHeader('Access-Control-Allow-Headers','*');
    //设置响应
    response.send('HELLO EXPRESS POST');
});

app.all('/json-server', (request, response)=>{
    //设置一个响应头 这只是设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
    //响应头
    response.setHeader('Access-Control-Allow-Headers','*');
    //响应一个数据
    const data = {
        name: 'atguoaing'
    };
    //进行对对象字符串的转化
    let str = JSON.stringify(data);
    response.send(str);
    //设置响应
    response.send('HELLO AJAX JSON');
});
//针对ie缓存
app.get('/ie', (request, response)=>{
    //设置一个响应头 这只是设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
    //设置响应
    response.send('HELLO ie');
});
//延迟响应
app.get('/eelay', (request, response)=>{
    //设置一个响应头 这只是设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
    //设置一个定时器
    setTimeout(() => {
        response.send('延迟响应');
    },3000)
    //设置响应
    
});


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

7.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>
    <style>
        #result{
            width: 200px;
            height: 100px;
            border: solid 1px red;
        }
    </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();
            //超时设置 2 秒 ，如果两秒没有返回结果我们就取消
            xhr.timeout = 2000;
            //超时的回调
            xhr.ontimeout = function(){
                alert("网络异常请稍后重试！！");
            }
            //网络异常回调
            xhr.onerror = function(){
                alert("你的网路似乎出现了一点问题！！")
            }

            xhr.open('GET','http://127.0.0.1:8000/eelay');
            xhr.send();
            xhr.onreadystatechange = function(){
                if(xhr.readyState === 4){
                    if(xhr.status >= 200 && xhr.status < 300){
                        result.innerHTML = xhr.response;
                    }
                }
            }
        })

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

服务端代码块：

//1.引入express
const express = require('express');
//2.创建应用应用对象
const app = express();
//创建路由规则
//request 是请求报文的封装
//response 是对响应报文的封装

app.get('/server', (request, response)=>{
    //设置一个响应头 这只是设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
    //设置响应
    response.send('HELLO EXPRESS');
});

app.all('/server', (request, response)=>{
    //设置一个响应头 这只是设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
    //响应头
    response.setHeader('Access-Control-Allow-Headers','*');
    //设置响应
    response.send('HELLO EXPRESS POST');
});

app.all('/json-server', (request, response)=>{
    //设置一个响应头 这只是设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
    //响应头
    response.setHeader('Access-Control-Allow-Headers','*');
    //响应一个数据
    const data = {
        name: 'atguoaing'
    };
    //进行对对象字符串的转化
    let str = JSON.stringify(data);
    response.send(str);
    //设置响应
    response.send('HELLO AJAX JSON');
});
//针对ie缓存
app.get('/ie', (request, response)=>{
    //设置一个响应头 这只是设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
    //设置响应
    response.send('HELLO ie');
});
//延迟响应
app.get('/eelay', (request, response)=>{
    //设置一个响应头 这只是设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
    //设置一个定时器
    setTimeout(() => {
        response.send('延迟响应');
    },3000)
    //设置响应
    
});


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

编辑于 2022-04-24 18:16

Ajax

JavaScript

HTML5

AJAX

1.1AJAX 简介

1.2XML简介

1.3AJAX的特点

1.3.1AJAX的优点：

1.3.2AJAX的缺点：

1.4环境配置：

2.Express 基于 Node.js平台的服务端框架

3.AJAX案例

4..AJAX案例

5.AJAX案例

6.AJAX案例

7.AJAX案例