Ajax详解

ajax对象XMLHttpRequest的属性和方法

方法

• send();
• setRequestHeader("header","value");
• getResponseHeader("headerLabel");
• abort(); 停止或者放弃当前的异步请求
• getAllResponseHeaders(); 以字符串的形式返回完整的字符串信息
• open();
  参数:
  1,method:用于指定请求的类型 "GET"或者"POST"
  2,url:用于请求的地址,可相对可绝对
  3,asyncFlag:指定请求方式为同步还是异步,true为异步,false为同步

属性

• onreadystatechange 书用于指定状态改变时所触发的事件处理器
• readyState 用于获取请求的状态
  返回值 0: 未初始化; 1: 正在加载; 2:已加载; 3:交互中; 4:完成
• responseText 获取服务器的响应,表示为字符串
• responseXML 用于获取服务器的响应,表示为字符串
• status
  返回Http状态码——200:表示成功; 202:表示请求被接受,但尚未成功; 400:错误的请求; 404:文件未找到; 500:内部服务器错误
• statusText 返回Http状态码的文本信息

原生JavaScript编写ajax

//请求的5个阶段，对应readyState的值
//0: 未初始化，send方法未调用；
//1: 正在发送请求，send方法已调用；
//2: 请求发送完毕，send方法执行完毕；
//3: 正在解析响应内容；
//4: 响应内容解析完毕；

function ajaxDemo(){
  var data = 'name=yang';
    //创建一个ajax对象
    var xhr = new XMLHttpRequest(); 
    //对ajax对象进行监听
    xhr.onreadystatechange = function(event){
        //4表示解析完毕
        if(xhr.readyState == 4){
            //200为正常返回
            if(xhr.status == 200){
                console.log(xhr);
            }
        }
    };
    //建立连接，参数一：发送方式，二：请求地址，三：是否异步，true为异步
    xhr.open('POST','url',true); 
    //可有可无
    xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
    //发送 
    xhr.send(data); 
}

jQuery编写ajax

$.ajax({
    url:'/comm/test1.php',type:'POST',//POST,GET
    async:true,//或false,是否异步
    data:{
        name:'name',age:25
    },timeout:5000,//超时时间
    dataType:'json',//返回的数据格式：json/xml/html/script/jsonp/text
    beforeSend:function(xhr){
        console.log(xhr)
        console.log('发送前')
    },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('结束')
    }
})

jQuery序列化表单数据

//会根据input里面的name，把数据序列化成字符串；
$('#form').serialize();   
//会根据input里面的name，把数据序列化成数组；eg：[object]     
$('#form').serializeArray();    
//注意：没有name会获取不到值
//下面两种不是jQuery的方法
//json字符串转化为json对象
JSON.parse() 
//json对象转化为json字符串   
JSON.stringify()

自定义方法序列化

serializeObject = function(form) {
    var o = {};
    $.each(form.serializeArray(),function(index) {
        // 如果表单项的值非空，才进行序列化操作
        if (this['value'] != undefined && this['value'].length > 0) {
            if (o[this['name']]) {
                o[this['name']] = o[this['name']] + "," + this['value'];
            } else {
                o[this['name']] = this['value'];
            }
        }
    });
    return o;
};

jquery.form.js异步提交含文件表单

jquery.form.js

//不需要使用serialize方法序列化表单
//form enctype属性

$("#formID").ajaxSubmit({
	url:""
	type:""
	dataType:""
	success:function(){}
});

通过什么标志区分普通表单提交和混合类型表单提交

后台接收表单数据，通过什么区别request和MultipartHttpServletRequest

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!