- AJAX常用参数
- AJAX对象兼容
- AJAX对象方法与属性
- AJAX封装兼容方法源码
AJAX全称Asynchronous JavaScript and XML(异步的JavaScript与XML),最初的AJAX传输的数据格式采用的是XML,所以这也就是AJAX名称的由来,后来由于技术的发展JSON更被接受,现在的AJAX传输数据格式改用的都是JSON格式。其实最初的浏览器并不支持AJAX技术,这些与需求安全技术等等因素相关,这里就不太深入的赘述,值得关注的是AJAX本身实质上就是HTTP网络访问协议通过浏览器内核暴露的接口,通过AJAX对象可以由用户主动通过调用对象的相关方法发起网络请求,浏览器并且会对发起的网络请求进行监听,实现AJAX响应机制。而且AJAX还可以主动添加HTTP报文头,实现多样的网络请求。
一、AJAX常用参数
1. HTTP请求方法(method):GET、HEAD、POST、PUT、TRACE、OPTIONS、DELETE和Web扩展方法[LOCK、MKCOL、COPY、MOVE]。这些方法不一定都能被正常使用,需要看具体的网络服务程序是否实现。常用的方法就是GET和POST。
2. HTTP请求URL: 请求资源的路径。
3. HTTP请求的主体部分:(data)通常描述的数据,由请求方发送给接受方的数据(我封装的方法中采用的是接收键值对(对象)形式的数据,内部处理成字符串拼接的处理方式)。
4. 浏览器采用异步或同步发送请求(flag/async):true表示异步,false表示同步。
5. 请求响应的回调方法:callback。由具体AJAX请求事件实现。
二、AJAX对象兼容
AJAX最先被应用到浏览器中的是微软实现的,所以在IE5和IE6中的AJAX对象是ActiveXObject,后来由W3C规范统一为XMLHttpRequest。下面是兼容代码:
var xhr = null ;
if(window.XMLHttpRequest) {
//创建除IE以外的ajax对象 --- code f for IE7+, Firefox, Chrome, Opera, Safari
xhr = new XMLHttpRequest() ;
}else{
//创建IE的ajax对象 --- code for IE6, IE5
xhr = new ActiveXObject("Microsoft.XMLHttp");
}
三、AJAX方法与属性
1. xhr.open(method,url,async);用来初始化请求对象的请求。
2. xhr.send(string);将请求发送给接受方,其参数只适应post方法的请求,传入的是请求报文的主体(数据)。其他请求方法将数据拼接在URL后面。
//GET请求方法
xhr.open('GET',url+'?'+data,flag);
xhr.send();
//POST请求方法
xhr.open(method,url,flag);
xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
xhr.send(data);
//data格式
"name='xiaoming'&sex='man'"
3. xhr.setRequestHeader(header,value);给HTTP请求报文添加头部字段,参数1:头部名称;参数2:头部的值。这里添加的传输主体(data)发送到服务器之前应该如何对数据进行编码。示例中的application/x-www-form-urlencoded编码类型的发送和接收,窗体数据被编码为名称/值对。还有application/json的发送和接收,表示窗体数据被编码为JSON字符串。multipart/form-data的发送和接收,表示窗体数据被编码为文件编码格式(适应文件、图片等传输)。HTTP头部还有其他很多属性,Content-type数据编码格式也还有其他的格式,就不在这里一一列举了。
4. xhr.onreadystatechange是AJAX请求响应监听事件,每当xhr.readyState的属性值发生改变时就会被触发一次。
5. xhr.readyState存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
- 0: 请求未初始化
- 1: 服务器连接已建立
- 2: 请求已接收
- 3: 请求处理中
- 4: 请求已完成,且响应已就绪
6. xhr.status表示HTTP响应的状态码。
- 200: (OK)表示请求成功,所请求的数据都在响应主体中。(200~299)
- 401: (Unauthorized)表示未授权,需要输入用户民和密码。
- 404: (Not Found)表示未找到执行的资源,也就是说请求的资源在服务器中没有找到。
- 300~399: 重定向,已定义的范围(300~305)。
- 400~499: 客户端错误,已定义的范围(400~415)。
- 500~599: 服务器出错,已定义的范围(500~505)。
7. xhr.responseText获取字符串形式的响应数据。
8. xhr.responseXML获取XML形式的响应数据。
四、AJAX兼容方法封装源码
function ajaxFunc(method,url,data,callback,flag){
//参数:method(提交请求方法):get、post;
// url(提交地址):服务器地址;
// data(提交数据):采用Object数据类型,当get请求模式时转换为字符串拼接形式,当post请求模式时转换为JSON数据格式;
// callback(处理服务器响应数据的方法);
// flag(异步还是同步提交):true(异步)、false(同步); //创建一个ajax对象
let xhr = null;
if(window.XMLHttpRequest){
// 创建除IE以外的ajax对象 -- code f for IE7+, FireFox, Chrome, Opera, Safari
xhr = new XMLHttpRequest();
}else{
// 创建兼容IE的ajax对象 -- code for IE6, IE5
xhr = new ActiveXObject("Microsoft.XMLHttp");
}
//将get、post转成大写
method = method.toUpperCase();
//发起ajax请求
if(method === 'GET'){
//将dta的JSON格式数据转换拼接成可直接提交的字符串形式
data = (function(data){
let httpText = "";
if(!data){
return null;
}
for(let temp in data){
httpText = httpText + (temp + '=' + data[temp] + '&');
}
return httpText;
})(data);
//发起GET方法的请求
xhr.open(method, url + '?' + data, flag);
xhr.send(null);
}else if(method === 'POST'){
//发起POST方法的请求
xhr.open(method, url, flag);
xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
xhr.send(JSON.stringify(data));
}
//监听物理信息
xhr.onreadystatechange = function(){
// 监听到readystate=4时
// 解析服务器返回的responseText数据
if(xhr["readyState"] === 4){
//判断响应状态是否为200--表示请求成功响应
if(xhr["status"] === 200){
callback(xhr["responseText"]);
}
}
}
}