传统Ajax和原生Ajax的用法

1.form数据的序列化：

FormData是什么呢？我们来看看Mozilla上的介绍。

XMLHttpRequest Level 2添加了一个新的接口 FormData.利用 FormData对象,我们可以通过JavaScript用一些键值对来模拟一系列表单控件,我们还可以使用XMLHttpRequest的 send()方法来异步的提交这个"表单".比起普通的ajax,使用 FormData的最大优点就是我们可以异步上传一个二进制文件.

所有主流浏览器的较新版本都已经支持这个对象了，比如Chrome 7+、Firefox 4+、IE 10+、Opera 12+、Safari 5+。

var formData = $('#form').serialize();        //会根据input里面的name，把数据序列化成字符串；eg：name=zhangsan
    或
var formData = $('#form').serializeArray();    //会根据input里面的name，把数据序列化成数组；eg：[object]
　　//注意：没有name会获取不到值

2.jQuery的ajax方法：

$.ajax({
			url : "test.do“,
			type : "POST", //GET
			async : true, //默认true(异步)，false(同步)
			data : {
				name : "zhangsan",
				age : 25
			},
			timeout : 5000, //超时时间
			dataType : "json", //返回的数据格式：json/xml/html/script/jsonp/text
			beforeSend : function(xhr) {
				console.log(xhr)
				console.log("发送前");
				console.log(xhr);
			},
			success : function(data, textStatus, jqXHR) {
				console.log(data);
				console.log(textStatus);
				console.log(jqXHR);
			},
			error : function(xhr, textStatus) {
				console.log("错误");
				console.log(xhr);
				console.log(textStatus);
			},
			complete : function() {
				console.log("结束");
			}
		})

3.原生的ajax方法：

//请求的5个阶段，对应readyState的值
		//0: 未初始化，send方法未调用；
		//1: 正在发送请求，send方法已调用；
		//2: 请求发送完毕，send方法执行完毕；
		//3: 正在解析响应内容；
		//4: 响应内容解析完毕；
		var data = 'name=zhangsan';
		var xhr = new XMLHttpRequest(); //创建一个ajax对象
		xhr.onreadystatechange = function(event) { //对ajax对象进行监听
			if (xhr.readyState == 4) { //4表示解析完毕
				if (xhr.status == 200) { //200为正常返回
					console.log(xhr)
				}
			}
		};
		xhr.open('POST', 'url', true); //建立连接，参数一：发送方式，二：请求地址，三：是否异步，true为异步
		xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); //可有可无
		xhr.send(data); //发送

4.传统Ajax提交form（注：只能传递一般的参数，上传文件的文件流是无法被序列化并传递的！）

$.ajax({  
     url : "rest/add.htm",  
     type : "POST",  
     data : $( '#postForm').serialize(),  
     success : function(data) {  
          $( '#serverResponse').html(data);  
     },  
     error : function(data) {  
          $( '#serverResponse').html(data.status + " : " + data.statusText + " : " + data.responseText);  
     }  
});

5.原生Ajax提交form（包含文件）

window.setTimeout(function() {
			var oData = new FormData($("#uploadForm")[0]);
			var oReq = new XMLHttpRequest();
			oReq.open("POST", "../../personPictyres/IMOS_list.do", false);
			oReq.onload = function(oEvent) {
				if (oReq.status == 200) {
					//TODO ...
				}
			};
			oReq.send(oData);
		}, 800)

传统Ajax和原生Ajax的用法

猜你喜欢