文档章节

Ajax与SpringMVC

Romanceling
 Romanceling
发布于 2016/06/12 20:26
字数 1396
阅读 187
收藏 11

Ajax:Asynchronous JavaScript and XML  异步的JavaScript和XML技术
Ajax应用:侧重与局部刷新/局部交互

XMLHttpRequest对象(内置在浏览器中,js对象)
-------------------------------------------------------------------------------------------------------------------------
Ajax原理:Ajax是多种技术的综合应用.
1.以XMLHttpRequest对象为核心,实现请求的发送和响应结果的接受.
2.以JavaScript语言为基础,实现用户操作和响应结果的解析,呈现到页面.
3.以XML和JSON技术作为数据传输格式.
4.以HTML,CSS等技术做界面及渲染.

----------------------------------------------------------------------------------------------------------------------
Ajax基本使用(编程步骤)

一.发送Aajx请求
1.创建XMLHttpRequest对象 : new XMLHttpRequest();

2.open方法:创建请求 open(get或post,url,同步异步);
  - true:表示异步;false:表示同步;省略时默认异步

3.send方法:发送请求 send(参数);
  - get请求写null;
  - post请求写参数值"key=value&key=value"

二.服务器端处理
1.编写Servlet或SpringMVC流程处理
2.返回text字符串或JSON格式的数据

三.Ajax回调处理
1.onreadystatechange事件: 当readyState属性发生改变时触发
2.readyState属性:属性值0-4,表示Ajax请求处理的过程。4表示请求处理完毕。
3.responseXML属性:获取服务器返回的XML信息
4.status属性:获取服务器响应的HTTP CODE,例如200,404,500等

例:一、三
function createXhr(){
    var xhr = null;//存储XMLHttpRequest对象
    if(window.XMLHttpRequest){//非IE浏览器支持
        xhr = new XMLHttpRequest();
    }else{//IE
        xhr = new ActiveObject("Microsoft.XMLHTTP");
    }
    return xhr;
}

function sendRequest1(){
    //利用XMLHttpRequest对象发送请求
    var xhr = createXhr();
    //创建一个hello.do请求
    //open("get",请求url,同步异步(true为异步))
    xhr.open("get","hello.do",true);
    //注册回调处理函数
    //readyState属性:属性值0-4:表示Ajax请求处理的过程
    //4表示请求出完毕,200表示成功!
    xhr.onreadystatechange = function(){
        if(xhr.readyState==4&&xhr.status==200){
            //获取服务器返回的结果
            var data = xhr.responseText;
            var s1 = document.getElementById("s1");
            s1.innerText = data;
        }    
    }
    //发送Ajax请求,get请求参数为null,post请求参数是提交的数据
    xhr.send(null);    
}

二.
public class HelloServlet extends HttpServlet {

    @Override
    protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        PrintWriter pw = response.getWriter();
        System.out.println(1);
        pw.print("Hello Ajax!");
        pw.close();
    }    
}


web.xml中配置:
  <servlet>
    <servlet-name>HelloServlet</servlet-name>
    <servlet-class>com.servlet.HelloServlet</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>HelloServlet</servlet-name>
    <url-pattern>/hello.do</url-pattern>
  </servlet-mapping>
  <servlet>
------------------------------------------------------------------------------------------------------------------------
如何发送post请求:
xhr.open(“post”,”check.do”,true);
xhr.setRequestHeader(“content-type”,“application/x-www-form-urlencoded”);
xhr.send(“name=”+name);

例:
function sendRequest2(){
    //获取用户名
    var name = document.getElementById("name").value;
    //发送Ajax请求
    var xhr = createXhr();
    xhr.open("post","check.do",true);
    xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
    xhr.onreadystatechange = function(){
        if(xhr.readyState==4&&xhr.status==200){
            var data = xhr.responseText;
            document.getElementById("s2").innerText = data;
        }
    }
    xhr.send("name="+name);
    document.getElementById("s2").innerHTML = "正在检测中..."
}
-------------------------------------------------------------------------------------------------------------------------
JSON:JavaScript Object Notation
JavaScript对象格式,属于js一种数据类型。
JSON类型格式如下:
var obj = {“key1”:value1,”key2”:value2};
obj.key1;//获取value1值
obj.key2;//获取value2值

