javascript基础--ajax

引言

ajax是一项无重新加载异步刷新页面的一种方式，提高了工作效率。譬如：智能提示搜索，留言板，表单提示功能等。可以防止阻塞，异步地与服务器进行交互。接下来从0开始学习ajax。

1.javascript的ajax实现

javascript实现ajax的方式是通过一个XMLHttpRequest对象实现。代码结构为：

var xhr = null;
if(window.XMLHttpRequest){
    xhr = new XMLHttpRequest();
}else{
    xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
xhr.onreadystatechange = function(){
    //readystate状态有5种：        status状态：
    //0: 请求未初始化              200：ok
    //1: 服务器连接已建立           404：not found
    //2: 请求已接收
    //3: 请求处理中
    //4: 请求已完成，且响应已就绪
    if(xhr.readystate == 4 && xhr.status == 200){
        //返回数据存储在responseText或者reseponseXML
        //do something...
    }
}
xhr.open('get/post',url,true/false);

xhr.setRequestHeader("ContentType","application/x-www-form-urlencoded")
//只有当method设置为post时，才添加setRequesteHeader，且放置在open和send之间
//ContentType : multipart/form-data; application/x-www-form-urlencoded; text/plain三种值
xhr.send(string);

---

稍微解释一下ContentType三个值。在Form元素的语法中，EncType表明提交数据的格式 用 Enctype 属性指定将数据回发到服务器时浏览器使用的编码类型。

• application/x-www-form-urlencoded： 窗体数据被编码为名称/值对。这是标准的编码格式。
• multipart/form-data： 窗体数据被编码为一条消息，页上的每个控件对应消息中的一个部分
• text/plain： 窗体数据以纯文本形式进行编码，其中不含任何控件或格式字符

如果form表单域不存在file上传域，则使用默认的application/x-www-form-urlencode足够了；如果form表单域存在file上传域则需当指定ContentType为multipart/form-data

2.jQuery的ajax实现

jQuery实现ajax的方式实质上是对javascript的xhr对象的封装，使之兼容各主流浏览器，代码结构为：

$.ajax({
    type: 'GET/POST',
    url:发送请求的地址,受同源策略影响
    data: 是一个对象，连同请求发送到服务器的数据,{}
    dataType: 预期服务器返回的数据类型,如'json','jsonp','xml'
    success: function(data){},
    error: function(jqXHR){}
})

结束语

本文归纳了ajax的使用方式，属于最基本的使用阶段，要理解其中的原理，还得自己去深究