初学AJAX

青旅半醒 2021-12-19 22:59 210阅读 0赞

# 初学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函数会执行。  
    ![在这里插入图片描述][20190702144227155.png]
 *  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、区别
    
     a j a x ( ) 是 一 个 偏 底 层 的 方 法 ， 可 以 通 过 设 置 a s y n c 的 属 性 值 ( t r u e ∣ f a l s e ) ， 选 择 发 送 异 步 请 求 ∣ 同 步 请 求 ； ajax()是一个偏底层的方法，可以通过设置async的属性值(true | false)，选择发送异步请求 | 同步请求； ajax()是一个偏底层的方法，可以通过设置async的属性值(true∣false)，选择发送异步请求∣同步请求；get() | $post()则不可以。

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

详细请见：[https://blog.csdn.net/qq\_35371323/article/details/94357420][https_blog.csdn.net_qq_35371323_article_details_94357420]

[20190702144227155.png]: /images/20211219/0b38e73b3f5c45ee90e0561757c8ede8.png
[https_blog.csdn.net_qq_35371323_article_details_94357420]: https://blog.csdn.net/qq_35371323/article/details/94357420