Jquery——Day4（Ajax基本用法get/post/ajax/serialize等）

            Ajax，全称为“Asynchronous Javascript and XML”（异步的Javascript和XML），它不是一种Javascript的单一技术，而是利用了一系列交互式网页应用相关的技术所形成的结合体。
一般使用Ajax，实现无刷新状态更新页面，并且实现了异步提交，提升了用户体验。
（1）Ajax优势：
a、不需要插件支持
b、用户体验极佳（不刷新界面即可获取可更新的数据）
c、提升web程序的性能（传递数据时是按需传递，不需整体）
d、减轻服务器和带宽的负担（将服务器操作转到客户端）


（2）Ajax不足：
a、不同版本的浏览器XMLHttpRequest对象支持不足（如IE5之前）
b、前进、后退功能被破坏
c、搜索引擎的支持度不够（由于引擎爬虫还不能理解JS引起变化数据的内容）
d、开发调试工具缺乏


（3）异步与同步有什么区别呢
同步：一段程序执行完才能执行下一段
异步：可以同时执行多条任务
在Ajax中使用同步，会产生“阻塞模式”，类似于假死状态，所以，在Ajax中大部分使用异步模式。


在jQuery中对于Ajax的使用一般采用$.ajax()方法

$(function(){
	$('input').click(function(){
		$.ajax({
			type:'POST',
			url:'test.php',
			data:{
				'baidu.com'
			},
			success:function(response,status,xhr){
				$('#box').html(response);
			}
		});
	});
});

1、load()方法
jQuery对Ajax做了大量的封装，使用起来较为方便，不必考虑浏览器兼容性。
对于封装的方式，jQuery采用三层封装：最底层（$.ajax()）,而这层封装了第二层有三种方法：load()、$.get()、$.post()，最高层是$.getScript()、$.getJSON()。
结构：load(url[必须，请求html的url地址，string类型],[,data] [,callback])
data——Object类型，发送至服务器的key、value数据
callback——Function，请求完成时的回调函数，无论请求或失败。
若要异步加载数据，

<input type="button" value="异步加载数据" />
<div id="box"></div>

利用jQuery中的load()方法实现异步加载，如下：

$(function(){
	$('input').click(function(){
		$('#box').load('test.html');
	});
});

在test.html中代码如下：

<span class="title">百度</span>
<span class="url">www.baidu.com</span>

如果是服务器文件，比如说php文件。一般不需要载入数据，还需要向服务器提交数据，那么就需要有第二个参数data。向服务器提交数据有两种方式：get、post

$('input').click(function(){
	$('#box').load('test.php',{
		url:'baidu.com'
	},function(reponse,status,xhr){
		$('#box').html(response+'123');
	});
});

response回应的状态有两种：success、error；
xhr（XMLHttpRequest）属性为：
（1）responseText：作为响应主体被返回的文本、
（2）responseXML：如果响应主体内容类型为“text/xml”，则返回包含响应数据的XML DOM文档
（3）status：响应的HTPP状态、
（4）statusText：HTTP状态的说明。


2、$.get()、$.post()
二者比$.load()多了一个参数“type”，表示传递的数据类型
A.$.get()
（1）通过直接在url问号紧跟着传参

$(function(){
	$('input').click(function(){
		$.get('test.php?url=baidu',function(response,status,xhr){
			$('#box').html(response);
		});
	});
});

（2）通过第二个参数data，字符串形式的键值对传参，然后自动转换为问号紧跟传参

$('input').click(function(){
	$.get('test.php',{
		url:'baidu'
	},function(trsponse,status,xhr){
		$('#box').html(response);
	});
});

B、$.post()
（1）post提交不能使用问号传参

$('input').click(function(){
	$.post('test.php','url=baidu',function(response,status,xhr){
		$('#box').html(response);
	});
});

（2）post提交可以使用字符串的形式进行传参数，自动转换为http消息实体传参

$('input').click(function(){
	$.post('test.php',{
		url:'baidu'
	},function(response,status,xhr){
		$('#box').html(response);
	});
});

post提交可以使用对象键值对。


注意：$.get()、$.post()区别
（1）GET请求是通过URL提交的，而POST请求是HTTP消息实体提交的；
（2）GET提交有大小限制（2kb），而POST不受限制；
（3）GET方式会被缓存下来，可能有安全问题，而POST没这个问题；
（4）GET方式通过$_GET[]获取，POST方式通过$_POST[]获取。




