ajax.post封装,Ajax方法封装

打算自己封装一个ajax方法，再不用jq库的情况下，直接引用：

ajax作用：数据交互，在不刷新页面的情况下，发送请求，获取数据；

首页第一步常见一个ajax对象：XMLHttpRequest,之后会用这个对象的属性和方法完成一个数据交互的过程；

1.open方法：

参数：打开方式(post和get)、地址、是否异步(异步：非阻塞，前面的代码不会影响后面代码的执行；同步：阻塞，前面的代码会影响后面代码的执行)

2、send方法

发送请求

3、onReadyStateChange事件：当状态值readystate改变的时候触发的事件

readystate:ajax工作状态：0代表还没有调用open方法；1代表已经调用send方法，正在发送请求；2代表发送请求已完成，已经收到相应内容；；3收到内容解析；4代表内容可在客户端调用

4、status服务器状态码

备注：post和get区别：get是通过url传输，post是通过浏览器传输，ajax封装代码如下

function ajax(method, url, data, success) {

var xhr = null;

try {

xhr = new XMLHttpRequest();

} catch (e) {

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

}

if (method == 'get' && data) {

url += '?' + data;

}

xhr.open(method,url,true);

if (method == 'get') {

xhr.send();

} else {

xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');

xhr.send(data);

}

xhr.onreadystatechange = function() {

if ( xhr.readyState == 4 ) {

if ( xhr.status == 200 ) {

success && success(xhr.responseText);

} else {

alert('出错了,Err：' + xhr.status);

}

}

}

}

【前端学习笔记04】JavaScript数据通信Ajax方法封装

//Ajax 方法封装 //设置数据格式 function setData(data){ if(!data){ return ''; } else{ var arr = []; for(k in da ...

基于jquery的ajax方法封装

在实际的项目里,ajax的应用频率很高,所以尽管jquery或者其他的一些类似的js库做了非常不错的封装,仍然有进一步封装简化的空间和必要 举一个例子,很久很久以前,我的ajax是这么写的: $.aj ...

原生ajax方法封装

/** * @function ajax request * @fields ajaxName:请求名称,method:请求方法,headers:setRequestHeader自定义部分,url:接 ...

AJAX原理解析与兼容方法封装

AJAX常用参数 AJAX对象兼容 AJAX对象方法与属性 AJAX封装兼容方法源码 AJAX全称Asynchronous JavaScript and XML(异步的JavaScript与XML), ...

原生JS封装ajax方法

http://blog.sucaijiayuan.com/article/89 jquery框架的ajax方法固然好用,但是假如某天我们的项目不能引入jquery或项目需求很简单,没有很多交互功能,只 ...

通用ajax请求方法封装，兼容主流浏览器

ajax简单介绍 没有AJAX会怎么样?普通的ASP.Net每次运行服务端方法的时候都要刷新当前页面. 假设没有AJAX,在youku看视频的过程中假设点击了"顶.踩".评论.评论 ...

类似jQuery的原生JS封装的ajax方法

一,前言: 前文,我们介绍了ajax的原理和核心内容,主要讲的是ajax从前端到后端的数据传递的整个过程. Ajax工作原理和原生JS的ajax封装 真正的核心就是这段代码: var xhr = ne ...

原生ajax与封装的ajax使用方法

当我们不会写后端接口来测试ajax时,我们可以使用node环境创建一个本地服务器. 1.创建一个本地服务器可参考http://www.cnblogs.com/heyujun-/p/6793900.ht ...

封装一个类似jquery的ajax方法

//封装一个类似jquery的ajax方法,当传入参数,就可以发送ajax请求 //参数格式如下{ // type:"get"/"post", // dataT ...

随机推荐

JavaScript内置对象之数组

一.JavaScript对象之数组 1.创建数组的方式 (1)使用Array构造函数 语法:new Array() 小括号()说明: -预先知道数组要保存的项目数量 -向Array构造函数中传递数组应 ...

RabbitMQ入门教程(转)

http://blog.csdn.net/column/details/rabbitmq-for-java.html http://blog.csdn.net/anzhsoft/article/det ...

Unicode与UTF8相互转化(使用MultiByteToWideChar)

1.简述 最近在发送网络请求时遇到了中文字符乱码的问题,在代码中调试字符正常,用抓包工具抓的包中文字符显示正常,就是发送到服务器就显示乱码了,那就要将客户端和服务器设置统一的编码(UTF-8),而我们 ...

php form表单post提交获取不到数据，而使用get提交能获取到数据 的解决办法

开发环境:xampp,mac,phpstorm 其实出现这个问题的原因就是在于phpstorm,它默认使用的是自带的内部服务器,这个服务器使用63342端口,而且服务器内部有问题,导致POST方法异常 ...

Homebrew安装和使用

## homebrew使用1. 安装 `$ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/m ...

告别 hash 路由，迎接 history 路由

博客地址:https://ainyi.com/69 三月来了,春天还会远吗.. 在这里,隆重宣布本博客告别 Vue 传统的 hash 路由,迎接好看而优雅的 history 路由~~ 映照官方说法 v ...

C#工具:MySQL忘记密码解决方法

1.进入管理员控制台停止mysql服务:net stop mysql; 2.进入mysql的安装路径,如我的安装路径为C:\Program Files\MySQL\MySQL Server 5.5,打 ...

ztree 为节点添加点击触发事件

vs2008内存泄露检測得到完美解决

版权声明:原创文章.转载请注明出处.本博新地址www.iaccepted.net https://blog.csdn.net/IAccepted/article/details/27646679 Vi ...

Jtester+unitils+testng：DAO单元测试文件模板自动生成

定位 本文适合于不愿意手工编写而想自动化生成DAO单元测试的筒鞋.成果是不能照搬的,但其中的"创建模板.填充内容.自动生成"思想是可以复用的.读完本文,可以了解 Python 读取 ...