12.Ajax交互扩展

Ajax交互扩展

1. jQuery的Ajax方法
   1. $.ajax()
   2. $.get()
   3. $.post()
   4. $.getJSON()
   5. .load()
   6. ……
2. $.get()简介

$.get( url [, data] [, success] [, dataType] );

1. $.get()用法

使用$.get() 实现异步交互

$.get( url, data, function( result ) {

// 省略将服务器返回的数据显示到页面的代码

} );

 

以上代码等价于

1. $.post()简介

$.post( url [, data] [, success] [, dataType] );

参数说明

1. $.post()用法

使用$.post() 实现异步交互

$.post( url, data, function( result ) {

// 省略将服务器返回的数据显示到页面的代码

} );

 

以上代码等价于

 

1. $.getJSON()简介

$.getJSON( url [, data] [, success] );

参数说明:

 

1. $.getJSON()用法

使用$.getJSON() 实现异步交互

$.getJSON( url, data, function( result ) {

// 省略将服务器返回的数据显示到页面的代码

} );

 

以上代码等价于

 

1. 使用Ajax直接加载页面内容

 

 

1. .load()简介

$( selector ).load( url [, data] [, complete] );

参数说明:

 

注意:

.load()不是全局函数，而是针对与选择器匹配的元素执行

包含匿名回调函数，自动将返回值设置为匹配元素的HTML内容

1. .load()用法
   1. 使用.load()实现异步交互

$( "#opt_area>ul" ).load( url, data );

1. 1. 以上代码等价于

$.get( url, data, function( responseText ) {

$( "#opt_area>ul" ).html( responseText );

} );

注意:

默认使用GET方式请求，除非data参数是一个对象，则使用POST方式

1. 小结

jQuery提供的实现Ajax的方法

1. • • $.ajax()
     • $.get()
     • $.post()
     • $.getJSON()
     • .load()
2. 基于表单数据的Ajax请求

问题:

需要发送表单数据时，提取表单元素的值并构造成合适的数据格式是件很烦琐的事

分析:

使用jQuery提供的方法简化处理

.serializeArray()

$.param()

1. .serializeArray()
   1. 检测一组表单元素中的有效控件
      • 没有被禁用
      • 必须有name属性
      • 选中的checkbox或radio
      • 触发提交事件的submit按钮
      • file元素不会被序列化
   2. 将有效控件序列化为JSON对象数组
      • 包含name和value两个属性
2. $.param()

将由. serializeArray()生成的对象数组序列化成请求字符串的形式

经验:

jQuery还提供了.serialize()方法。

.serialize()内部使用$.param()对.serializeArray()做了一个简单包装。不需要中间环节时，可以更简便地完成表单数据的序列化

1. FastJSON简介
   1. 随着JSON的广泛使用，在服务器端生成JSON字符串成了一件麻烦的工作，效率低且易出错
   2. FastJSON
      • 一个性能很好的、Java实现的JSON解析器和生成器
      • 将Java对象序列化成JSON字符串
      • 将JSON字符串反序列化得到Java对象
   3. https://github.com/alibaba/fastjson/releases

 

1. FastJSON API 3-1

入口类：com.alibaba.fastjson.JSON

 

1. FastJSON API 3-2

枚举类型 SerializerFeature 定义了多种序列化属性

 

 

1. FastJSON API 3-3

示例:

// 包含值为 null 的字段，数值为 null  输出0，String 为 null 输出“”

String  strJSON = JSON.toJSONString ( javaObject,

               SerializerFeature.WriteMapNullValue,

                       SerializerFeature.WriteNullNumberAsZero,

                     SerializerFeature.WriteNullStringAsEmpty );

 

1. jQuery让渡$操作符3-1

问题:

jQuery不是唯一使用 $ 的脚本库，项目中有其他同样使用 $ 的脚本库时就会引起冲突

示例:

1. jQuery让渡$操作符3-2

jQuery定义了jQuery.noConflict()方法，放弃对$的使用权，以免与其他脚本库冲突

示例:

 

问题:

改变了jQuery的编码风格，烦琐且不利于重用已有代码

1. jQuery让渡$操作符3-3

 

1. 总结