Ajax基础知识

最新推荐文章于 2023-05-20 19:04:46 发布

linqunbin

最新推荐文章于 2023-05-20 19:04:46 发布

阅读量79

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/linqunbin/article/details/91351262

版权

JavaScript 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

向服务器发送请求
利用XMLHttpRequest实例与服务器进行通信包含以下3个关键部分
-onreadystatechange:事件处理函数
-open方法
规定请求的类型、URL 以及是否异步处理请求。
method：请求的类型；GET 或 POST
url：文件在服务器上的位置
async：true（异步）或 false（同步）

-send方法
将请求发送到服务器。
string：仅用于 POST 请求

onreadystatechange
-该事件处理函数由服务器触发,而不是用户
-在Ajax执行过程中,服务器会通知客户端当前的通信状态.这依靠更新XMLHttpRequest对象的readyState来实现.改变readyState属性是服务器对客户端连接操作的一种方式.每次readyState属性的改变,都会触发readystatechange事件.
-当请求被发送到服务器时，我们需要执行一些基于响应的任务。
-每当 readyState 改变时，就会触发 onreadystatechange 事件。
-readyState 属性存有 XMLHttpRequest 的状态信息。

从服务器接收相应请求

readyState
-readyState属性表示Ajax请求的当前状态.它的值用数字表示:
0:代表未初始化.还没有调用open方法
1:表示正在加载.open方法已被调用,但send方法还没有调用
2:代表已加载完毕.send已被调用.请求已经开始
3:代表交互中.服务器正在发送相应
4:代表完成.响应发送完毕
-每次readyState值的改变,都会触发readstatechange事件.如果把onreadystatechange事件处理函数赋给一个函数,那么每次readyState值的改变都会引发函数的执行
-readyState值的变化,会因游览器不同而有所差异.但是,当请求结束的时候,每个游览器都会把readyState的值统一设为4.

status
-服务器发送的每一个响应也都带有首部信息.三位数的状态码是服务器发送的响应中最重要的首部信息,并且属于超文本传输协议中的一部分.
-常用状态码及其含义:
404没有找到页面(not found)
403禁止访问(forbidden)
500内部服务器出错(internal service error)
200一切正常(ok)
304没有被修改(not modified)
-在XMLHttpRequest对象中,服务器发送的状态码都保存在status属性里.通过把这个值和200或304比较,可以确保服务器是否已发送一个成功的响应.

responseText
-XMLHttpRequest的respondseText属性包含了从服务器发送的数据.它是一个HTML,XML或普通文本,这取决于服务器发送的内容.
-当readyState属性值编程4时,responseText属性才可用,表名Ajax请求已经结束.

Ajax GET请求代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        window.onload = function(){
            // 1 获取节点,并将其作为单击响应函数
            var test = document.getElementById('test');
            test.onclick = function(){
                // 3 创建一个XMLHttpRequest对象
                var request = new XMLHttpRequest();

                // 4 准备发送请求数据:url,
                // '?test' + new Date(),这里加上时间轴,是为了让每次请求连接地址不一样,从而避免缓存.
                var url = this.href + '?test' + new Date();
                var method = 'GET';

                // 5 调用 XMLHttpRequest 对象 的open方法
                request.open(method, url);

                // 6 XMLHttpRequest 对象 send方法
                request.send(null);

                // 7 为 XMLHttpRequest 对象添加 onreadystatechangge 响应函数
                request.onreadystatechange = function(){

                    // 8 判断响应是否完成:XMLHttpRequest 对象readystate属性值为4的时候
                    if(request.readyState == 4){

                        // 9 再判断响应是否可用:XMLHttpRequest 对象status属性值为200
                        if(request.status == 200 || request.status == 304){
                            
                            // 10 打印响应结果 responseText
                            // alert(request.responseText);
                            document.getElementById('ajax').innerHTML = request.responseText;
                        };
                    };
                };
                // 2 取消节点的默认行为
                return false
            }
        }
    </script>
</head>
<body>
    <a id="test" href="test.txt">这是一个测试</a>
    <span id="ajax"></span>
</body>
</html>

linqunbin

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax基础知识

向服务器发送请求利用XMLHttpRequest实例与服务器进行通信包含以下3个关键部分-onreadystatechange:事件处理函数-open方法规定请求的类型、URL 以及是否异步处理请求。method：请求的类型；GET 或 POSTurl：文件在服务器上的位置async：true（异步）或 false（同步）-send方法将请求发送到服务器。string：仅用于 ...
复制链接

扫一扫

专栏目录