当前位置:   article > 正文

ajax封装 php,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('&');

}

相关推荐:

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/很楠不爱3/article/detail/148254
推荐阅读
相关标签
  

闽ICP备14008679号