原生js实现Ajax
如果要用原生的JS实现Ajax怎么整呢，让我们一起来整一个试试。
方法：
/**
* 原生js封装ajax方法
* @param {Object} conf
* ajax({
type:"post",
url:"test.php",
data:"name=xx&pwd=xx",
dataType:"json",
success:function(data){
console.log(data);
}
});
*/
function _ajax(conf){
//创建xhr对象
var createAjax = function() {
var xhr = null;
try {
//IE系列浏览器
xhr = new ActiveXObject("microsoft.xmlhttp");
} catch (e1) {
try {
//非IE浏览器
xhr = new XMLHttpRequest();
} catch (e2) {
window.alert("您的浏览器不支持ajax，请更换！");
}
}
return xhr;
};
// 初始化
//type参数,可选
var type = conf.type;
//url参数，必填
var url = conf.url;
//data参数可选，只有在post请求时需要
var data = conf.data;
//datatype参数可选
var dataType = conf.dataType;
//回调函数可选
var success = conf.success;
if (type == null){
//type参数可选，默认为get
type = "get";
}
if (dataType == null){
//dataType参数可选，默认为text
dataType = "text";
}
// 创建ajax引擎对象
var xhr = createAjax();
// 打开
xhr.open(type, url, true);
// 发送
if (type == "GET" || type == "get") {
xhr.send(null);
} else if (type == "POST" || type == "post") {
xhr.setRequestHeader("content-type",
"application/x-www-form-urlencoded");
xhr.send(data);
}
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
if(dataType == "text"||dataType=="TEXT") {
if (success != null){
//普通文本
success(xhr.responseText);
}
}else if(dataType=="xml"||dataType=="XML") {
if (success != null){
//接收xml文档
success(xhr.responseXML);
}
}else if(dataType=="json"||dataType=="JSON") {
if (success != null){
//将json字符串转换为js对象
success(eval("("+xhr.responseText+")"));
}
}
}
};
}
详细说明：
1.Ajax步骤：1.创建，2.打开连接，发送数据，3.接收数据
1.1关于创建：
除了ie低版本，其它都支持XMLHttpRequest对象
1.2关于连接：
open(method,url,async)主要有三个参数，关于post和get方法需要注意，get方法参数是放URL上进行传输，post是单独作为send的参数传输到后台的，因此，如果用post方法我们必须设置请求头传的数据类型setRequestHeader('content-type',value),value可以是application/x-www-form-urlencoded,multipart/form-data等。
1.3关于接收数据：
当readyState变化时会调用onreadystatechange
readyState主要有五种状态：
| 值 | 状态 | 描述 |
| 0 | UNSENT (未打开) | open()方法还未被调用. |
| 1 | OPENED (未发送) |
open()方法已经被调用.
|
| 2 | HEADERS_RECEIVED (已获取响应头) | send()方法已经被调用, 响应头和响应状态已经返回. |
| 3 | LOADING (正在下载响应体) | 响应体下载中; responseText中已经获取了部分数据. |
| 4 | DONE (请求完成) | 整个请求过程已经完毕. |
response
响应实体的类型由 responseType 来指定， 可以是 ArrayBuffer， Blob， Document， JavaScript 对象 (即 "json")， 或者是字符串。如果请求未完成或失败，则该值为 null。
responseType
设置该值能够改变响应类型。就是告诉服务器你期望的响应格式。
| Value | Data type of response property |
| "" (空字符串) | 字符串(默认值) |
| "arraybuffer" | ArrayBuffer |
| "blob" | Blob |
| "document" | Document |
| "json" | JavaScript 对象，解析自服务器传递回来的JSON 字符串。 |
| "text" | 字符串 |
responseText
此次请求的响应为文本，或是当请求未成功或还未发送时为 null。只读。
responseXML
本次请求的响应是一个 Document 对象，如果是以下情况则值为 null：请求未成功，请求未发送，或响应无法被解析成 XML 或 HTML。当响应为text/xml 流时会被解析。当 responseType 设置为"document"，并且请求为异步的，则响应会被当做 text/html 流来解析。只读.
status
该请求的响应状态码 (例如, 状态码200 表示一个成功的请求).只读.
1开头的是information responses
2开头是响应成功
3重定向信息
4客户端错误信息
5服务器端响应错误
statusText
该请求的响应状态信息,包含一个状态码和原因短语 (例如 "200 OK"). 只读.
upload
可以在 upload 上添加一个事件监听来跟踪上传过程。
不考虑浏览器兼容性，当时在一个项目中，我发现在谷歌浏览器下，上传文件的时候，在谷歌浏览器的状态栏可以看到上传进度，我想谷歌应该有提供方法出来供开发调用，开启调试发现确实有。
代码如下：
进度条当时是easyui的。
xhr.onloadstart = $.message.progress({text:'{value}%',title:'文件上传',interval:false});
xhr.upload.onprogress = function(evt){
if(evt.lengthComputable){
var comVal = Math.round(evt.loaded * 100 / evt.total);
$("div.messager-p-bar").progressbar("setValue", comVal);
}
}
补充：
post和get主要差别
-
发送数据的方式：get是放URL上，post是单独作为请求体
-
安全性，post比get相对安全，因为get在URL上可见的
-
大小，get有限制，一般几kb，post受服务器端限制，一般可以几十兆
