打算自己封装一个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);
}
} }
}

  

Ajax方法封装的更多相关文章

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

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

  2. 基于jquery的ajax方法封装

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

  3. 原生ajax方法封装

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

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

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

  5. 原生JS封装ajax方法

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

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

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

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

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

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

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

  9. 封装一个类似jquery的ajax方法

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

随机推荐

  1. linux 持续构建(自动部署) 重启动tomcat或进程的脚本

    #!/bin/sh TOMCAT_PATH=`dirname "$0"` echo "TOMCAT_PATH is /usr/local/tomcat" PID ...

  2. 使用 ServiceStack.Text 序列化 json的实现代码【转】

    转自:http://www.jb51.net/article/38338.htm 今天发篇文章总结下自己使用 ServiceStack.Text 来序列化 json.它的速度比 Newtonsoft. ...

  3. Ubuntu16.04+Tensorlow+caffe+opencv3.1+theano部署

    1.首先安装Ubuntu16.04系统. 2.安装显卡驱动 在官网上下载最新的NVIDIA-Linux-x86_64-375.26.run驱动.然后 Ctrl+Alt+F1进入控制台,输入 sudo ...

  4. 一样的alert代码,样式不同

    function windowLoaded(e) { alert('dede3');} window.onload=windowloaded; 的结果如下 而window.addEventlisten ...

  5. Oracle定时计划快速使用

    Oracle定时计划快速使用 前言: SQL Server中有相关的定时计划,可以直接打开sql server 的任务管理器进行配置,可以方便.快速实现定时执行相应任务.相应的Oracle也有对应的定 ...

  6. cPage分页源码,分享给大家,可作参考

    cPage是asp.net分页控件,也可以叫做分页组件,更确切的应该叫做分页模块,也或者叫做分页通用代码. cPage,版本3.2,源码如下: using System; namespace cPag ...

  7. MyBatis学习(二)、SQL语句映射文件(1)resultMap

    二.SQL语句映射文件(1)resultMap SQL 映射XML 文件是所有sql语句放置的地方.需要定义一个workspace,一般定义为对应的接口类的路径.写好SQL语句映射文件后,需要在MyB ...

  8. 选盘秘籍:用户如何选择SSD/SATA/SAS?

    先学习下一些专业词汇 IDE (Integrated Drive Electronics) 电子集成驱动器 它的本意是指把"硬盘控制器"与"盘体"集成在一起的硬 ...

  9. js 控制 css3高级运动 keyframes

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. js api 实现钉钉免登

    js api 实现钉钉免登,用于从钉钉微应用跳转到企业内部的oa,erp等,我刚刚实施完了我公司的这个功能,钉钉用起来还不错. 1 js api 实现钉钉免登,页面配置. <title>利 ...