Ajax 详解

叫兽~~

已于 2022-12-12 22:25:43 修改

阅读量634

点赞数 3

分类专栏： Ajax

于 2022-07-22 11:46:05 首次发布

本文链接：https://blog.csdn.net/m0_55557411/article/details/125928108

版权

Ajax 异步请求局部刷新 XMLHttpRequest 网络请求

关键词由CSDN通过智能技术生成

Ajax 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、简介：

二、优点：

1、页面局部刷新。

2、可以充分利用客户端闲置的处理能力，减轻服务器和网路传输的负担

3、使web中界面与应用相分离也可以说是数据与呈现相分离

4、 Ajax可发同步请求，也可发出异步请求。但大多数情况下指的是异步请求，因为同步的Ajax请求对浏览器会产生“阻塞效应”。

三、 ajax处理网络请求步骤：

四、原生Ajax写法：

一、简介：

ajax (Asynchronous Javascript And XML)其实就是异步的javaScript和XML。

XML：<html>这是html标签，XML格式是一样的可以自定义<name> <age> 满足标记语言的格式就可以了。

AJAX不是一门新语言，是综合HTTP异步通信、JS、XML、以及JSON等多种网络技术的一种编程模型。

AJAX ~= JS+ xml+JSON + HTTP通信，本质就是在HTTP协议的基础上以异步的方式与服务器进行通信。

二、优点：

ajax别称叫做 无刷新技术 比如地图、局部加载

1、页面局部刷新。

在读取数据的过程中，用户所面对的不是白屏，而是原来页面的转台，或者正在更新的信息提示状态，只有当接收到全部数据后才更新相应部分的内容，而这种更新也是瞬间的用户几乎感觉不到

2、可以充分利用客户端闲置的处理能力，减轻服务器和网路传输的负担

3、使web中界面与应用相分离也可以说是数据与呈现相分离

4、 Ajax可发同步请求，也可发出异步请求。但大多数情况下指的是异步请求，因为同步的Ajax请求对浏览器会产生“阻塞效应”。

三、 ajax处理网络请求步骤：

通过XMLHttpRequest类创建xhr对象
令xhr对象执行open()方法，并指定该HTTP请求的方法、URL及验证信息.
令xhr对象执行send()方法，发出请求。
给xhr对象，绑定onreadystatechange事件，获取调用返回的数据
在onreadystatechange事件里，判断readyState状态，判断响应状态码，拿到数据

四、原生Ajax写法：

onreadystatechange事件讲解

<!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>
</head>

<body>
    <button id="btn">点击发送请求</button>
    <textarea name="" id="textarea" cols="30" rows="10"></textarea>
</body>

</html>
<script>
    btn.addEventListener('click', function () {
        //创建AJAX对象
        var xhr = new XMLHttpRequest();
        //初始化
        xhr.open('GET', 'http://127.0.0.1')
        //发送
        xhr.send()

        //事件绑定 处理服务端返回的结果 方法一
        // xhr.onload = function (){
        //     let result = xhr.responseText
        //     console.log(result);
        // }

        //事件绑定 处理服务端返回的结果 方法二
        // onreadystatechange: 可拆分为
        //     (1).on  当.....的时候
        //     (2).readstate 是 xhr 对象中的属性，表示5个状态 
        //           0:(最开始时)    1:(上面open方法调用完)    2:(上面send方法调用完) 
        //           3:(服务端返回了部分的结果)    4:(服务端返回了所有)
        //     (3).change 改变
        xhr.onreadystatechange = function (result) {
            //readstate 是 xhr 对象中的属性，表示5个状态：
            // 0:(最开始时)    1:(上面open方法调用完)    2:(上面send方法调用完)  
            // 3:(服务端返回了部分的结果)    4:(服务端返回了所有)
            if (xhr.readyState === 4) {
                // 判断响应状态码【2开头的的状态码都为成功】 200 404 403 401 500
                if (xhr.status >= 200 && xhr.status < 300) {
                    //处理结果   行  头  空行  体
                    // 响应
                    console.log(xhr.status);  //状态码
                    console.log(xhr.statusText);  //状态字符串
                    console.log(xhr.getAllResponseHeaders());  //所有响应头
                    console.log(xhr.response);  //响应体

                    // 设置 result 的文本
                    textarea.innerHTML = xhr.response
                }
            }
        }
    })
</script>

服务器代码：

//加载 http 请求
var http = require("http");
// 创建http请求服务器
let server = http.createServer();
// 接受客户端发送过来的request请求，并且返回结果
server.on("request",(request,response)=>{
    console.log('收到客户端请求了');
    //设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*')
    //解决中文乱码
    response.setHeader('Content-Type','text/plain; charset=utf-8')
    // 设置响应体
    response.end('啊对对对')
})

// 发送http请求，并设置监听，端口号默认80
server.listen("80",function(){
    console.log('服务器启动成功了，可以通过 http://127.0.0.1 访问');
});