Ajax

最新推荐文章于 2024-08-12 13:02:56 发布

姓徐名凤明

最新推荐文章于 2024-08-12 13:02:56 发布

阅读量120

点赞数

分类专栏：仅供个人学习文章标签： ajax

本文链接：https://blog.csdn.net/weixin_44175845/article/details/114696238

版权

仅供个人学习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

AJAX

AJAX简介

AJAX 全称为 Asynchronous JavaScript And XML，就是异步的 JS 和 XML。
通过 AJAX 可以在浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据。
AJAX 不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式。

XML简介
- XML 可扩展标记语言。
- XML 被设计用来传输和存储数据。
- XML 和 HTML 类似，不同的是 HTML 中都是预定义标签，而 XML 中没有预定义标签，全都是自定义标签，用来表示一些数据。
  
  比如说我有一个学生数据:
  name=“孙悟空”;age=18;gender=“男”;
  
  用XML表示：
```
<student>
	<name>孙悟空</name>
    <age>18</age>
    <gender>男</gender>
</student>
```
现在被JSON取代了:
```
{"name"："孙悟空","age":"18","gender":"男"}
```
AJAX的特点
1. AJAX的优点
  - 可以无需刷新页面与服务器端进行通信
  - 允许你根据用户事件来更新部分页面内容
2. AJAX的缺点
  - 没有浏览记录，不能回退
  - 存在跨域问题
  - SEO(Search Engine Optimization 搜索引擎优化)不友好

express框架的基本使用

//1.引入express
const express=require("express");
//2.创建应用对象
const app=express();
//3.创建路由规则
app.get('/',(request,response)=>{
    //设置响应
    response.send("hello express");
});

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

原生AJAX-GET请求

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AJAX GET 请求</title>
    <style type="text/css">
        #result{
            width: 200px;
            height: 100px;
            border: solid 1px #9900bb;
        }
    </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 () {
            //创建对象
            const xhr=new XMLHttpRequest();
            //初始化，设置请求方法和url
            xhr.open('GET','http://localhost:8000/server');
            //发送
            xhr.send();
            //事件绑定，处理服务端返回的结果
            xhr.onreadystatechange=function () {
                //判断（服务端返回了所有的响应结果）
                if(xhr.readyState===4){
                    //判断响应状态码
                    if(xhr.status>=200&&xhr.status<300){
                        //处理结果
                        result.innerHTML=xhr.response;
                    }else{

                    }
                }
            }

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

js代码

//1.引入express
const express=require("express");
//2.创建应用对象
const app=express();
//3.创建路由规则
app.get('/server',(request,response)=>{
    //设置响应头
    response.setHeader('Access-Control-Allow-Origin','*');

    //设置响应
    response.send("hello AJAX");
});


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

原生AJAX-POST请求

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AJAX POST 请求</title>
    <style type="text/css">
        #result{
            width: 200px;
            height: 100px;
            border: solid 1px #9900bb;
        }
    </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();
            //事件绑定
            xhr.onreadystatechange=function () {
                //判断
                if(xhr.readyState===4){
                    if(xhr.status>=200&&xhr.status<300){
                        //处理服务端返回的结果
                        result.innerHTML=xhr.response;
                    }
                }
            }
        })

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

js代码

//1.引入express
const express=require("express");
//2.创建应用对象
const app=express();
//3.创建路由规则
app.post('/server',(request,response)=>{
    //设置响应头
    response.setHeader('Access-Control-Allow-Origin','*');

    //设置响应
    response.send("hello AJAX POST");
});
//4.监听端口启动服务
app.listen(8000,()=>{
    console.log("服务已经启动，8000端口被监听")
});

AJAX服务端响应JSON数据

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JSON响应</title>
    <style type="text/css">
        #result{
            width: 200px;
            height: 100px;
            border: solid 1px #9900bb;
        }
    </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.send();
            //事件绑定
            xhr.onreadystatechange=function () {
                //判断
                if(xhr.readyState===4){
                    if(xhr.status>=200&&xhr.status<300){
                        //处理服务端返回的结果
                        result.innerHTML=xhr.response;
                    }
                }
            }
        }
    </script>
</body>
</html>

js代码

//1.引入express
const express=require("express");
//2.创建应用对象
const app=express();
//3.创建路由规则
app.all('/json-server',(request,response)=>{
    //设置响应头
    response.setHeader('Access-Control-Allow-Origin','*');

    //设置响应
    //响应一个对象
    const data={
        name: 'fmxu'
    };
    //对对象进行字符串转换
    let str=JSON.stringify(data)
    response.send(str);
});
//4.监听端口启动服务
app.listen(8000,()=>{
    console.log("服务已经启动，8000端口被监听")
});

AJAX的请求超时和网络异常

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>请求超时和网络异常</title>
    <style type="text/css">a
        #result{
            width: 200px;
            height: 100px;
            border: solid 1px #9900bb;
        }
    </style>
</head>
<body>
    <button>点击发送请求</button>
    <div id="result"></div>
    <script>
        //获取元素对象
        const btn=document.getElementsByTagName("button")[0];
        const result=document.getElementById("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>

js代码

//1.引入express
const express=require("express");
//2.创建应用对象
const app=express();
//3.创建路由规则
//延时响应
app.get('/delay',(request,response)=>{
    //设置响应头
    response.setHeader('Access-Control-Allow-Origin','*');
    setTimeout(()=>{
        //设置响应体
        response.send('延时响应');
    },3000)

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

姓徐名凤明

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Ajax

AJAXAJAX简介AJAX 全称为 Asynchronous JavaScript And XML，就是异步的 JS 和 XML。通过 AJAX 可以在浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据。AJAX 不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式。XML简介XML 可扩展标记语言。XML 被设计用来传输和存储数据。XML 和 HTML 类似，不同的是 HTML 中都是预定义标签，而 XML 中没有预定义标签，全都是自定义标签，用来
复制链接

扫一扫