AJAX交互模型与第一个Ajax案例（JS实现）

最新推荐文章于 2024-06-10 21:19:11 发布

MR_Radish666

最新推荐文章于 2024-06-10 21:19:11 发布

阅读量3.2k

点赞数

分类专栏： Ajax 文章标签： ajax xmlhttprequest

本文链接：https://blog.csdn.net/q361239731/article/details/53560428

版权

Ajax 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

交互模型看下面2张图就知道了。

这里写图片描述
Ajax

1、创建XmlHttpRequest对象

<script type="text/javascript">
function ajaxFunction() {
    var xmlHttp;

    try {
        // Firefox, Opera 8.0+, Safari
        xmlHttp = new XMLHttpRequest();
    } catch (e) {

        // Internet Explorer
        try {
            xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {

            try {
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {
                alert("您的浏览器不支持AJAX！");
            }
        }
    }
    return xmlHttp;
}
</script>

2、注册状态事件监听器（回馈结果）

xhr.onreadystatechange = function(){
    //alert(xhr.readyState);
    if(xhr.readyState == 4) { //4表示准备好
        if(xhr.status == 200) { //200表示服务器请求正常
            alert("异步请求成功，请查看结果");
        }
    }
}

3、建立与服务器的链接（这里采用的是Servlet作为服务器端的响应，需要部署到Tomcat上运行，你也可以使用HTTP。或者直接请求www.baidu.com即可）

xhr.open("GET", "/TestAjax/servlet/TestServlet?time=" + new Date().getTime());

4、发出异步请求

xhr.send(null); //GET不请求正文，send（null）即可

HTML文件内容：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>异步请求的编码步骤</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="./js/getHttpRequest.js"></script>
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    <script type="text/javascript">
        window.onload=function(){
            document.getElementById("b1").onclick = function(){
                //1.获得XmlHttpRequest对象
                var xhr = getXmlHttpRequest();
//                 alert(xhr);
                //2.注册事件监听器
                xhr.onreadystatechange = function(){
//                     alert(xhr.readyState);
                    if(xhr.readyState == 4) { //4表示准备好
                        if(xhr.status == 200) { //200表示服务器请求正常
                            alert("异步请求成功，请查看结果");
                        }
                    }
                }
                //3.连接服务器
                xhr.open("GET", "/TestAjax/servlet/TestServlet?time=" + new Date().getTime());
                //4.发送请求(post)
                xhr.send(null); //GET不请求正文
            }
        }
    </script>
  </head>

  <body>
    <input type="button" id="b1" value="异步通信测试"/>
  </body>
</html>

XMLHttpRequset属性

l属性
readyState：类型short；只读。代表当前Ajax引擎的状态
这里写图片描述
0：表示连接还没有建立
1：表示已于服务器连接已经建立，但是send（）方法没有被调用（没有发送数据）
2：表示请求数据已经发送，但是还没有收到回应。
3：表示已经收到响应头，但是还没有收到正文
4：表示已经收到了完整的响应头。
status：类型short；只读。服务器端返回的响应码，正常的话返回200；

statusText：类型String；只读。服务器端返回的响应码描述。比如OK。

responseText：类型String；只读。表示服务器端用resopnse.getWriter.writer(“”);返回的文本数据
responseXML：类型Document；只读。表示服务器端返回的是XML的文档（Document）
l方法：
abort() ：终止异步请求
getAllResponseHeaders() ：得到所有的响应消息头和值，返回一个字符串
getResponseHeader(HeaderName) ：得到指定的响应消息头的值，返回一个字符串
open(method,url) ：建立与服务器端的链接
send(“k1=v1&k2=v2”) ：向服务器端发送请求正文
setRequestHeader(headerName, headerValue)：向服务器传递请求消息头
l事件处理器
onreadystatechange：对应一个函数，回调函数。每一次readyState的值发生变化，就会执行这个函数

MR_Radish666

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
AJAX交互模型与第一个Ajax案例（JS实现）

交互模型看下面2张图就知道了。 Ajax1、创建XmlHttpRequest对象<script type="text/javascript">function ajaxFunction() { var xmlHttp; try { // Firefox, Opera 8.0+, Safari xmlHttp = new XMLHttpRequest(
复制链接

扫一扫