例:
//标准的JSON对象
//var obj1 = {"name":"rose","age":20};
//alert(obj1.name);
//alert(obj1.age);

//var obj2 = {"name":"rose","age":20,"friends":["小曲","小樊","小邱","小关","andy"]};
//alert(obj2.friends[3]);

//var obj3 = {"name":"rose","age":20,"address":{"street":"北京中关村","zipcode":"1008611"}};
//alert(obj3.address.street);

//var obj4 = [{"id":1,"name":"北京"},{"id":2,"name":"上海"}]
//alert(obj4[1].name);

-----------------------------------------------------------------------------------------------------------------------
JSON对象的转换

一.js将JSON字符串转成JSON对象
-方法一:eval(“(“+json字符串+”)”);
-方法二:JSON.parse(json字符串);
-方法三:使用第三方js库(略)

例:
var obj5 = '{"id":1,"name":"北京"}';
//将此字符串转换成json对象的方法
//方法1:使用eval();
var obj6 = eval("("+obj5+")");
alert(obj6.id);
//方法2:使用JSON.parse()函数
var obj7 = JSON.parse(obj5);
alert(obj7.name);
//方法3:使用第三方js库,例如json.js或jQuery.js


二.Servlet服务器端将Java实体对象转成JSON字符串
-JSONObject:将单个对象转成JSON字符串
-JSONArray:将集合转成JSON字符串

例:
List<City> cities = getCities();
//将数据转成JSON字符串
JSONArray jsonObj = JSONArray.fromObject(cities);
----------------------------------------------------------------------------------------------------------------------
jQuery对Ajax的支持
-*$.ajax():jQuery中发送请求最基本函数
格式:
$.ajax({
url:地址,
type:请求类型,
data:请求参数,
async:同步|异步,
dataType:返回结果类型,
success:成功回调函数,
error:失败回调函数
});
-----------------------------------------------------------------------------------------------------------------------
Ajax与SpringMVC的整合

1.web.xml:
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" version="2.5">
  <servlet>
      <servlet-name>springmvc</servlet-name>
      <servlet-class>
          org.springframework.web.servlet.DispatcherServlet
      </servlet-class>
      <init-param>
          <param-name>contextConfigLocation</param-name>
          <param-value>classpath:applicationContext.xml</param-value>
      </init-param>
      <load-on-startup>1</load-on-startup>
  </servlet>
  <servlet-mapping>
      <servlet-name>springmvc</servlet-name>
      <url-pattern>*.do</url-pattern>
  </servlet-mapping>
</web-app>

2.Spring容器:applicationContext.xml
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans" 
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns:context="http://www.springframework.org/schema/context" 
    xmlns:jdbc="http://www.springframework.org/schema/jdbc"  
    xmlns:jee="http://www.springframework.org/schema/jee" 
    xmlns:tx="http://www.springframework.org/schema/tx"
    xmlns:aop="http://www.springframework.org/schema/aop" 
    xmlns:mvc="http://www.springframework.org/schema/mvc"
    xmlns:util="http://www.springframework.org/schema/util"
    xmlns:jpa="http://www.springframework.org/schema/data/jpa"
    xsi:schemaLocation="
        http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.2.xsd
        http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.2.xsd
        http://www.springframework.org/schema/jdbc http://www.springframework.org/schema/jdbc/spring-jdbc-3.2.xsd
        http://www.springframework.org/schema/jee http://www.springframework.org/schema/jee/spring-jee-3.2.xsd
        http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-3.2.xsd
        http://www.springframework.org/schema/data/jpa http://www.springframework.org/schema/data/jpa/spring-jpa-1.3.xsd
        http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-3.2.xsd
        http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-3.2.xsd
        http://www.springframework.org/schema/util http://www.springframework.org/schema/util/spring-util-3.2.xsd">
    <!-- 配置注解扫描,定义HandlerMapping,支持@RequestMapping -->
    <mvc:annotation-driven/>
    
    <!-- 配置组件扫描,扫描Controller,支持@Controller ,@Service等... -->
    <context:component-scan base-package="com.tedu"/>
</beans>

