AJAX与jQuery(JSON数据格式)

为什么使用Ajax

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

传统Web与Ajax的差异

XMLHttpRequest

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

XMLHttpRequest

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

  1. readyState：XMLHttpRequest的状态信息
     

  2. status：HTTP的状态码
     

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

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

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

GET请求和POST请求的区别

使用jQuery实现Ajax

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

$.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）
  1. 一种轻量级的数据交换格式
  2. 采用独立于语言的文本格式
  3. 通常用于在客户端和服务器之间传递数据
• JSON的优点
  1. 轻量级交互语言
  2. 结构简单
  3. 易于解析

定义JSON

• 定义JSON对象
  语法：var JSON对象 = { “name” : value, “name” : value, …… };
• 定义JSON数组
  1. 语法：var JSON数组 = [ value, value, …… ];
  2. 示例：

var countryArray = [ "中国",  "美国",  "俄罗斯" ];
var personArray = [ { "name":"张三",  "age":30 },
                    { "name":"李四",  "age":40 } ];

jQuery的Ajax常用方法

• $.ajax()

• $.get()

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

• $.post()

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

• $.getJSON()

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

• .load()

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

  2. 参数说明:
     

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

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

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

  6. 示例：

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

基于表单数据的Ajax请求

• .serializeArray()

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

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

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

FastJSON简介

• FastJSON

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

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

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

jQuery让渡$操作符

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

// 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()方法，放弃对$的使用权，以免与其他脚本库冲突。
  1. 示例：

 // 让渡$使用权，后续jQuery代码使用jQuery代替$
jQuery.noConflict();
jQuery( document ).ready( … );
或者重新指定一个替代符号：
var  $j = jQuery.noConflict(); // 让渡$使用权，并指定用 $j 代替$
$j( document ).ready( … );

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

3. 示例：

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