初学AJAX

初学AJAX

一、Ajax技术及原理

1.1、概念

Ajax(Asynchronous JavaScript and XML)是异步的JavaScript和xml，是一种网页的局部刷新技术

1.2、同步请求与异步请求

新情景 ：请求之后，不会刷新整张页面，页面不动，只会刷新页面的局部。

• 1、同步请求方式： form表单、超级链接、地址栏、js中的location.href

  特点 : 请求之后，会刷新整张页面

  弊端 : 极大浪费了网络资源 ；导致用户操作被中断，造成用户的体验极差。

• 2、异步请求方式：Ajax

  特点：多个事件并行发生，事件之间互相不太影响，请求之后，不会刷新整张页面，页面不动，只会刷新局部页面。

1.3、Ajax浏览器支持

AJAX的核心对象是XMLHttpRequest对象，不同的浏览器创建XMLHttpRequest对象的方式是存在差异的，简称xhr。

• 创建方式：

  IE浏览器使用ActiveXObject创建，其他浏览器使用XMLHttpRequest的JavaScript内建对象。

• 使用方式：

  非IE环境的使用：xmlHttp = new XMLHttpRequest()；IE环境的会使用：xmlHttp = new ActiveXObject(“Microsoft.XMLHTTP”)

1.4、Ajax工作原理

Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面

1.5、XMLHttpRequest属性

• 1、onreadystatechange属性：存有处理服务器响应的函数。

• 2、readyState属性：存有服务器响应的状态信息。每当readyState改变时，onreadystatechange函数会执行。
  

• 3、responseText属性：来取从服务器返回的数据。

• 4、status属性：代表server的状态码

  ​ 常见的状态码值：404-请求资源无效

  ​ 500-服务器内部有错(出异常)

  ​ 200-正确、成功

1.6、open()与send()方法

• open()方法：初始化xhr对象。

  3个参数的含义：参数1，发送请求的方式get | post

  ​ 参数2，server端程序的url

  ​ 参数3，是否异步发请求true异步 false 同步

• send()方法：发送ajax请求

  1个参数，代表携带的请求数据(如果没有有则为空或者null)

二、编程思路及相关知识点

2.1、开发步骤

​ 在jsp页面书写步骤：

• 1、创建xhr对象
• 2、发送请求(post/get方式的异步请求)，并携带数据
• 3、处理响应结果(页面局部刷新)

​ 在action中书写步骤：

• 1、接受参数
• 2、调用业务
• 3、响应ajax结果(响应输出流)

2.2、JSON简介

2.2.1、JSON概念

JSON(JavaScript Object Notation) js对象的表示形式，实际上就是固定格式的字符串

常见的JSON类库有：

• 1、gson google公司
• 2、jackson sprinMVC默认使用
• 3、fastjson 阿里

2.2.2、fastjson的使用

• 1、使用fastJson:把java对象–>json字符串

	//实体类的创建代码
	private Integer userid;
	private String username;
	private boolean bn;
	private java.util.Date birthday;
	//测试类测试代码
	User user = new User(1, "tom", true, new Date());
	String jsonString = JSON.toJSONString(user);
	//输出的日期格式为"yyyy-MM-dd"
	String jsonString1 = JSON.toJSONStringWithDateFormat(user, "yyyy-MM-dd");

• 2、使用fastJson:把java list集合–>json字符串

	//测试类代码   
	User user1 = new User(1, "aaa", true, new Date());
    User user2 = new User(2, "bbb", false, new Date());
    User user3 = new User(3, "ccc", true, new Date());
    List<User> list = new ArrayList<User>();
    list.add(user1);
    list.add(user2);
    list.add(user3);
    String jsonString = JSON.toJSONString(list);
    System.out.println(jsonString);

• 3、fastjson常见的操作

  1、对象属性不序列化成json

  	@JSONField(serialize=false)
  

  2、日期的注解处理

  	@JSONField(format="yyyy-MM-dd")
  

  3、属性起别名

  	@JSONField(name="xxx")
  

  4、处理json对象属性的回环问题(已解决回环问题)

  ​ (加在其中一个实体类的引用属性前)

  	@JSONField(serialize=false)
  	private User user;
  

2.2.3、jackjson的使用

• 1、使用jackJson:把java对象–>json字符串

        //测试类的代码
        User user = new User(1,"tom",true,new Date());
                    ObjectMapper mapper = new ObjectMapper();
        //需要设置如期格式
        mapper.setDateFormat(new SimpleDateFormat("yyyy-MM-dd"));
        String jsonString = mapper.writeValueAsString(user);
        System.out.println(jsonString);

• 2、使用FastJson:把java list集合–>json字符串

  与fastjson相类似

• 3、jackjson常见的操作

  1、对象属性不序列化成json

  	@JsonIgnore
  

  2、日期的注解处理

  先写一个实现类xxx实现JsonSerializable接口；再在属性前加上@JsonSerialize(using = xxx.class)

  3、属性起别名

  	@JsonProperty(value = "name")
  

  4、处理json对象属性的回环问题(沒有解决回环问题)

  	@JsonIgnore
  

2.2.4、json的反序列化

• fastjson反序列化使用的方法：JSON.parseObject(String text, Class clazz)

  第一个参数：要转化的json串 第二个参数：转化成的目标的类对象

• jacktjson反序列化使用的方法：mapper.readValue(byte[] src,Class valueType)

2.3JQuery封装的3个方法

• 1、$.ajax() 是一个偏底层的方法

  [外链图片转存失败(img-li7JtD9t-1562049726636)(C:\Users\DELL\Pictures\2019-06-30_110201.png)]

• 2、$get() 发送get请求

	$get("请求的地址","请求的数据String/{json}","function(res){处理响应的内容}","返回数据的类型")   

• 3、$post() 发送post请求

  $post("请求的地址","请求的数据String/{json}","function(res){处理响应的内容}","返回数据的类型")   
  

• 4、区别

  $ajax()是一个偏底层的方法，可以通过设置async的属性值(true|false)，选择发送异步请求|同步请求；$get() | $post()则不可以。

三、应用实例(省市区级联菜单)

详细请见：https://blog.csdn.net/qq_35371323/article/details/94357420