3.controller:
package com.tedu.controller;
@Controller//扫描
public class LoadCityController {
    @RequestMapping("/loadcities.do")
    @ResponseBody//将方法返回的对象转换成JSON字符串对象输出
    public List<City> execute(){
        List<City> cities = new ArrayList<City>();
        City c1 = new City(1,"合肥");
        City c2 = new City(2,"亳州");
        City c3 = new City(3,"利辛");
        cities.add(c1);
        cities.add(c2);
        cities.add(c3);
        return cities;
    }
}

4.demo.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax+SpringMVC+JSON</title>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript">
$(function(){
    $.ajax({
        url:"loadcities.do",
        type:"get",
        dataType:"json",
        success:function(data){
            for(var i=0;i<data.length;i++){
                var id = data[i].id;
                var name = data[i].name;
                var li = "<li>"+id+" "+name+"</li>";
                $("#cities").append(li);
            }
        },
        error:function(){
            alert("加载失败!");
        }
    });    
});
</script>
</head>
<body>
<ul id="cities">
</ul>
<ul id="stocks">
</ul>
</body>
</html>
 

© 著作权归作者所有

Romanceling
粉丝 14
博文 166
码字总数 91809
作品 0
无锡
程序员
私信 提问
Spring Boot 之 HelloWorld 与 多文件上传详解

0、用到的框架和组件如下: Spring Boot 1.4.3.RELEASE Spring 4.3.5.RELEASE Thymeleaf jQuery (webjars) Maven Embedded Tomcat 8.5.6 Google Chrome Browser (Network Inspect) 附:Sprin......

大数据之路
2012/11/23
852
1
Spring MVC 使用ajax时,控制器无法获取客户端参数

最近在使用学习SpringMVC,因为比较喜欢使用ajax,所以研磨了下Spring 3.1MVC里对ajax的支持,但是发现了一个问题在页面上使用客户端使用post请求: $.ajax({ url:"/jweb/account?"+"name=tom&...

hoodlake
2013/04/02
1W
5
spring mvc Ajax 的运用以及遇到的问题

Spring mvc 3.x版本,在支持Ajax方面还是不错的,看文档我们发现,只要我们在Controller里添加@RequestBody 和@ResponseBody两个标签后,就能把前台传过来的JSON对象进行转换成我们的java对象...

Line
2014/02/27
3.4K
0
SpringBoot集成Spring Security(4)——自定义表单登录

通过前面三篇文章,应该大致了解了Spring Security的流程。你应该发现了,真正的登录请求是由Spring Security帮我们处理的,那么我们如何实现自定义表单登录呢,比如添加一个验证码… 源码地...

yuanlaijike
2018/05/09
0
0
采用annotation对spring-mvc进行登录权限控制

在web系统中,判断用户是否登录是一个常用功能. 本文提出一种采用annotation对spring-mvc进行用户登录判断的方法. [程序源代码][1] 方法简介 建立一个annotation, 在需要登录判断的spring-mv...

taojinhuo
2013/01/05
1.1W
17

没有更多内容

加载失败,请刷新页面

加载更多

Wrapper Classes in Java

1. Overview As the name suggests, wrapper classes are objects encapsulating primitive Java types. Each Java primitive has a corresponding wrapper: boolean, byte, short, char, in......

Ciet
22分钟前
40
0
如何在Android中更改进度栏的进度颜色

我在Android应用程序中使用水平进度条,并且想要更改其进度颜色(默认情况下为黄色)。 如何使用code (而不是XML)来实现? #1楼 ProgressBar bar;private Handler progressBarHandler =...

javail
36分钟前
22
0
最小化/解压缩JavaScript的工具[关闭]

关闭。 这个问题是 题外话 。 它当前不接受答案。 想改善这个问题吗? 更新问题 ,使其成为Stack Overflow 的主题 。 5年前关闭。 是否有任何命令行脚本和/或在线工具可以逆转缩小效果,类似...

技术盛宴
51分钟前
37
0
ZhaoWei-2020-01-29

并发相关 1、并发编程三要素? (1)原子性 原子性指的是一个或者多个操作,要么全部执行并且在执行的过程中不被其他操作打断,要么就全部都不执行。 (2)可见性 可见性指多个线程操作一个共...

SuSheePark
今天
75
0
微信小程序结构说明

一、微信小程序结构: 小程序框架的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生App体验服务 小程序框架提供了自己的视图层描述语言wxml和wxss以及JavaScript,并在视...

冥焱
今天
84
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部