ajax请求（一）

最新推荐文章于 2022-03-25 18:52:39 发布

MiracleBubble

最新推荐文章于 2022-03-25 18:52:39 发布

阅读量565

点赞数

分类专栏： ajax

ajax 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

转摘自
http://www.cnblogs.com/cdf-opensource-007/p/6345613.html

## 同步 ##
我们知道，ajax是一种异步请求的方式，想要了解异步请求，就必须要先从同步请求说起。常见的同步请求的方式是form表单的提交，我们先从一种同步请求的示例说起。

我们希望输入姓名可以从后台得到身份证号。



那么用同步请求的方式要这么做

前端代码：

<form action="" id = "formId">
<input type="button" id="testBtn" value="测试按钮" onclick="sentSyn();"/><br>
姓名：<input type="text" name = 'name'  value=""/><br>
身份证号：<input type="text" name = 'ID'  value="${ID }"/><br>
</form>
<script type="text/javascript">alert(111);
function sentSyn(){
    document.getElementById("formId").action = "<%=basePath %>/manage/test/syn";
    document.getElementById("formId").submit();
}
</script>
后台代码：

复制代码
@RequestMapping("/syn")
    public void testSyn(HttpServletRequest request, HttpServletResponse response){
        try {
            request.setAttribute("ID", "12345");
            request.getRequestDispatcher("/ajax.jsp").forward(request, response);
        } catch (ServletException | IOException e) {
            e.printStackTrace();
        }

    }
复制代码
姓名输入"小明" 点击按钮页面上的效果是这样的：



alert(111)先弹了出来，说明页面重新加载了一次，而且得到小明的身份证号后，名字不见了，原先的数据消失了。要解决这个问题，你用同步请求的方式也是可以的，

在你的后台代码里加上一行：request.setAttribute("name", request.getParameter("name"));就可以实现数据的回显。但是弹框还是会出现，说明页面又一次加载了。

（当然，你这样做输入中文的话，会出现中文乱码的问题，这个问题不在本文的讨论范围之内，有兴趣可以查看我的另一篇博客关于乱码问题的研究：http://www.cnblogs.com/cdf-opensource-007/p/6337448.html）

由此我们可以推断出同步请求是怎么跟服务器进行数据交互的

　　使用同步请求，服务器将响应的数据直接输送给浏览器的内存，导致覆盖浏览器内存中原有的数据，浏览器接收到响应的数据后只能展示服务器端返回的数据，无法展示发送请求之前在浏览器中添加的数据。

　　当你使用同步请求与服务器进行数据交互的时候，浏览器是直接面对服务器的，也就是在服务器处理请求的过程中浏览器处于等待，卡死的状态，你无法在页面上进行其他的操作。而且当页面信息量较大时，你使用同步请求与服务器进行数据交互，又要回显页面上众多的数据时，你的后台代码将会写的很麻烦既要处理数据的回显又要处理请求，增加服务器的压力。当然同步请求也有他的优点，当你页面上需要与服务器的数据交互的操作较少时或者需要回显的数据较少时，推荐使用同步，因为它是直接与服务器进行数据交互的。仁者见仁智者见智，具体问题具体分析，要根据你的使用场景进行选择。
今天就先写道这里已经很晚了，下篇博客将会对ajax异步请求的原理进行分析。

异步

在上一文章里，我们分析了同步请求的原理。当浏览器向服务器发送同步请求时，服务处理同步请求的过程中，浏览器会处于等待的状态，服务器处理完请求把数据响应给浏览器并覆盖浏览器内存中原有的数据，浏览器重新加载页面并展示服务器响应的数据。

　　那么，有没有一种技术，可以让浏览器发送请求给服务器，服务器处理请求的过程中，浏览器不处于等待的状态，并且浏览器接收响应数据的同时不再重新加载整个页面，既请求发送之前的数据不丢失，又能实现页面的局部刷新呢？那就要用到ajax请求——异步请求模型，那么异步请求的原理是什么呢？

　　我们知道，在同步请求模型中，浏览器是直接向服务器发送请求，并直接接收、处理服务器响应的数据的。这就导致了浏览器发送完一个请求后，就只能干等着服务器那边处理请求，响应请求，在这期间其它事情都做不了。这就像是你到了一个新城市去找房子住，你可以自己去找，在网站上或者是街头小广告上去了解房源信息，找合适自己的那一个，然后去跟房东谈价钱。在这期间你的精力和时间大部分都用到了找房子上，你可能没时间再去找工作或者做其他的事情了。还有一种方式是你找一个租房中介，找你一个代理人，把你的需求告诉他让他来帮你找，在中介给你找房子的同时你还可以去找工作或者做其他的事情。

