Ajax交互扩展

JQuery实现Ajax方法

JQuery

1. $.ajax()
2. $.get()
3. $.post()
4. $.getJSON()
5. .load()

---

$.get()方法：是 jQuery 封装的发送 HTTP GET 请求从服务器加载数据的Ajax方法；

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

$.get()方法常用参数：

$.get()方法常用参数：等价于

	$.ajax( {
		"url"  : url,
		"data" : data,
		"type" : "get",
		"success" : function( result ) {
			   // 省略代码
		      }
	} );
	

$.post()方法：是 jQuery 封装的发送 HTTP POST请求从服务器加载数据的Ajax方法；

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

$.post()方法常用的参数：

$.post()方法常用参数：等价于

	$.ajax( {
		"url"  : url,
		"data" : data,
		"type" : "post",
		"success" : function( result ) {
			   // 省略代码
		      }
	} );
	

---

getJSON()方法：由于使用Ajax技术实现异步请求时，经常采用JSON数据格式作为相遇内容的载体，为了简化此种情况下的方法调用，jQuery提供了此方法；

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

$.getJSON()方法常用的参数：使用 $.getJSON() 实现异步交互

• $.getJSON()方法只能以GET方式发送请求；

$.getJSON()方法等价于

$.ajax( {
	"url"   : url,
	"data"  : data,
	"type"  : "get",
	"dataType" : "json",
	"success"  : function( result ) {
		   // 省略代码
	      }
} );

---

使用Ajak直接加载页面内容

.load()方法 ：方对于通过 Ajax 请求直接加载 HTML 内容当前页面的使用场景，jQuery 也提供了 一个 . load()方法作为简易实现。该方法通过发送 Ajax 请求从服务器加载数据并把晌应的数据添加到指定元素中。

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

.load()方法常用的参数：

• 该方法默认使用 GET 方法发送请求，除非提供的 data 参数是一个对象 , 则使用 POST 方法发送；

• 该方法是最简单的从服务器获取数据的 Ajax 方法 , 它几乎与$ .get(url，data，success)方法等价；不同的是它不是全局函数，而是针对与选择器匹配的元素执行，并且它拥有匿名的回调函数，当求成功后，该方法自动将返回的数据设置为匹配元素的 HTML 内容

$ .get()、$ .post()、$ .getJSON()、对象.load()等常用 Ajax 方法都是基于$ .ajax ()方法封装的，相比于$ .ajax ()方法更加简洁、方便。通常情况下，对于一般的Ajax 功能需求使用以上 Ajax 方法即可满足()，如果需要更多的灵活性，可以使用$.ajax ()方法指定多参数；

---

基于表单数据Ajak请求

jQuery的.serializeArray()方法会从一组表单元素中检测有效控件，将其序列化成由 name 和 value()两个属性构成的 JSON 对象的数组。

其中有效控件的规则如下(检测一组表单元素中的有效控件)：

• 没有被禁用

• 必须有name属性

• 选中的checkbox或radio才是有效的

• 只有触发提交事件的submit按钮才是有效的

• file元素不会被序列化

$.param()：

• jQuery还提供了一种更简便的方式来实现将表单序列化成请求字符串的功能,即对表元素调用.serialize ()方法：$commentlnputs.serialize()方法，实际上，.serialize()方法内部就是使用 $.param()对.serializeArray()做了一个简单包装。对于不需要中间环节的情景，可以更简便地完成表单数据的序列化；

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

---

使用FastJSON生成JSON字符串

FastJSON简介：FastJSON是一个性能很好的、由Java实现的JSON解析器和生成器，来自阿里巴巴，其代码托管在 GitHub 服务器上，在https://github.com/alibaba/fastjson/releases页面可以找到不同版本jar文件和源代码下载路径；FastJSON提供了把 Java 对象序列化成 JSON 字符串，以及将 JSON 字符串反序列化得到 Java对象的功能；

使用FastJSON API：FastJSON API的入口类是com.alibaba.fastjson.JSON，基本上常用的操作都可以通过该类的静态方法直接完成。

用于将 Java 对象序列化成 JSON 字符串的常用方法如下：

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

常用属性如下：

---

JQuery让渡 $操作方法

为什么要让渡“$”操作符

在jQuery中，“$” 符号有着重要的作用。但是除了jQuery，还有很多其他的JavaScript脚本库都是用了“$”符号。如果在项目中使用了jQuery和另一个同样使用“$”符号的脚本库，势必会产生冲突。

jQuery.noConflict()方法让渡“$”操作符

jQuery为了能够与其他同样使用“$”符号的脚本库共同工作，jQuery定义了jQuery.noConflict()方法，放弃对“$”符号的使用权，并且可以通过返回值指定一个替代方法；

1. 不再使用$操作符的让渡

jQuery.noConflict();//让渡$的使用权，后续只能使用jQuery代替$
jQuery("#show").click(function(){
    //省略部分代码
})
//或者重新指定一个替代的符号
var $j=jQuery.noConflict();//让渡$的使用权，并且指定后续使用$j代替$
$j("#show").click(function(){
    //省略部分代码

2. 仍然使用$操作符的让渡

//方式一：
jQuery.noConflict();//让渡$的使用权，其他脚本库可以使用$
jQuery(document).ready(function($){
    //在此代码中可以使用$编写jQuery代码
        //省略其他代码
});

//方式二：
jQuery.noConflict();//让渡$的使用权，其他脚本库可以使用$
(function($){
    //在此代码中可以使用$编写jQuery代码
    $(document).ready(function(){
        //省略其他代码
    });    
})(jQuery);

---

总结