AJAX请求详解同步异步 GET和POST

　　上一篇博文(http://www.cnblogs.com/mengdd/p/4191941.html)介绍了AJAX的概念和基本使用,附有一个小例子,下面基于这个例子做一些探讨.

同步和异步

在准备请求的时候,我们给open方法里传入了几个参数,其中第三个参数为true时,表示是异步请求:

//1. prepare requestxmlHttpRequest.open("GET", "AjaxServlet", true);// XMLHttpRequest.prototype.open = function(method,url,async,user,password) {};

　　为了模拟服务器的响应,并且不使用缓存内容,我们把服务器代码改成如下,加了5秒延时:

public class HelloAjaxServlet extends HttpServlet {    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {        System.out.println("doGet invoked!");        //mock the processing time of server        try {            Thread.sleep(5000L);        } catch (InterruptedException e) {            e.printStackTrace();        }        //no cache        response.setHeader("pragma","no-cache");        response.setHeader("cache-control","no-cache");        PrintWriter out = response.getWriter();        out.println("Hello World");        out.flush();    }}

　　下面就可以比较出同步和异步的差别了:

　　xmlHttpRequest.open()方法,第三个参数设置为async=true时,异步:

　　点击按钮后过了5秒出现Hello World字样,但是这5秒过程中页面中的其他地方都是不受影响的,可以操作.

　　xmlHttpRequest.open()方法,第三个参数设置为async=false时,同步:

　　同样是点击按钮5秒后出现Hello World字样,但是这5秒中,按钮是不可点击状态,页面不可做其他操作.

　　当使用同步设置时,其实不需要写回调函数,直接把响应的操作放在后面的语句即可.

　　注:不推荐使用async=false.

GET和POST

让我们把原来的程序改得复杂一点,计算两个输入框的值.

加入两个输入框,然后在发送请求之前获取它们的值:

<body>    <input type="button" value="get content from server" onclick="ajaxSubmit();"><br>    <input type="text" value="value1" id="value1Id">    <input type="text" value="value2" id="value2Id">    <div id="div1"></div></body>

服务器端获取参数值并返回计算结果:

public class HelloAjaxServlet extends HttpServlet {    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {        System.out.println("doGet invoked!");        process(request, response);    }    @Override    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {        System.out.println("doPost invoked!");        process(req, resp);    }    private void process(HttpServletRequest request, HttpServletResponse response) throws IOException {        System.out.println("process invoked!");        String v1 = request.getParameter("v1");        String v2 = request.getParameter("v2");        String result = String.valueOf(Integer.valueOf(v1) + Integer.valueOf(v2));        //mock the processing time of server//        try {//            Thread.sleep(5000L);//        } catch (InterruptedException e) {//            e.printStackTrace();//        }        //no cache        response.setHeader("pragma", "no-cache");        response.setHeader("cache-control", "no-cache");        PrintWriter out = response.getWriter();        out.println("Hello World: " + result);        out.flush();    }}

首先用GET方法:

GET方法的参数拼接在url的后面:

xmlHttpRequest.open("GET", "AjaxServlet?v1=" + value1 + "&v2=" + value2, true);//GETxmlHttpRequest.send(null);//GET

POST方法:

xmlHttpRequest.open("POST", "AjaxServlet", true);//POSTxmlHttpRequest.send("v1=" + value1 + "&v2=" + value2);//POST requset needs params here, for GET, just leave params empty or set it to null.

　　注意,使用POST方法提交,在请求发送之前,必须要加上如下一行:

xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

　　完整index.jsp代码:

<%@ page contentType="text/html;charset=UTF-8" language="java" %><html><head>    <title>Hello Ajax</title>    <script type="text/javascript">        var xmlHttpRequest;        function ajaxSubmit() {            if (window.XMLHttpRequest) {//in JavaScript, if it exists(not null and undifine), it is true.                // code for IE7+, Firefox, Chrome, Opera, Safari                xmlHttpRequest = new XMLHttpRequest();            } else if (window.ActiveXObject) {                // code for IE6, IE5                xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");            } else {                //very rare browsers, can be ignored.            }            //also, we can handle IE5,6 first using:            /*             if (window.ActiveXObject) {             //code for IE6, IE5             }             else {             //code for others             }             */            //send request            if (null != xmlHttpRequest) {                //get parameters from DOM                var value1 = document.getElementById("value1Id").value;                var value2 = document.getElementById("value2Id").value;                //1. prepare request//                xmlHttpRequest.open("GET", "AjaxServlet?v1=" + value1 + "&v2=" + value2, true);//GET                xmlHttpRequest.open("POST", "AjaxServlet", true);//POST                // XMLHttpRequest.prototype.open = function(method,url,async,user,password) {};                //2. set callback function to handle events                xmlHttpRequest.onreadystatechange = ajaxCallback;                //3. do sending request action//                xmlHttpRequest.send(null);//GET                //POST                xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");                xmlHttpRequest.send("v1=" + value1 + "&v2=" + value2);//POST requset needs params here, for GET, just leave params empty or set it to null.            }        }        function ajaxCallback() {            //alert("test");//this alert will show several times when click the button.            if (4 == xmlHttpRequest.readyState && 200 == xmlHttpRequest.status) {                var responseText = xmlHttpRequest.responseText;                document.getElementById("div1").innerHTML = responseText;            }        }    </script></head><body><input type="button" value="get content from server" onclick="ajaxSubmit();"><br><input type="text" value="" id="value1Id"><input type="text" value="" id="value2Id"><div id="div1"></div></body></html>

index.jsp

参考资料:

　　圣思园张龙老师JavaWeb视频教程64 POST与GET方式提交Ajax请求的区别，深度解读HTTP协议.

AJAX请求详解同步异步 GET和POST

声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉：投诉/举报工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。

联系
我们

首页 > 代码库 > AJAX请求详解 同步异步 GET和POST