Ajax与SpringMVC

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等

例:1、三
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>