ajax共有几部分,关于Ajax需要知道的部分

Ajax技术核心是XMLHttpRequest对象(简称XHR)

ajax的使用能够以异步的方式从服务器获取信息，意味着用户单击后，可以不必刷新页面也能取得新数据。

为保证浏览器对XHR的支持,使用以下方法

var xmlhttp;

if (window.XMLHttpRequest)

{

// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码

xmlhttp=new XMLHttpRequest();

}

else

{

// IE6, IE5 浏览器执行代码

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

}

总的来说，我们只是使用了xhr方法来实现向服务端发请求，获取返回数据，在实现页面上的局部刷新，更改数据。

这里我们主要研究下，如何用原生js封装一个类似jquery的ajax请求,具体的ajax细节方法，大家可以在网上查询，或者高程三上讲解的很详细

//toData方法是将data传入的数据取到并且拼接，为拼到URL上做准备

function toData(obj){

if (obj == null){

return obj;

}

var arr = [];

for (var i in obj){

var str = i+"="+obj[i];

arr.push(str);

}

return arr.join("&");

}

function ajax(opts){

//创建ajax对象，以及一系列需要的参数

var xhr = null,

abortTimeout = null,

empty = function(){},

ajax_url = "",

opts = {

type : ( opts.type && opts.type.toUpperCase() ) || "GET",

url : opts.url || "",

data : opts.data || "",

dataType : opts.dataType || "json",

success : opts.success || empty,

err :opts.error || empty,

timeout : opts.timeout || 30000 //默认超时时间: 30s

};

//判断浏览器是否有xhr

if (window.XMLHttpRequest){

xhr = new XMLHttpRequest();

}

else{

xhr = new ActiveXObject("Microsoft.XMLHTTP");

}

//处理传入的参数

opts.data = toData(opts.data);

//通过请求方式不同，来拼接URL

if(opts.type == "GET"){

if(opts.url.indexOf("?")>-1){

if(opts.data == ""){

ajax_url = opts.url;

}else{

ajax_url = opts.url + "&" +opts.data;

}

}else{

ajax_url = opts.url + "?" + opts.data;

}

xhr.open('GET',ajax_url,true);

xhr.send();

}else(opts.type == "POST") {

xhr.open('POST',opts.url,true);

//如果需要像html表单那样post数据，需要设置http头

xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");

xhr.send(opts.data);

}

//处理返回的数据

xhr.onreadystatechange = function(){

/*

** 每当readyState改变时，就会触发onreadystatechange事件

** readyState属性存储有XMLHttpRequest的状态信息

** 0 ：请求未初始化

** 1 ：服务器连接已建立

** 2 ：请求已接受

** 3 : 请求处理中

** 4 ：请求已完成，且相应就绪

*/

if(xhr.readyState == 4){

var res,

error;

xhr.onreadystatechange = empty;

clearTimeout(abortTimeout);

if((xhr.status >= 200 && xhr.status < 300) ||xhr.status ==304){

res = xhr.responseText;

try{

if(opts.type == "GET"){

if(opts.dataType == "json"){

res = JSON.parse(xhr.responseText);

}else if(opts.dataType == "script") {

eval(res);

}else if(opts.dataType == "xml"){

res = xhr.responseXML;

}

}

}catch(e) {

error = e;

}

if(error){

opts.error(error,'parsererror',xhr);

}else{

opts.success(res);

}

}else{

opts.error(xhr.statusText || 'unknown' ,'status:' +xhr.status,xhr);

}

}

};

if(opts.timeout > 0){

xhr.ontimeout = function(){

opts.error('Request.timeout','timeout',xhr);

}

}

return xhr;

}

module.exports = ajax;

下面我们将调用这个封装的ajax请求

ajax({

url : url,

dataType : 'json',

data : {

"param1" : "111",

"param2" : "222"

},

success: function(result){

console.log(result);

},

timeout: 30000,

error : function(error,type,xhr){

console.log("error" : error,"type:",type,"xhr:",xhr);

}

});