AJAX与jQuery(JSON数据格式)

为什么使用Ajax

无刷新：不刷新整个页面，只刷新局部。无刷新的好处 1.只更新部分页面，有效利用带宽 2.提供连续的用户体验 3.提供类似C/S的交互效果，操作更方便

传统Web与Ajax的差异

XMLHttpRequest

整个Ajax技术的核心提供异步发送请求的能力常用方法

XMLHttpRequest

事件 onreadystatechange：指定回调函数常用属性

readyState：XMLHttpRequest的状态信息

status：HTTP的状态码

statusText：返回当前请求的响应状态

responseText：以文本形式获得响应的内容

responseXML：将XML格式的响应内容解析成DOM对象

GET请求和POST请求的区别

使用jQuery实现Ajax

传统方式实现Ajax的不足 步骤繁琐方法、属性、常用值较多不好记忆处理复杂结构的响应数据（如XML格式）比较烦琐浏览器兼容问题

$.ajax()简介

语法：$.ajax( [settings] );

常用属性参数

常用函数参数

示例：

$.ajax({ "url":"newsUserControllerRegister", "data":{"eamil" : $('#eamil').val()}, "type":"get", "dataType":"text", "success":function (data) { $("#eamils").html(data); }, "error":function () { alert("请联系管理员"); } })

认识JSON

JSON（JavaScript Object Notation） 一种轻量级的数据交换格式采用独立于语言的文本格式通常用于在客户端和服务器之间传递数据 JSON的优点 轻量级交互语言结构简单易于解析

定义JSON

定义JSON对象 语法：var JSON对象 = { “name” : value, “name” : value, …… };定义JSON数组 语法：var JSON数组 = [ value, value, …… ];示例： var countryArray = [ "中国", "美国", "俄罗斯" ]; var personArray = [ { "name":"张三", "age":30 }, { "name":"李四", "age":40 } ];

jQuery的Ajax常用方法

$.ajax()

$.get()

语法：$.get( url [, data] [, success] [, dataType] );参数说明:

$.post()

语法：$.post( url [, data] [, success] [, dataType] );参数说明:

$.getJSON()

$.getJSON()方法只能以GET方式发送请求。语法：$.getJSON( url [, data] [, success] );参数说明:

.load()

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

参数说明:

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

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

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

示例：

$.get( url, data, function( responseText ) { $( "#opt_area>ul" ).html( responseText ); } );

基于表单数据的Ajax请求

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

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

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

FastJSON简介

FastJSON

一个性能很好的、Java实现的JSON解析器和生成器。将Java对象序列化成JSON字符串。将JSON字符串反序列化得到Java对象。 https://github.com/alibaba/fastjson/releases

入口类：com.alibaba.fastjson.JSON 包含值为 null 的字段，数值为 null 输出0，String 为 null 输出“”

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

jQuery让渡$操作符

jQuery不是唯一使用 $ 的脚本库，项目中有其他同样使用 $ 的脚本库时就会引起冲突。 示例： // Prototype的 $ 会覆盖jQuery的 $ <script type="text/javascript" src="../js/jquery-1.12.4.min.js" /> <script type="text/javascript" src="../js/prototype.js" /> 或者 // jQuery的 $ 会覆盖Prototype的 $ <script type="text/javascript" src="../js/prototype.js" /> <script type="text/javascript" src="../js/jquery-1.12.4.min.js" /> jQuery定义了jQuery.noConflict()方法，放弃对$的使用权，以免与其他脚本库冲突。 示例： // 让渡$使用权，后续jQuery代码使用jQuery代替$ jQuery.noConflict(); jQuery( document ).ready( … ); 或者重新指定一个替代符号： var $j = jQuery.noConflict(); // 让渡$使用权，并指定用 $j 代替$ $j( document ).ready( … );

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

示例：

// 让渡$使用权，其他脚本库可以使用$ jQuery.noConflict(); jQuery( document ).ready( function( $ ) { // 在这里继续使用$编写jQuery代码 $( "#show" ).click( … ); } ); 或者 jQuery.noConflict(); // 让渡$使用权，其他脚本库可以使用$ ( function( $ ) { // 在这里继续使用$编写jQuery代码 $( document ).ready( function() { $( "#show" ).click( … ); } ); } )( jQuery );