ajax运用

一、ajax使用一种异步更新技术，可以只刷新局部页面的数据

优点：不需要插件、优秀的用户体验、提高WEB程序的性能、减轻服务器和带宽的负担

缺点：浏览器对XmlHttpServlet对象的支持度不足、破坏浏览器前进和后退按钮的正常功能、对搜索引擎支持不足、开发和调试工具欠缺

二、ajax的使用

ajax是一门与服务器端无关的语言技术，可使用服务器端的任何语言。从服务器端接收数据的时候，那些数据必须以浏览器能后理解的形式格式进行发送，服务器的数据可以用xml、json的格式返回数据

三、json数据

json是一种简单的数据格式，比xml格式的数据效率更高。json是js的原生格式，所以js在处理json数据的时候不用导入任何特殊的API和工具包

json的规则：对象是一个无序的名称：值对的集合。一个对象以一个 { 开始，一个 } 结束，一个{}里边可以写多个值对，值对之间使用 “ ， ”（逗号）隔开

1）映射用冒号（“ ： ”）表示。名称：值

2）并列的数据之间用逗号（“ ， ”）分割。名称1：值1，名称2：值2

3）映射的集合（对象）用大括号（" {} "）表示。{名称1：值1，名称2：值2}

4）并列数据的集合（数组）用方括号（“[]”）表示。[{名称1：值1，名称2：值2} , {名称1：值1，名称2：值2} ]

5）元素值可具有的类型：string,number,object,array,true,false,null

Json格式案例：

//json对象的数据格式
var user={"name":"xiaoming","pawd":"123456"};
alert(user.pawd);

var userlist=[

                 {"name":"xiaoming","pawd":"123456"},
                 {"name":"xiaohong","pawd":"1234567"},
                 {"name":"xiaoqiang","pawd":"1234568"}
                    ]
alert(userlist[2].name);

var userNew={"name":"xiaoming",

"pawd":"1239087",

"hibbies":[{"name":"lanqiu"},{"name":"zuqiu"}]

};
var hibbies = userNew.hibbies;
for(var i=0;i<hibbies.length;i++){
alert(hibbies[i].name);
}

Json的优缺点：

优点：作为一种数据传输格式，JSON与XML很相似，但是更加轻巧

json不需要从服务器端发送含有特定内容类型的首部信息，只是一个HTML普通字符串

缺点：太过严谨

代码不容易阅读

四、jquery中的AJAX操作

jquery对ajax进行了封装，在JQuery中最常用的是load（），$.ajax()，$.get()，$.post()，最常用的是后三种

1、 $.get()和$.post()写法相似，写法没有差别

要导入jquery的包

两者中用一个举例 $.get()：

$.get(url,data,function(backresult，status,xmlHttpRequest){

var result=eval(backresult)；//转换为JSON的解析格式

});

第一个参数 url： ajax传值的方向地址

第二个参数 data；要传递过去的参数 {“名称”:"值"} 可以为空

第三个参数回调函数：处理后返回的值由此提取。 backresult：后台响应过来的数值 status：请求的状态结果（success\error） xmlHttpRequest：ajax请求封装的对象，内容和backresult一样

----------->>>>>>> json的转换格式处理用eval()还可以用 $.get(url,data,function(backresult，status,xmlHttpRequest){ },"json"）;

实例

jsp页面：

servlet：

protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

    req.setCharacterEncoding("utf-8");
    String time = req.getParameter("time");
    System.out.println(time);

    ArrayList<User> users = new ArrayList<>();
    User user = new User("18","xiaoming","123564");
    User user1 = new User("19","xiaohong","000000");
    User xiaobai = new User("17", "xiaobai", "111111");

    users.add(user);
    users.add(user1);
    users.add(xiaobai);

    String result = JSON.toJSONString(users);//将结果转为json对象
    resp.getWriter().write(result);//将json对象放在响应输出流
}

ajax处理：

GET请求和post请求的区别：

1、get请求的url地址有最大字节数限制，所以传参及路径不能过长，post没有限制

2、Get请求参数会带在地址后边，不安全，post不在后边，较安全

3、但是效率高，post效率相对较低

4、Get进行ajax异步请求的话，浏览器会判断原来是否已经请求过，并且参数没有任何改变，若原来请求过，且参数没有任何改变的话，