C、数据格式
（1）HTML片段
由于服务器返回的数据格式是HTML片段，因此并不需要经过处理就可以将新的HTML数据插入到主页面中。（见上面案例“.html(data)”所示）
它实现需要很少的工作量，但这种固定的数据结构并不一定能在其他的Web应用程序中得到重用。


（2）XML文档
在jQuery中，处理xml与html文档相同，也可以使用常规的attr()、find()、filter()以及其他方法。

$('input').click(function(){
	$.post('test.xml',function(response,status,xhr){
		alert(response);
	},'html');             //默认type是xml；
});

若默认值type为xml，即强行设置为html，则连xml标签也返回。


将上述alert语句代码改为“alert($(response).find('root').find('url').text())”


（3）JSON文件
由于服务器返回的数据格式是JSON，因此需要对返回的数据进行处理之后，才可以将新的HTML数据添加到主页面中。

$('input').click(function(){
	$.get('test.php',{
		username:$('username').val() ,
		content:$('#content').val
	},function(data,status){
		var username=data.username;
		var content=data.content;
		var txtHtml="<h6>"+username+":</h6><p>"+content+"</p>"
	},"json");
});

在上述代码中，$.get()方法第4个参数（type）设置为“json”代表期待服务器端返回的数据格式。


注意：这3种格式的比较——
首先，HTML片段来提供返回数据最简单；
若数据需要重用，那么JSON文件将是不错的选择，无论性能还是大小都占有很大的优势；
当远程应用程序未知时，XML文档是明智的选择，是web领域的“世界语”。


3、表单序列化
3-1：首先，以一个简单的form表单为例

<form>
用户名：<input type="text" name="user"/>
密码：<input type="password" name="pass" />
<input type="button" value="提交" />
<div id="box"></div>
</form>

3-2：后台服务器端user.php代码如下：

<?php
	echo $_POST['user'].'-'.$_POST['pass'];
?>

3-3：在jQuery中，对Ajax进行操作，如下：

$(function(){
	$('form input[type=button]').click(function(){
		alert("");
		$.ajax({
			type:'POST',
			url:'user.php',
			data:{
				user:$("form input[name=user]").val(),
				pass:$("form input[name=pass]").val(),
			},
			success:function(response,status,xhr){
				$('#box').html(response);
			}
		});
	});
});

综上所述，当有多个表单的情况下，较为复杂，容易出错，即复制提交的JS内容时，data属性修改的东西就非常多。所以，需要表单序列化“serialize()”的概念。
（1）serialize()方法
由于怕冗余出错的问题，把上述ajax代码中传递数据data改为表单序列化，如下：

	$.ajax({
			type:'POST',
			url:'user.php',
			data:$('form').serialize(),
			success:function(response,status,xhr){
				$('#box').html(response);
			}
	});

同时，它还可以对单选框、复选框进行表单的序列化

$('form input [name="sex"]').click(function(){	
	$('#box').html($(this).serialize());
});

（2）serializeArray()方法
该方法与serialize()方法区别在于，它不是返回字符串，而是将DOM元素序列化后，返回JSON格式的数据。

var sex=$(':radio').serializeArray();
console.log(sex);

（3）ajaxSetup()方法
有时候，需要在同一个程序中多次调用ajax()，而他们很多参数都相同，这个时候jQuery提供的$.ajaxSetup()请求默认值来初始化参数。

$('form input[type=button]').click(function(){
	$.ajaxSetup({
		type:'POST',
		url:'test.php',
		data:$('form').serialize();
	});


	$.ajax({
		success:function(response,status,xhr){
			alert(response);
		}
	});
});

（4）$.param()方法
它是serialize()方法的核心，用来对一个数组或对象按照key/value进行序列化。

var obj={a:1,b:3,c:3};
var k=$.param(obj);
alert(k);

结果：a=1&b=2&c=3
该方法最主要的作用是解析键值对。


4、getScript()、getJson()
（1）$.getScript()
有时候，在页面初次加载时就取得所需的全部Javascript文件是完全没有必要的。
jQuery提供了$.getScript()方法来直接加载js文件
（2）$.getJson()
该方法用于加载JSON文件，与$.getScript()方法的用法相同。

$(function(){
	$('#box').click(function(){
		$.getJSON('test.json');
	});
});