ajax异步交互

最新推荐文章于 2022-10-28 19:41:47 发布

SixGPro

最新推荐文章于 2022-10-28 19:41:47 发布

阅读量95

点赞数

分类专栏： Ajax

本文链接：https://blog.csdn.net/qq_38068697/article/details/94464099

版权

Ajax 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

js代码

<script type="text/javascript">
var XmlHttpRequest;
    //使用ajax发送异步请求
     /*-------- 第一步  得到XMLhttpRequest --------*/
        //编写创建XMLHttpRequest对象的函数
        function createXMLHttpRequest(){
            try{
                return new XMLHttpRequest();//一般情况下，所有浏览器都支持这个
            }catch(e){
                try{
                    return new ActiveXObject("Msxm12.XMLHTTP")//这是IE6.0版本
                }catch(e){
                    try{
                        return new ActiveXObject("Microsoft.XMLHTTP");//这是IE5.5以及更早版本
                    }catch(e){
                        alert("不支持的浏览器")
                        throw e;
                    }    
                }
                
            }
    }
    
     /*-------- 第二步 打开与服务的连接以及发送请求 --------*/
     function sendRequest(){

         var test=document.getElementById("test").value;
         //1.初始化XMLHttpRequest对象(调用createXMLHttpRequest方法)
         XmlHttpRequest =  createXMLHttpRequest();
         //2.定义发送请求的URL(这里url填写要访问的地址)
         var url = "HelloAjax.do";
         //3.打开与服务的连接{open中三个参数(请求方式[GET、POST]、请求url、请求是否异步[true代表异步、false代表同步])}
         XmlHttpRequest.open("POST",url,true);
         //4.设置请求头（注意：只有post请求才需要设置请求头,如果是get跳过这一步）
         XmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
         //5.指定XmlHttpRequest状态改变时要执行的函数
         XmlHttpRequest.onreadystatechange = ajaxHello;
         //6.发送请求(这里参数时请求体的内容,POST请求如果不给参数，可能会导致部分浏览器无法发送，GET请求必须给null)
         XmlHttpRequest.send("test="+test);
         
     }
     
     function ajaxHello(){
         //判断XmlHttpRequest对象是否响应结束
         //4状态代表服务器响应结束，0代表刚创建对象还没有open、1代表调用了open方法还没有send、3代表服务器开始响应，但响应不一定结束
         if(XmlHttpRequest.readyState == 4){
             //判断服务器响应的状态码，200代表响应成功
             if(XmlHttpRequest.status == 200){
                 //这里填写响应成功后需要做什么操作
                 document.getElementById("hello").value = XmlHttpRequest.responseText;
             }else{
                 alert("请求的页面异常");
             }
         }
     }
</script>

HTML代码

<body>
<input id="hello" value=''/><br/>
<input id='test' type='text' /><br/>
<input type='button' value='提交' onclick="sendRequest();" />
</body>

后台代码

@WebServlet(urlPatterns={"/HelloAjax.do"})//这里使用的是web3.0,不会自动创建web.xml文件，所以使用注解注册Servlet
public class HelloAjax extends HttpServlet {
        
        public void service(HttpServletRequest request,HttpServletResponse response) throws IOException {
            String test = request.getParameter("test");
            response.getWriter().print(test);
            
        }

}

SixGPro

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajax异步交互

js代码<script type="text/javascript">var XmlHttpRequest; //使用ajax发送异步请求 /*-------- 第一步得到XMLhttpRequest --------*/ //编写创建XMLHttpRequest对象的函数 function createXMLHttpRe...
复制链接

扫一扫