WEB开发中的AJAX请求

最新推荐文章于 2024-05-07 22:11:26 发布

lezizai_happy

最新推荐文章于 2024-05-07 22:11:26 发布

阅读量820

点赞数 1

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

本文链接：https://blog.csdn.net/lezizai_happy/article/details/51571156

版权

Ajax 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

web开发中ajax请求常见常用，现在总结以下用法：

1. 使用XMLHttpRequest实现Ajax请求
index.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>My JSP 'index.jsp' starting page</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 url=this.href +"?time="+new Date();
             var method="GET";
             //var method="POST"
             //5.调用xmlhttprequest对象的open方法
             request.open(method,url);
             //POST 请求时要设置        //request.setRequestHeader("ContentType",
//           "application/x- www-form-urlencoded");
             //且该方法必须在在open方法之后，send方法之前使用
             //6.调用xmlhttprequest对象的send方法
             request.send(null);
             //request.send("name='aaa'");
             //7.为xmlhttprequest对象添加onreadystatechange响应函数
             request.onreadystatechange=function(){
                //8.决断响应是否完成：xmlhttprequest对象的readystate属性值为4
                 if(request.readyState==4){
                    //9.再决断响应是否可用：xmlhttprequest对象status属性值为200
                     if(request.status==200){
                        //10.打印响应结果：responseText
                        alert(request.responseText);
                     }
                 }
             }
             //2.取消a节点的默认行为
             return false;
        }
    }
    </script>
  </head>

  <body>
    <a href="helloAjax.txt">HelloAjax</a>
  </body>
</html>

helloAjax.txt

Hello Ajax!^_^

在使用原生的XMLHttpRequest做ajax请求时，注意post请求与get请求的不同；注意接受响应时存在responseText属性，和responseXML属性。

如果服务器返回的是XML，则数据会存储在responseXML属性中，只有服务器发送了带有正确首部信息的数据时，responseXML属性才有用。MIME类型必须为text/xml。

2. ajax请求 html 格式数据

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>My JSP 'index.jsp' starting page</title>
  <script type="text/javascript">
    window.onload=function(){
        var aNodes=document.getElementsByTagName("a");
        for(var i=0;i<aNodes.length;i++){
            aNodes[i].onclick=function(){
                var request=new XMLHttpRequest();
                var method="GET";
                var url=this.href;
                request.open(method,url);
                request.send(null);
                request.onreadystatechange=function(){
                    if(request.readyState==4){
                        if(request.status==200){
                            document.getElementById("details").innerHTML=request.responseText;
                        }
                    }
                }
                return false;
            }
        }
    }

  </script>
  </head>

  <body>
    <h1>People</h1>
    <ul>
        <li><a href="files/andy.html">Andy</a></li>
        <li><a href="files/richard.html">Richard</a></li>
        <li><a href="files/jeremy.html">Jeremy</a></li>
    </ul>
    <div id="details"></div>
  </body>
</html>

andy.html

<h2><a href="andy@qq.com">Andy Budd</a></h2>
<a href="http://anybudd.com">http://anybudd.com</a>

效果图：
这里写图片描述

3.ajax请求XML格式数据

index.jsp

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>My JSP 'index.jsp' starting page</title>
  <script type="text/javascript">
    window.onload=function(){
        var aNodes=document.getElementsByTagName("a");
        for(var i=0;i<aNodes.length;i++){
            aNodes[i].onclick=function(){
                var request=new XMLHttpRequest();
                var method="GET";
                var url=this.href;
                request.open(method,url);
                request.send(null);
                request.onreadystatechange=function(){
                    if(request.readyState==4){
                        if(request.status==200){
                            //1.结果为xml格式，所以需要使用responsexml来获取
                            var result=request.responseXML;
                            //2.结果不能直接使用，必须先创建对应的节点，再把节点加入到details里面
                            //目标格式为
                            /*
                            <h2><a href="andy@qq.com">Andy Budd</a></h2>
                            <a href="http://anybudd.com">http://anybudd.com</a>
                            */
                            var name=result.getElementsByTagName("name")[0].firstChild.nodeValue;
                            var website=result.getElementsByTagName("website")[0].firstChild.nodeValue;
                            var email=result.getElementsByTagName("email")[0].firstChild.nodeValue;
                            //alert(name);
                            //alert(website);
                            //alert(email);
                            var aNode=document.createElement("a");      
                            aNode.appendChild(document.createTextNode(name));               
                            aNode.href="mailto:"+email;

                            var h2Node=document.createElement("h2");
                            h2Node.appendChild(aNode);

                            var aNode2=document.createElement("a");
                            aNode2.appendChild(document.createTextNode(website));
                            aNode2.href=website;

                            var detailsNode=document.getElementById("details");
                            detailsNode.innerHTML="";
                            detailsNode.appendChild(h2Node);
                            detailsNode.appendChild(aNode2);

                        }
                    }
                }
                return false;
            }
        }
    }

  </script>
  </head>

  <body>
    <h1>People</h1>
    <ul>
        <li><a href="files/andy.xml">Andy</a></li>
        <li><a href="files/richard.xml">Richard</a></li>
        <li><a href="files/jeremy.xml">Jeremy</a></li>
    </ul>
    <div id="details"></div>
  </body>
</html>

andy.xml

<?xml version="1.0" encoding="UTF-8"?>
<details>
    <name>andy keith</name>
    <website>http://andys.com/</website>
    <email>jandy@qq.com</email>
</details>

效果图：
这里写图片描述