　　异步请求正是基于以上所述的模式，浏览器把请求交给代理对象—XMLHttpRequest（绝大多数浏览器都内置了这个对象），由代理对象向服务器发起请求，接收、解析服务器响应的数据，并把数据更新到浏览器指定的控件上。从而实现了页面数据的局部刷新。异步请求使浏览器不用等待服务器处理请求，不用重新加载整个页面来展示服务器响应的数据，在异步请求发送的过程中浏览器还能进行其它的操作。我们来看一下异步请求的执行流程图：



下面我们用原生的ajax请求的代码实现一下，上片文章中的那个示例。输入姓名，页面局部刷新身份证号。

<input type="button" id="testBtn" value="测试按钮" onclick="sentAjax();"/><br>
姓名：<input type="text" name = 'name'  value=""/><br>
身份证号：<input type="text" name = 'ID' id="ID" value=""/><br>
复制代码
<script type="text/javascript">
alert(111);function sentAjax(){
    var xmlHttp = new XMLHttpRequest();

    xmlHttp.open("get","<%=basePath %>/manage/test/ajax",true);
    xmlHttp.send();

    xmlHttp.onreadystatechange = function (){
　　　　　　　　　　　　　　　　　　　　　　　　　　　 var state = xmlHttp.readyState;
                                               var status = xmlHttp.status;
                                               if(state == 4 && status == 200){
                                                  var data=xmlHttp.responseText;
                                                   document.getElementById("ID").value = data;                          
                                               }
    }
}
</script>
复制代码
复制代码
@RequestMapping("/ajax")
    public void testAjax(HttpServletRequest request, HttpServletResponse response){

        try {

            response.setCharacterEncoding("utf-8");//响应字符集的编码格式
            PrintWriter out=response.getWriter();
            out.print("12345");

        } catch (IOException e) {
            e.printStackTrace();
        }

    }
复制代码
　　点击按钮看一下执行结果：



　　异步请求发送后，原来页面上的的数据没有消失，alert(111),没有弹出，说明页面没有重新加载只是局部刷新了。（顺便提一句，这里没有中文乱码的问题，一是姓名参数没有与服务器进行交互，而来更加说明，页面没有重新加载）

　　下面我们看一下，ajax请求中对于各项参数的解释。

　　　var xmlHttp = new XMLHttpRequest();//用于创建代理对象

　　　xmlHttp.open("get","<%=basePath %>/manage/test/ajax",true);//初始化请求
    　  xmlHttp.send();//发送请求

　　　

　　　xmlHttp.onreadystatechange//监听请求的状态

　　　

　　　 var data=xmlHttp.responseText; //获取相应文本格式

　　　

　　　当然我们在实际的中不会使用原生的ajax发送异步请求，一般采用Jquery这个框架封装好的ajax，便于开发和对数据的处理。下一篇文章将会对Jquery的ajax进行解析，和使用时一些技巧性的操作。

　　最后说一点，我们作为程序员，研究问题还是要仔细深入一点的。当你对原理了解的有够透彻，开发起来也就得心应手了，很多开发中的问题和疑惑也就迎刃而解了，而且在面对其他问题的时候也可做到触类旁通。当然在开发中没有太多的时间让你去研究原理，开发中要以实现功能为前提，可等项目上线的后，你有大把的时间或者空余的时间，你大可去刨根问底，深入的去研究一项技术，为觉得这对一名程序员的成长是很重要的事情。

参考文章：

　　　　http://www.w3school.com.cn/ajax/index.asp

serialize 表单提交的技巧

　原生的Ajax对于异步请求的实现并不好用，特别是不同的浏览器对于Ajax的实现并不完全相同，这就意味着你使用原生的Ajax做异步请求要兼顾浏览器的兼容性问题，对于java程序员来讲这是比较头疼的事情，还好jQuery的出现帮我们解决了兼容性的问题，而且让异步请求的实现更加简单直观。

