关于Ajax异步请求

AJAX

AJAX引言

​ a)概念: ansychronous(异步) javascript(js) and xml(全称,异步javaScript and XML)

​ b)传统请求

​ i.发起传统的请求?

​ 1.地址栏

​ 2.超级链接

​ 3.JavaScript:location.href

​ 4.表单

​ ii.传统请求的问题

​ 1.同步请求响应的是新的页面,所以用户就必须等待响应结果,才可以进 行后续操作.

​ 2.用户体验差

​ iii.异步请求的特点

​ 1.响应的内容不是新的页面,是一个页面的局部信息,所以用户再使用异步请求的时候,不需要等待响应 .

​ iv.传统请求与异步请求的区别

​ 1.响应内容

​ 传统响应的内容:新的页面,刷新页面

​ 异步响应的内容:页面的局部,字符串信息

​ 2.对于用户的操作

​ 传统的请求:等待响应

​ 异步的请求:不需要等待响应,用户可以直接进行后续操作

​ v.建议在合适的场景下,都使用异步请求,提高用户的体验

异步请求的开发

​ a)什么是异步请求

​ javascript:XmlHttpRequest对象 简称xhr

​ Chrome|FF|sofia中 XmlHttpRequest

​ var xhr = new XmlHttpRequest();

​ IE中 ActiveXObject

​ var xhr = new ActiveXObject(“Microsoft.XMLHHTP”);

​ b)xhr对象的使用

​ 1.创建xhr对象

​ 2.发送请求

​ a)如何发送请求

​ xhr.open("get | | post,url);

​ b)如何传递数据

​ xhr.send(null);

​ 3.监听响应

​ xhr.readstate属性的值

​ 0 xhr对象被创建,并没有调用send()方法时

​ 1 xhr对象调用了send()方法,没有响应

​ 2 xhr对象调用了send()方法,响应已经返回client

​ 3 响应解析

​ 4 响应解析完成,并可以使用

​ xhr.status 响应是否正确

​ 响应码 错误的响应码404,405,400,500 ,正确的响应码是200

​ xhr.onreadstatechange = function(){

​ //判断响应是否完成,响应是否正确

​ if(xhr.readstate4 && xhr.status200){

​ 获得响应的文本 xhr.responseText

​ JavaScript 的DOM编程 加入页面中

​ }

​ }

注意:使用ajax 服务器端不在进行页面的跳转,而是通过返回字符串信息,完成交互,request作用域,不使用.底层是用Response.getWriter()获取输出流,进行交互.

发送请求(post)

​ xhr.open(“POST”,url);

​ 设置xhr.setRequestHeader(“content-type”,“application/x-www-form-urlencoded”);

​ 为什么设置:模拟表单

​ 基于web开发,只能使用表单提交数据,使用表单提交数据时默认指定enctype=“application/x-www-form-urlencoded”,但是现在使用ajax编程,不再使用<form标签了也就没有方式提供enctype属性对应的值了,那么这时候需要通过请求中手工设置application/x-www-urlencode来模拟表单.

​ xhr.send(“name=suns&pwd=123&sex=male”);

JSON协议串

​ JSON协议串,本质上就是一个字符串

​ 作用:异构(不同的编程语言)的编程体系中,进行数据的传输,交互.

​ java中的对象或集合转换json协议串的格式:

​ java对象转json

User{           
    id=1;
    username="张三";
    password="123456";
}

json协议串
{"id":1,"username":"张三","password":"123456"}

​ java数组转json

java
String [] ids={"嘻嘻","哈哈","嘿嘿"};

json
["嘻嘻","哈哈","嘿嘿"]

​ java集合[list,set]转json

java

List<User>

User{
id=1;
username="小黑";
password="123456";
}

User{
id=2;
username="小白";
password="123456";
}

json

[{"id":1,"username":"小黑","password":"123456"},{"id":2,"username":"小白","password":"123456"}]

​ java的Map集合转json

java

Map<String,String>   maps = new HashMap<>();

maps.put("username","小黑");
maps.put("password","123456")
   
Map集合转json与对象形式保持一致

json

{"username":"小黑","password":"123456"}

​ json协议串转换工具

​ FastJSON(alibaba) GSON(GOOGLE) JACKSON(SpringMVC)

​ FastJSON的使用步骤

1. 引入FastJSON的相关依赖

2. 使用FastJSON进行转换

3. @JSONField注解

   1. @JSONField(serialize=false) 作用:在进行JSON协议串转换时,排除该属性.
   2. @JSONField(name=“name”) 作用:指定转换后json协议串的属性名
   3. @JSONField(format=“yyyy-MM-dd”) 作用:指定日期转换格式

4. JSON协议串转换java对象或集合

   1. JSON协议串转对象

      1. 类名 引用名 = JSON.parseObject(jsonString,类名.class);

   2. JSON协议串转List集合

      1. List users = JSON.parseArray(jsonString,User.class);

   3. JSON协议串转set集合(Set类型)

      1. Set set = JSON.parseObject(jsonString,Set.class);

   4. JSON协议串转Map

      1. Map <String,String> maps = new HashMap<>();
         maps.put("username","张三");
         maps.put("password","123456");
         String jsontoString = JSONtoString()
         

GSON的使用步骤

1. 引入GSON的相关依赖

2. java中的集合和对象转JSON

   1. User user = new User(1,"张三","123456");
      Gson gson = new Gson;
      String  json = gson.toJson(user);
      

3. JSON转对象或者集合

   1. User user = new User(1,"张三","123456");
      Gson gson = new Gson;
      String  json = gson.toJson(user);
      User  user1 = gson.fromJson(json,User.class);