Ajax的理解与应用

一：ajax的参数理解

1.url：发送请求的地址，字符类型“String”

2.type：发送请求的方式，一般是post和get。post请求发送数据量大，且安全；get请求发送的数据量小，相对不安全

3.timeout：设置请求响应时间，请求超时之后会在error中执行

4.async：默认为true（异步）。同步就是发送请求之后，等待服务器响应之后才进行下一步操作；异步就是发送请求之后，可以 继续下一步操作，体验较好。所以一般情况会是异步操作

5.cache：设置false将不会从浏览器中加载请求信息

6.data：发送到服务器的数据，然后js对象将其转换成json传到后台

7.dataType：预期服务返回的数据类型，包括xml，text，html，script和json。json最为常见

8.beforeSend：在请求执行之前进行的操作。例：防止数据的重复提交，在提交之前，将事件设为无效，执行完之后，设为有效

9.complete：请求无论成功还是失败，都会回调的函数

10.success：请求成功后的回调函数

11.error：请求失败后的回调函数

12.contentType，dataFilter,global,ifModified,jsonp,username,password,processData和scriptCharset可百度

二：ajax的案例

1.ajax提交一般的表单数据(表单序列化)

//方法一：
jQuery.ajax({  
    type:'post',  
    url:'请求方法地址',  
    cache:false, //默认不从浏览器中加载请求数据
    async:true,  //默认为异步
    data:$("#formId").serialize, //表单序列化 
    dataType:'json',  //一定是dataType，如果是datatype会导致返回出错  
    success:funtion(data){  
    },  
    error:function(data){  
    }  
}); 
//方法二
jQuery("#FormId").ajaxSubmit({  
    type:'post',  
    url:'请求方法地址',  
    cache:false, 
    async:true,  
    dataType:'json',   
    success:funtion(data){  
    },  
    error:function(data){  
    }  
});
//提交图片文件
//前端
<form id="FormId" action="$!{basePath}/o2o/merchant/doAddPerson.do" method="post"  enctype="multipart/form-data">
<div class="weui-cell ">
<div class="weui-uploader__input-box-back">
	<img style="width:260px;height:130px" id="BackPic" value="0" >
    <input id="uploaderInputBack" name="BackPic" class="weui-uploader__input sfz2" type="file" accept="image/*" multiple>
</div>
</div>
jQuery("#FormId").ajaxSubmit({  
    type:'post',  
    url:'请求方法地址',  
    cache:false, 
    async:true,  
    dataType:'json',   
    success:funtion(data){  
    },  
    error:function(data){  
    }  
});
//后台
MultipartFile BackPic = request.getFile("BackPic");
String BackPicPath = saveIDCardPic(BackPic);
public String saveIDCardPic(MultipartFile file) throws IOException{
	log.info("保存图片saveIDCardPic file={}.",new Object[]{file});
	long start = System.currentTimeMillis();
	String realFilename=file.getOriginalFilename();
    String fileExtension = realFilename.substring(realFilename.lastIndexOf("."));
    String filename=UUID.randomUUID().toString().replace("-", "")+fileExtension;
    File dirPath = new File(imgFilePath+"/merchant");  
    if (!dirPath.exists()) {  
        dirPath.mkdirs();  
    }  
    String sep = System.getProperty("file.separator");  
    File uploadedFile = new File(dirPath + sep  
            + filename);  
    FileCopyUtils.copy(file.getBytes(), uploadedFile);
    log.info("saveIDCardPic runtime={}.",new Object[]{System.currentTimeMillis()-start});
    return "/merchant/"+filename;
}

2.ajax的滚动加载，分页展示

var pageNo = 1;  
var pageSize= 10;  
var requestFlag = true;//这里总共有三个变量：就是页码数，一页展示的数量，和是否继续加载  
$(function(){   
    scrollLoad();//最开始进入页面进入此方法  
    $(window).bind("scroll",function(){  
        //滚动加载  
        if ($(document).scrollTop() + $(window).height() > $(document).height()-10&&requestFlag = true) {  
        	requestFlag = false;//防止多次调用
            pageNo = pageNo+1;  
            scrollLoad(); 
        }  
    });  
}); 
function scrollLoad(){
	jQuery.ajax({
		type:'post',
		url:basePath+'/msgboard/scrollLoad.do?actId='+actId,
		data:{
			pageNo:pageNo,
			pageSize:pageSize
		},
		async:false,
		dataType:'json',
		success:function(data){
			//返回数据
			jQuery("#scroll").append(html);
			requestFlag = true;
		},
		error:function(data){},
	
	});
}