【ajax】

最新推荐文章于 2024-06-14 10:21:04 发布

上厕所不擦腚

最新推荐文章于 2024-06-14 10:21:04 发布

阅读量418

点赞数

分类专栏： ajax 文章标签： ajax 服务器 javascript

本文链接：https://blog.csdn.net/weixin_44570089/article/details/122110636

版权

ajax 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

ajax

文章目录

前言
一、什么是ajax？
二、使用步骤

前言

ajax学习ing 笔记

提示：以下是本篇文章正文内容，下面案例可供参考

一、什么是ajax？

1.通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。 2.工作原理：

参考图片

3.异步和同步的的区别
参考链接

二、使用步骤

1.第一步XMLHttpRequest

作用：XMLHttpRequest 用于在后台与服务器交换数据
兼容：

         var xhr;
        if (window.XMLHttpRequest) {
            //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
            xhr = new XMLHttpRequest();

        } else {
            // IE6, IE5 浏览器执行代码
            xhr = new ActiveXObject("Microsoft.xhr");
        }

2.第二步向服务器发送请求准备数据

代码如下（示例）：

        var url = "./ajax.txt";
        xhr.open("GET", url, true);
        xmlhttp.send();

1.规定请求：open(method,url,async)规定请求的类型、URL 以及是否异步处理请求。
method：请求的类型；GET 或 POST
url：文件在服务器上的位置
async：true（异步）或 false（同步）
2.发送请求：xmlhttp.send(); 将请求发送到服务器。
get和post区别：
参考链接

个人看法：get post都是不安全的，它们两者区别第一个是传输文件大小不同，第二个一个是获取数据一个是可以提交数据和修改的，第三个这直接决定了后面发送请求send()，【send的参数是通过请求体获取的数据】get是拿请求头，而post既可以请求头也可以请求体
参考链接：什么是请求头请求体

3.onreadystatechange 事件【查看请求进度】

XMLHttpRequest 对象的三个重要的属性
一·：onreadystatechange 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
二：readyState readyState 属性存有 XMLHttpRequest 的状态信息。
存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪
三：status 200: “OK” http状态
404: 未找到页面
当 readyState 等于 4 且状态为 200 时，表示响应已就绪：为方便兼容可以放到发送请求上方

4.服务器响应【拿数据】

使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。
responseText：获得字符串形式的响应数据。
responseXML：获得 XML 形式的响应数据。

 xhr.onreadystatechange = () => {
        if (xhr.readyState !== 4) {
            return
        }
        if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) { //http状态 200 为OK 404 not found  服务器端
            console.log(xhr.responseText); //字符串类型
            console.log(typeof xhr.responseText);

            var p = JSON.parse(xhr.responseText); // JSON.parse()将json格式的字符串解析成js对应的值   将js基本字符类型转换为json使用stringify()
            console.log(p.name);
        }
    }