　　总结下来，jQuery对于Ajax的实现常用的方法一共有三个，分别是：.ajax(),.ajax(),.get(),.post()，其中.post()，其中.get()和.post()方法分别是对.post()方法分别是对.ajax()方法的j简写。至于这三个方法的使用细节可以参考：http://www.w3school.com.cn/jquery/jquery_ref_ajax.asp。本文主要对使用jquery发送ajax时表单元素参数提交的技巧进行说明。

　　我们来看一个使用场景：

<input type="button" id="testBtn" value="测试按钮" onclick="sentAjax();"/><br>
<form action="" id = "formId">
<input type="text" name = 'name'  id="NAME"/><br>
<input type="text" name = 'id' id="ID" /><br>
</form>
　　要求发送ajax请求时提交id为NAME和ID的表单元素我们先看一下传统的做法。

复制代码
function sentAjax(){

    var name = $("#NAME").val();
    var id = $("#ID").val();

    var sendData = "name=" + name + "&id=" + id;

    $.ajax({
          type: 'POST',
          url:"<%=basePath%>/manage/test/ajax",
          data: sendData,
          success: function(getData){

          }
        });
 }
复制代码
　　我们发现使用传统的做法要对表单控件逐个进行取值并且还要进行字符串的拼接（当然，如果你data用的是json格式就不用进行字符串拼接了，但还是免不了逐个进行取值），我们再看看使用jquery的serialize()方法是怎么做的。

　　

复制代码
function sentAjax(){
    var formParam = $("#formId").serialize();
    alert(formParam);

    $.ajax({
          type: 'POST',
          url:"<%=basePath%>/manage/test/ajax",
          data: $("#formId").serialize(),
          success: function(getData){

          }
        });
 }
复制代码
　　

　　我们发现使用serialize()函数让我们免去了对表单控件逐个进行取值并且还要进行字符串的拼接的麻烦。serialize()函数底层对表单元素做了序列化的处理，同时serialize()函数允许我们选择一个或多个表单元素（比如 input 及/或 文本框），或者 form 元素本身。我们再来看看下面的应用场景

　　

复制代码
<input type="button" id="testBtn" value="测试按钮" onclick="sentAjax();"/><br>

<form action="" id = "formId">
<input type="text" name = 'name'  id="NAME"/><br>
<input type="text" name = 'id' id="ID" /><br>
<input type="checkbox"  name="ck" value="1"/><br>
<input type="checkbox"  name="ck" value="2"/><br>
<input type="checkbox"  name="ck" value="3"/><br>
<input type="checkbox"  name="ck" value="4"/><br>
</form>
复制代码


　　要求发送ajax请求时提交已选中的name为'ck'的复选框，其它的表单元素不做提交。按照传统的做法代码我们要这么写。

复制代码
function sentAjax(){

    var selectedCheckbox = $(":checkbox[name=ck]:checked");

    var sendDatas = "";

    $.each(selectedCheckbox,function(index,item){
        sendDatas += "&ck=" + item.value;
    });

    sendDatas = sendDatas.substring(1);

    $.ajax({
          type: 'POST',
          url:"<%=basePath%>/manage/test/ajax",
          data: sendDatas,
          success: function(getData){

          }
        });
 }
复制代码


　　再来看看使用serialize()函数的做法，代码写起来就很简单。

复制代码
function sentAjax(){

    var sendDatas = $(":checkbox[name=ck]:checked").serialize();

    $.ajax({
          type: 'POST',
          url:"<%=basePath%>/manage/test/ajax",
          data: sendDatas,
          success: function(getData){

          }
        });
 }
复制代码


　这里提几点需要注意的，

　（1）使用serialize()函数时，要序列化的表单元素不一定非要在<form></form>标签中，如果你只是要序列化某个<form></form>标签下的表单元素，其它<form></form>下的表单元素或者<form></form>外的表单元素不做序列化，就要使用以下的语句（注意冒号前面的空格不能少，这里用到了jQuery的层级选择器）。

var params = $("#formId :checkbox[name=ck]:checked").serialize();
　（2）：对于复选框（checkbox)使用serialize()函数进行序列化时，只能序列化被选中的复选框如下写法不能序列化未选中的复选框（这种写法序列化的也只能是选中的复选框，若是想发送ajax请求时提交未选中的的复选框，请参照传统的写法对所有的复选框按照checked属性进行过滤）。

