ajax的理解

catino

已于 2023-01-09 17:02:27 修改

阅读量113

点赞数

分类专栏： AJAX JavaScript 文章标签： ajax javascript

于 2023-01-05 16:23:29 首次发布

本文链接：https://blog.csdn.net/m0_50953782/article/details/128565135

版权

JavaScript 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

AJAX

1 篇文章 0 订阅

订阅专栏

什么是ajax

ajax(Asynchronous JavaScript And XML),是一种从网页访问Web服务器的技术，仅组合了浏览器内建的XMLHttpRequest对象（从web服务器请求数据）与JavaScript、HTML DOM（显示或使用数据）并非编程语言，通过ajax能够不刷新页面更新网页，在页面加载后从服务器请求/接收数据，在后台向服务器发送数据。

ajax应用程序可能使用XML来传输数据，当将数据作为纯文本或JSON文本传输也同样常见。Ajax允许通过场景后面的web服务器交换数据来异步更新网页，故可以不刷新整个页面去更新网页的部分。

ajax的工作原理

当页面发生了某个事件时（如点击按钮，页面加载）->由JavaScript创建XMLHttpRequest对象->XMLHttpRequest对象向web服务器发送请求->服务器处理该请求->服务器将响应发送回网页->由JavaScript读取响应->由JavaScript执行正确的动作（如更新页面）

ajax的核心

ajax的核心是XMLHttpRequest对象。所有现代浏览器（Chrome、IE7+、firefox、Safari、Opera）都支持XMLHttpRequest对象，都有内建的 XMLHttpRequest 对象。

创建XMLHttpRuquest对象

现代浏览器创建XMLHttpRequest的语法

variable= new XMLHttpRequest();

老版本的IE（IE5、IE6）使用ActiveX对象

variable = new ActiveXObject("Microsoft.XMLHTTP");

对了应对所有浏览器，可检查浏览器是否支持XMLHttpRequest对象

var xhttp;
if (window.XMLHttpRequest) {
//用于现代浏览器
xhttp = new XMLHttpRequest();
} else {
// 用于老版本的IE浏览器（IE5 、IE6)
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

XMLHttpRuquest对象方法

方法	描述
new XMLHttpRequest()	创建新的 XMLHttpRequest 对象
abort()	取消当前请求
getAllResponseHeaders()	返回头部信息
getResponseHeader()	返回特定的头部信息
open(method, url, async, user, psw)	规定请求 method：请求类型 GET 或 POST url：文件位置 async：true（异步）或 false（同步） user：可选的用户名称 psw：可选的密码
send()	将请求发送到服务器，用于 GET 请求
send(string)	将请求发送到服务器，用于 POST 请求
setRequestHeader()	向要发送的报头添加标签/值对

向服务器发送请求

向服务器发送请求，我们使用XMLHttpRequest对象的open（）和send（）方法

xhttp.open("GET", "demo_get.asp?t=" + Math.random(), true);（向URL添加一个唯一的ID避免获得一个缓存的结果）

xhttp.send();

使用GET还是POST

GET比POST更简单更快，适用于大多数情况，但在下述情况时请使用POST:

1.缓存文件不是选项（更新服务器上的文件或数据库）

2.向服务器发送大量数据（POST无大小限制）

3.发送用户输入（可包含未知字符），POST比GET更加强大安全。

XMLHttpRuquest对象属性

属性	描述
onreadystatechange	定义当 readyState 属性发生变化时被调用的函数
readyState	保存 XMLHttpRequest 的状态。 0：请求未初始化 1：服务器连接已建立 2：请求已收到 3：正在处理请求 4：请求已完成且响应已就绪
responseText	以字符串返回响应数据
responseXML	以 XML 数据返回响应数据
status	返回请求的状态号 200: "OK" 403: "Forbidden" 404: "Not Found" 如需完整列表请访问 Http 消息参考手册
statusText	返回状态文本（比如 "OK" 或 "Not Found"）

每当readyState 发生变化时就会调用 onreadystatechange 函数，当 readyState 为 4，status 为 200 时，响应就绪如：

function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML =
this.responseText;
}
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
}

POST 使用示例：

<body>
    <div id='result'></div>
    <script>
        //获取元素的对象
        const result = document.getElementById("result");
        //绑定事件
        result.addEventListener("mouseover",function(){
            //创建对象
            const xhr = new XMLHttpRequest();
            // 初始化 设置类型与URL
            xhr.open('POST','http://127.0.0.1:8000/server');
            //设置请求头，第一个头的名字，第二个头的值
            xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
            //自定义，不是预定义的而是自定义的，浏览器会有安全的机制，需要加特殊的响应头
            xhr.setRequestHeader('name','hhhhh')
            // 发送
            // xhr.send("a=100&b=200&c=300")
            xhr.send();
            // 事件绑定
            xhr.onreadystatechange = function(){
                // 判断
                if(xhr.readyState ===4){
                    if(xhr.status >=200 && xhr.status < 300){
                        // 处理服务器端返回的结果
                        result.innerHTML = xhr.response;
                    }
                }
            }
        })
    </script>
</body>

catino

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajax的理解

ajax(Asynchronous JavaScript And XML),是一种从网页访问Web服务器的技术，仅组合了浏览器内建的XMLHttpRequest对象（从web服务器请求数据）与JavaScript、HTML DOM（显示或使用数据）并非编程语言，通过ajax能够不刷新页面更新网页，在页面加载后从服务器请求/接收数据，在后台向服务器发送数据。向服务器发送请求，我们使用XMLHttpRequest对象的open（）和send（）方法。（向URL添加一个唯一的ID避免获得一个缓存的结果）
复制链接

扫一扫

专栏目录