就可能直接读取缓存里的内容了，不在真正执行请求的地址代码了（通常在URL里加时刻在边的数据来保持请求的更新，例如 <c:url value="/JS?time="+new Date()+">），post没有此问题

2、$.ajax()的写法和get、post不同，如下

      $.ajax({
              type:"post",//提交方式
              url:"<c:url value="/CS"/>",
              data:{"sfid":sfid},
              dataType:"json",//返回数据的格式

              //处理正确执行success
              success:function (backresult,status,xmlHttpServlet) {
                   },

              //处理错误执行error
              error:function (XMlHttpServlet,status,errorThrown) {
                  alert("出错了!!!!!!!!!!");
                  }
           });

　　　　XMLHttpRequest.readyState: 状态码的意思：
　　　　0 －（未初始化）还没有调用send()方法
　　　　1 －（载入）已调用send()方法，正在发送请求
　　　　2 －（载入完成）send()方法执行完成，已经接收到全部响应内容
　　　　3 －（交互）正在解析响应内容
　　　　4 －（完成）响应内容解析完成，可以在客户端调用了

　　　　XMLHttpRequest.status ：返回的HTTP状态码，比如常见的404,500等错误代码。

　　　　第二个参数 Status：返回的是字符串类型，表示返回的状态，根据服务器不同的错误可能返回下面这些信息："timeout"（超时）, "error"　　　（错误）, "abort"(中止), "parsererror"（解析错误），还有可能返回空值。

第三个参数 String errorThrown：也是字符串类型，表示服务器抛出返回的错误信息，如果产生的是HTTP错误，那么返回的信息就是HTTP状态码　　　　对应的错误信息，比如404的Not Found,500错误的Internal ServerError。

实例：利用ajax实现select的联动

构建一个city实体类，代替调用数据库的数据

jsp页面：

<!--利用ajax实现select二级联动-->
省份:<select id="shengfen" onchange="ajax()">
         <option value="0">------请选择省份-------</option>
         <option value="1">--------河南-------</option>
         <option value="2">--------湖北-------</option>
     </select>
城市：<select id="chengshi">
          <option value="0">--------请选择城市---------</option>
      </select>

Servlet：

protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

    String sfid = req.getParameter("sfid");
    System.out.println(sfid);
    List<City> cities = new ArrayList<City>();
    if(sfid.equals("1")){
        City c1 = new City(1, "郑州");
        City c2 = new City(2, "信阳");
        City c3 = new City(3, "新郑");
        cities.add(c1);
        cities.add(c2);
        cities.add(c3);
    }else  if (sfid.equals("2")){
        City c1 = new City(1, "武汉");
        City c2 = new City(2, "黄石");
        City c3 = new City(3, "武昌");
        cities.add(c1);
        cities.add(c2);
        cities.add(c3);
    }
    System.out.println("sssssssssssss");
    System.out.println(cities);
    String city = JSON.toJSONString(cities);
    resp.setContentType("text/html;charset=utf-8");
    resp.getWriter().write(city);
}

ajax处理：

function ajax() {
    //拿到被选中的省份
    var sfid = $("#shengfen option:selected").val();
    //alert(sfid);
    //清空上次操作留在页面上的数据,gt()-->大于
    $("#chengshi option:gt(0)").remove();
    $.ajax({
        type:"post",
        url:"<c:url value="/CS"/>",
        data:{"sfid":sfid},
        dataType:"json",
        success:function (backresult,ststus,xmlHttpServlet) {
            $.each(backresult,function (i,res) {
                //alert(i+""+res.bianhao);
                 //利用id选择器选中要操作的标签，利用append向里边添加新标签
                $("#chengshi").append("<option value='+res.bianhao+'>"+res.cityname+"<option/>");
            })
        },
        error:function (XMlHttpServlet,status,errorThrown) {
             alert("出错了!!!!!!!!!!");
        }
    });
}

其中ajax中的遍历方法$.each(breakresult,funciton(i,res)){}中，i是索引，从0开始res是遍历出来的结果

posted @ 2019-07-01 22:19 橙汁one 阅读(241) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

橙汁one

ajax运用

两者中用一个举例 $.get()：

公告