4.ajax请求json格式数据
index.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>My JSP 'index.jsp' starting page</title>
  <script type="text/javascript">
    window.onload=function(){
        var aNodes=document.getElementsByTagName("a");
        for(var i=0;i<aNodes.length;i++){
            aNodes[i].onclick=function(){
                var request=new XMLHttpRequest();
                var method="GET";
                var url=this.href;
                request.open(method,url);
                request.send(null);
                request.onreadystatechange=function(){
                    if(request.readyState==4){
                        if(request.status==200){
                            //1.结果为json格式，所以需要使用responseText来获取
                            var result=request.responseText;
                            var object=eval("("+result+")");
                            //2.结果不能直接使用，必须先创建对应的节点，再把节点加入到details里面
                            //目标格式为
                            /*
                            <h2><a href="andy@qq.com">Andy Budd</a></h2>
                            <a href="http://anybudd.com">http://anybudd.com</a>
                            */
                            var name=object.person.name;
                            var website=object.person.website;
                            var email=object.person.email;
                            //alert(name);
                            //alert(website);
                            //alert(email);
                            var aNode=document.createElement("a");      
                            aNode.appendChild(document.createTextNode(name));               
                            aNode.href="mailto:"+email;

                            var h2Node=document.createElement("h2");
                            h2Node.appendChild(aNode);

                            var aNode2=document.createElement("a");
                            aNode2.appendChild(document.createTextNode(website));
                            aNode2.href=website;

                            var detailsNode=document.getElementById("details");
                            detailsNode.innerHTML="";
                            detailsNode.appendChild(h2Node);
                            detailsNode.appendChild(aNode2);

                        }
                    }
                }
                return false;
            }
        }
    }

  </script>
  </head>

  <body>
    <h1>People</h1>
    <ul>
        <li><a href="files/andy.js">Andy</a></li>
        <li><a href="files/richard.js">Richard</a></li>
        <li><a href="files/jeremy.js">Jeremy</a></li>
    </ul>
    <div id="details"></div>
  </body>
</html>

andy.js

{"person":{
    "name":"andy budd",
    "website":"http://andy.com",
    "email":"andy@qq.com"
}
}

效果图：
这里写图片描述

5.ajax利用jquery请求html格式数据

    <script type="text/javascript">
    $(function(){
        $("a").click(function(){
            var url=this.href+" h2 a";
            var args={"time":new Date()};
            //任何一个html节点都可以使用load方法来加载Ajax，结果将直接插入html节点中
            $("#details").load(url,args);
            return false;
            });
        });     
    </script>

其中url后加上了选择器 h2 a ,表示找到目标href后寻找 h2标签下的 a标签，将其html插入指定位置。如下所示：

<h2><a href="andy@qq.com">Andy Budd</a></h2>
<a href="http://anybudd.com">http://anybudd.com</a>

效果图：
这里写图片描述

6.ajax利用jquery请求xml格式数据

  <script type="text/javascript">
    $(function(){
        $("a").click(function(){
            var url=this.href;
            var args={"time":new Date()};
            $.get(url,args,function(data){
                var name=$(data).find("name").text();
                var email=$(data).find("email").text();
                var website=$(data).find("website").text();
                $("#details").empty()
                        .append("<h2><a href='mailto:"+email+"'>"+name+"</a></h2>")
                        .append("<a href='"+website+"'>"+website+"</a>");
                });
            return false;

        });
    })      
  </script>

<?xml version="1.0" encoding="UTF-8"?>
<details>
    <name>andy keith</name>
    <website>http://andys.com/</website>
    <email>jandy@qq.com</email>
</details>

7.ajax利用jquery请求json格式数据

  <script type="text/javascript">
  //url:ajax请求的目标url
  //args:传递的参数：json类型
  //data:ajax响应成功后的数据，可能是xml,html,json
    $(function(){
        $("a").click(function(){
            var url=this.href;
            var args={"time":new Date()};
            $.getJSON(url,args,function(data){
                var name=data.person.name;
                var email=data.person.eamil;
                var website=data.person.website;
                $("#details").empty()
                        .append("<h2><a href='mailto:"+email+"'>"+name+"</a></h2>")
                        .append("<a href='"+website+"'>"+website+"</a>");
                });
            return false;

        });
    })      
  </script>

{"person":{
    "name":"andy budd",
    "website":"http://andy.com",
    "email":"andy@qq.com"
}
}

8.ajax利用jquery方式请求用户名是否已被使用

    <script type="text/javascript">
        $(function(){
            $(":input[name='username']").change(function(){
                var val=$(this).val();
                val=$.trim(val);
                if(val!=""){
                    var url="${pageContext.request.contextPath}/valiateUserName";
                    var args={"username":val,"time":new Date()};
                    $.post(url,args,function(data){
                        $("#message").html(data);
                    });
                }
            });
        });

    </script>

</head>

  <body>
    <form action="" method="post">
        UserName:<input type="text" name="username"/>
        <br/>
        <div id="message"></div>
        <br/>
        <input type="submit" value="Submit"/>
    </form>
  </body>
</html>

    /**
     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        List<String> userNames=Arrays.asList("AAa","bbb","ccc");
        String userName=request.getParameter("username");
        String result=null;
        if(userNames.contains(userName)){
            result="<font color='red'>该用户已经被使用</font>";
        }else{
            result="<font color='red'>该用户可以使用</font>";
        }
        response.setCharacterEncoding("UTF-8");
        response.setContentType("text/html;charset=UTF-8");
        response.getWriter().print(result);
    }

效果图：
这里写图片描述

lezizai_happy

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
WEB开发中的AJAX请求

web开发中ajax请求常见常用，现在总结以下用法：1. 使用XMLHttpRequest实现Ajax请求 index.jsp<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
复制链接

扫一扫