使用 XMLHttpRequest 实现 Ajax

最新推荐文章于 2023-03-22 18:23:25 发布

freely小潘

最新推荐文章于 2023-03-22 18:23:25 发布

阅读量248

点赞数

分类专栏： Ajax

本文链接：https://blog.csdn.net/FreelyLang/article/details/55178131

版权

Ajax 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

使用 XMLHttpRequest 实现 Ajax

XMLHttpRequest最早是在IE5中以ActiveX组件的形式实现的。非W3C标准。
开发时用XMLHttpRequest对象的并不多，这个小案例只是演示以便于了解。
1.XMLHttpRequest方法：
    发请求：
    （1）open（"method","url"） 描述：建立对服务器的调用。method参数可以是GET、POST或PUT,URL参数可以是相对URL或绝对URL.
    （2）send(content) 描述：向服务器发送请求。
2.XMLHttpRequest属性：
    用来接收服务端发送回来的数据（接收响应），需要要到以下几个属性：
    （1）onreadystatechange 每个状态改变都会触发这个事件处理器，通常会调用一个JavaScript函数。
    （2）readystate 请求的状态，有5个可取值：0=未初始化.1=正在加载.2=已经加载.3=交互中.4=完成
    （3）responseText 服务器的响应，表示一个串。
    （4）responseXML 服务器的响应，表示为XML。这个对象可以解析为DOM对象。
    （5）status 服务器的HTTP状态码（200对应OK,404对应NotFount、等）
        服务器发送的每一个响应也都带有首部信息，三位状态码是服务器响应的最重要的首部信息。
        常用状态码及其含义：
            （1）404没有找到页面（not found）
            （2）403禁止访问（forbidden）
            （3）500内部服务器出错（internal service error）
            （4）200一切OK
            （5）304没有被修改（not modify）
            在XMLHttpRequest对象中，服务器发送的状态码都保存在status属性里面。通过这个值和200或304比较，可以确保服务器是否已经发送了一个成功的响应。
    （6）statusText HTTP状态码的响应文本（OK或NoTFount等）

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">

    window.onload = function(){
        //1.获取a节点，并为其添加onclick响应函数
        document.getElementsByTagName("a")[0].onclick = function(){
            //3.创建一个XMLHttpRequest对象
            var request = new XMLHttpRequest();

            //4.准备发送请求数据：url
            var method = "GET";
            //在URL后面加一个时间戳以起到禁用浏览器缓存的效果
            var url = this.href + "?time"+new Date();

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

            //使用POST请求向服务器发送数据，需要将"ContentType"的首部设置为"application/x-www-form-urlencoded"。
            //它会告知服务器正在发送数据，并且数据已经符合URL编码了，该方法只有在open之后才能调用
            //request.setRequestHeader("ContentType","application/x-www-form-urlencoded");
            //6.调用XMLHttpRequest对象的send方法
            request.send("name='panlang'");

            //7.为XMLHttpRequest对象添加onreadystatechange响应函数
            request.onreadystatechange = function(){
                alert(request.readyState);//查看响应各个状态：2,3,4
                //8.判断响应是否完成：XMLHttpRequest对象的readyState属性值为4的时候
                if(request.readyState == 4){
                    //9.在判断响应是否可用：XMLHttpRequest对象status的属性值为200
                    if(request.status == 200||request.status == 304){
                        //10.打印响应结果：responseText
                        alert(request.responseText);
                    }
                }
            }

            //2.取消a节点的默认行为（如果是超链接的话）
            return false;
        }
    }
</script>
</head>
<body>
    <a href="helloAjax.txt">helloAjax</a>
</body>
</html>

利用XMLHttpRequest实例与服务器进行通信包含以下3个关键部分：
（1）onreadystatechange事件处理函数
（2）open方法
（3）send方法
onreadystatechange:
该事件处理函数由服务器触发，而不是用户。
在Ajax执行过程中，服务器会通知客户端当前的通信状态。这依靠更新XMLHttpRequest对象的 readystate来实现。改变readystate属性是服务器对客户端连接操作的一种方式。每次readystate改变都会触发onreadystatechange函数。

freely小潘

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用 XMLHttpRequest 实现 Ajax

使用 XMLHttpRequest 实现 AjaxXMLHttpRequest最早是在IE5中以ActiveX组件的形式实现的。非W3C标准。开发时用XMLHttpRequest对象的并不多，这个小案例只是演示以便于了解。1.XMLHttpRequest方法：发请求：（1）open（"method","url"）描述：建立对服务器的调用。method参数可以是GET、POS
复制链接

扫一扫