传统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)


阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页