var params = $("#formId :checkbox[name=ck]").serialize();


参考文章：http://www.w3school.com.cn/jquery/ajax_serialize.asp

多个请求的执行顺序

首先提出一个问题：点击页面上一个按钮发送两个ajax请求，其中一个请求会不会等待另一个请求执行完毕之后再执行？

　　答案是：不会，这两个异步请求会同时发送，至于执行的快与慢，要看响应的数据量的大小及后台逻辑的复杂程度。

　　从异步请求的执行原理来看，我们知道当一个异步请求发送时，浏览器不会处于锁死、等待的状态，从一个异步请求发送到获取响应结果的期间，浏览器还可以进行其它的操作。这就意味着多个异步请求的执行时并行的。

　　下面我们还是从一个例子来看一下这个问题。

　　要求：ajax1从后台请求下拉列表的数据，ajax2从后台请求下拉列表要选中的某一项的数据。

<input type="button" value="测试按钮" onclick="sentAjax();"/><br>
 <select id="selectClassify" style="width: 100px;"></select>
js代码：

复制代码
<script type="text/javascript">
function sentAjax(){
    Ajax1();
    Ajax2();
 }
function Ajax1(){
    $.ajax({
          cache : false,
          url:"<%=basePath%>/manager/test/ajax1",
          success: function(result){
                alert("Ajax1");
                $("#selectClassify").html("");
                var html = "";
                var selectJson = result.downList;
                $.each(selectJson, function(i, item) {
                    html = html+"<option value='" + item + "'>" + item + "</option>";
                });
                $("#selectClassify").append(html);

          }
      });
 }

function Ajax2(){
    $.ajax({
          cache : false,
          url:"<%=basePath%>/manager/test/ajax2",
          success: function(result){
             alert("Ajax2");
             $("#selectClassify").val(result.kind);
          }
      });
 }
</script>
复制代码
java代码：

复制代码
@Controller
@RequestMapping("/manager/test")
public class TestAjax {

    @ResponseBody
    @RequestMapping("/ajax1")
    public Map<String ,String[]> ajax1(){
        Map<String ,String[]> jsonMap = new HashMap<String, String[]>();
        String[] downList = new String[2000]; //这里为了说明ajax2不会等待ajax1执行完之后再执行,让ajax1响应的数据量较大。
        for(int i = 0;i < 2000;i++){
            downList[i] = "<---"+ (i+1) + "--->";
        }
        jsonMap.put("downList", downList);
        return jsonMap;
    }
    @ResponseBody
    @RequestMapping("/ajax2")
    public Map<String ,String> ajax2(){
        Map<String ,String> jsonMap = new HashMap<String, String>();
        jsonMap.put("kind", "<---7--->");
        return jsonMap;
    }
}
复制代码
　　点击测试按钮我们发现alert("Ajax2")先于alert("Ajax1")弹出，说明Ajax2没有等待Ajax1，异步请求是并行的，执行的快与慢，要看响应的数据量的大小及后台逻辑的复杂程度。而且有一个现象是：最后下拉框显示的是

　　

　　ajax2请求的下拉列表要选中的某一项的数据没有展示出来，这说明ajax2对页面的操作快于ajax1，这时ajax1对页面的操作还没开始，所以导致ajax2对页面的操作没有效果。

　　要解决这个问题也不难，这里提供两种解决方案：

　　（1）Ajax2()方法的执行放到Ajax1()的success回调函数的最后一行。

　　（2）Ajax1()的异步请求方法中，增加一个回调函数 ：complete : Ajax2

　　

　　（3）当然针对这个问题而言还有很多解决办法，比如下拉列表采用同步的方式来画，而数据的回显使用异步，或者一个异步请求把所有数据返回，然后按照逻辑顺序进行数据展示，这些就不再本文的讨论范围内了。

　　参考文章：http://www.w3school.com.cn/jquery/ajax_ajax.asp

MiracleBubble

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
ajax请求（一）

转摘自 http://www.cnblogs.com/cdf-opensource-007/p/6345613.html## 同步 ##我们知道，ajax是一种异步请求的方式，想要了解异步请求，就必须要先从同步请求说起。常见的同步请求的方式是form表单的提交，我们先从一种同步请求的示例说起。我们希望输入姓名可以从后台得到身份证号。那么用同步请求的方式要这么做前端代码：<form action
复制链接

扫一扫