第一章-简介

1什么是AJAX

Asynchronous JavaScript and XML(异步的JavaScript和xml) 一种不用重新加载整个页面,就能更新部分网页产品链条:H5+网页+客户端+手机端(Android、IOS)+小程序 AJAX核心是XMLHttpRequest,只是对它进行了封装通过AJXJ可以使用HTTPGet和HTTPPost从远程服务器请求文本、HTML、XML等

用Response返回

直接返回：

1
2
3


{
Response.getWriter().print("false");
}

返回json数据

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


{ 
  depts=(ArrayList<Department>) deptDao.selectAll();//查找全部
		HttpServletResponse response=ServletActionContext.getResponse();
  response.setContentType("application/json;charset=utf-8");
        GsonBuilder gsonBuilder=new GsonBuilder();
        gsonBuilder.excludeFieldsWithoutExposeAnnotation();
        Gson gson=gsonBuilder.create();
        System.out.println("=="+gson.toJson(depts));
        try {
            PrintWriter pw=response.getWriter();
            pw.print(gson.toJson(depts));
            pw.close();
        } catch (IOException e) {
            e.printStackTrace();
        }
}

2json格式

介绍:JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式规则:JSON是一个标记符的序列。这套标记符包含六个构造字符、字符串、数字和三个字面名。构造符号: [{"":"”,"":""}] []表示数组,{}表示对象,分号：分割键值对,逗号,分割对象 JSON是一个序列化的对象或数组。

js对象和json对象转换:

1
2
3
4
5
6
7
8


//java中转换
	//1加入数组转换json的jar包 gson-2.2.3.jar
{	GsonBuilder builder=new GsonBuilder();
	builder.excludeFieldsWithoutExposeAnnotation();
Gson gson=builder.create();
ServletActionContext.getResponse().setContentType("application/json;charset=utf-8");
String str=gson.toJson(staffs);//[{},{}] 
}

第二章-跨域问题

1什么是跨域问题

跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对 JavaScript施加的安全限制。

2.什么是同源?

所谓同源是指，域名，协议，端口均相同 ●http://www.qf.com/ -> http://admin.qf.com/跨域 ●http://www.qf.com/ -> http://www.qf.com/非跨域 ●http://www.qf.com/ -> http://www.qf.com:8080/跨域 ●http://www.qf.com/ -> https://www.qf.com/跨域

3.如何解决跨域问题?

1使用CORS (跨资源共享)解决跨域问题 CORS是一个W3C标准，全称是”跨域资源共享”(Cross-origin resource sharing)。它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。 CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE 浏览器不能低于 IE10。整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS 通信与同源的AJAX通信没有差别，代码完全一样。浏览器一-旦发现 AJAX请求跨源，就会自动添加一-些附加的头信息，有时还会多出一-次附加的请求，但用户不会有感觉。因此，实现CORS 通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信(在header 中设置: (“Access-Control-Allow-Origin”, “*")

response 添加 header

我们在 Servlet 请求返回时添加如下代码： //表示支持所有网站访问，也可以额外配置相应网站 resp.setHeader(“Access-Control-Allow-Origin”, “*");

2SpringMVC解决

Spring MVC 从4.2版本开始增加了对CORS的支持，在spring MVC 中增加CORS支持非常简单，可以配置全局的规则，也可以使用@CrossOrigin注解进行细粒度的配置。使用@CrossOrigin注解,先通过源码看看该注解支持的属性：

1.1在Controller上使用@CrossOrigin注解

@CrossOrigin(origins = “*”, maxAge = 3600) @CrossOrigin(“http://domain2.com”)也可以用在方法上，用在Controller和方法上，会两者结合。

1.2用xml方式解决

1
2
3
4
5
6
7
8
9


<!-- 解决API接口跨域问题配置 Spring MVC 版本必须是 4.2 及以上 -->
<mvc:cors>
    <mvc:mapping path="/**"
    allowed-origins="*"
    allowed-methods="POST, GET, OPTIONS, DELETE, PUT"
    allowed-headers="Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With"
    allow-credentials="true"
    max-age="3600" />
</mvc:cors>

JSONP解决

JSONP(JSON with Padding)是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。由于同源策略，一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通，而 HTML 的<script> 元素是一个例外。利用 <script> 元素的这个开放策略，网页可以得到从其他来源动态产生的 JSON 资料，而这种使用模式就是所谓的 JSONP。用 JSONP 抓到的资料并不是 JSON，而是任意的JavaScript，用 JavaScript 直译器执行而不是用 JSON 解析器解析（需要目标服务器配合一个callback函数）。

相对于Springmvc的cors来说，JSONP只支持get请求，对老浏览器的支持比较好。

第三章-应用场景

Strtut2中使用

strtus2中使用还可以使用最为简单的，reponse直接返回请求。

1加入依赖，注意版本。

1
2
3
4
5


<dependency>
  <groupId>org.apache.struts</groupId>
  <artifactId>struts2-json-plugin</artifactId>
  <version>2.1.8</version>
</dependency>

2Action中

1
2
3
4
5
6
7
8


HashMap<String,Boolean> jsonMap;//注意给其get方法
public String checkName(){
   Boolean valid= usersDao.checkName(user.getUsers_name());
   jsonMap= new HashMap<>();
    jsonMap.put("valid",valid);
    System.out.println("========="+jsonMap.toString());
    return "success";
}

3struts.xml中

注意：extends="json-default"修改继承的拦截器(此拦截器默认继承了struts-default)

type为json，jsonMapname为root，jsonMap是aciton中集合名

1
2
3
4
5
6
7
8
9


<!--  Json使用  -->
<package name="ajaxPackage" extends="json-default" namespace="/ajax">
   <action name="register"  class="registerAction" >
       <result name="success" type="json" >
           <!--  成功     xx参数的过滤正则表达式的书写方法xx-->
           <param name="root">jsonMap</param>
       </result>
   </action>
</package>

Ajax.md

文章目录