ajax封装 php,ajax简单封装详细介绍

本文主要和大家分享ajax简单封装详细介绍，希望能版助到大家。

ajax一般分为简单的四部：创建ajax对象(这里兼容ie的话要做一下处理)

连接，即请求对象的open方法(get和post还有点不同，get参数要放在url后面，post要设置请求头)

发送，即请求对象的send函数(post参数则放在send里面)

接收，在onreadystatechange(存储函数或函数名，每当readyState属性改变时，就会调用该函数。)函数里面处理。

还可以加上超时这些

onreadystatechange分析要先判断readyState的状态(有四个状态)

①： 0，请求未初始化；

②： 1，服务器连接已建立；

③： 2，请求已接收；

④： 3，请求处理中；

⑤： 4，请求已完成，且响应已就绪

当readyState等于4时，你又要判断status的状态

请求成功时status状态 200-302 ，还有304(是缓存)'use strict';

var $ = {};

$.ajax = ajax;

function ajax(options) {

// 解析参数

options = options || {};

if (!options.url) return;

options.type = options.type || 'get';

options.timeout = options.timeout || 0;

// 1 创建ajax

if (window.XMLHttpRequest) {

// 高级浏览器和ie7以上

var xhr = new XMLHttpRequest();

} else {

//ie6,7,8

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

}

// 2 连接

var str = jsonToUrl(options.data);

if (options.type === 'get') {

xhr.open('get', `${options.url}?${str}`, true);

// 3 发送

xhr.send();

} else {

xhr.open('post', options.url, true);

// 请求头

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

// 3 发送

xhr.send();

}

// 接收

xhr.onreadystatechange = function() {

// 完成

if (xhr.readyState === 4) {

// 清除定时器

clearTimeout(timer);

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

// 成功

options.success && options.success(xhr.responseText);

} else {

options.error && options.error( xhr.status );

}

}

};

// 超时

if (options.timeout) {

var timer = setTimeout(function(){

alert("超时了");

xhr.abort(); // 终止

},options.timeout);

}

}

// json转url

function jsonToUrl(json) {

var arr = [];

json.t = Math.random();

for(var name in json) {

arr.push(name + '=' + encodeURIComponent(json[name]));

}

return arr.join('&');

}

相关推荐：