原生JS封装Ajax（原理）

1.创建一个ajax对象
　　var oAjax=new XMLHttpRequest();
2.连接
　　oAjax.open(‘GET‘,‘a.txt‘+‘?‘+data,true);
　　oAjax.open(‘POST‘,url,true);
3.发送
　　oAjax.send();
　　oAjax.setRequestHeader(‘Content-Type‘,‘application/x-www-form-urlencoded‘);
　　oAjax.send(data);
4.接收
　　监听
　　oAjax.onreadysatechange
　　oAjax.readyState
　　0 － （未初始化）还没有调用send()方法
　　1 － （载入）已调用send()方法，正在发送请求
　　2 － （载入完成）send()方法执行完成，已经接收到全部响应内容
　　3 － （交互）正在解析响应内容
　　4 － （完成）响应内容解析完成，可以在客户端调用了
　　oAjax.status
　　200 成功
　　200-299 都算成功
　　304 未修改

时间： 2024-10-12 02:52:57

原生JS封装Ajax（原理）的相关文章

原生JS封装AJAX

今天我们来说说利用原生JS封装AJAX. jquery框架的AJAX方法确实很好用,但有时候我们写的页面需要引入多个JS插件,不一定哪个插件就会和jquery发生冲突,导致jquery用不了了.或者页面比较简单,不需要加重浏览器的负担,这时我们自己封装一个AJAX就是一个很好的办法. //将数据转换成 a=1&b=2格式;function json2url(json){   var arr = [];   //加随机数防止缓存;   json.t = Math.random();   for(v

原生JS封装Ajax插件(同域&&jsonp跨域)

抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正确的地方,还望指正^_^ 一.Ajax核心,创建XHR对象 Ajax技术的核心是XMLHttpRequest对象(简称XHR),IE5是第一款引入XHR对象的浏览器,而IE5中的XHR对象是通过MSXML库中的一个ActiveX对象实现的,因此在IE中可能有3个版本,即MSXML2.XMLHttp.

原生js封装ajax：传json，str，excel文件上传表单提交

由于项目中需要在提交ajax前设置header信息,jquery的ajax实现不了,我们自己封装几个常用的ajax方法. jQuery的ajax普通封装 var ajaxFn = function(uri, data, cb) { $.ajax({ url: uri, type: 'POST', dataType: 'json', data: data, }) .done(cb) .fail(function() { console.log("error"); }) .always(f

原生JS封装ajax方法

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 6 <title>Examples</title> 10 <script> 11 12 //将对象序列

原生JS封装ajax以及request

一.封装原生的xhr为ajax类 xhr以及用法见之前的文章 1.根据url确定请求的头部以及别的信息. var _headerConfig = {}; if(url.indexOf('getcaptcha') !== -1) { _headerConfig = { Accept: 'image/png', responseType: 'arraybuffer', } } else if(url.indexOf('files/upload') !== -1) { _headerConfig =

原生js封装ajax代码

1.ajax函数封装: 1 /* 2 *author: Ivan 3 *date: 2014.06.01 4 *参数说明: 5 *opts: {'可选参数'} 6 **method: 请求方式:GET/POST,默认值:'GET'; 7 **url: 发送请求的地址, 默认值: 当前页地址; 8 **data: string,json; 9 **async: 是否异步:true/false,默认值:true; 10 **cache: 是否缓存:true/false,默认值:true; 11 **

原生js封装ajax，实现跨域请求

描述: 需要ajax跨域请求,用cors跨域方案.服务端设置: header('Access-Control-Allow-Origin: http://front.ls-la.me'); header('Access-Control-Allow-Headers: X-Requested-With'); 设置了: 后端需要的头信息,原生ajax以表单方式post提交数据,json数据data转换成key1=val1&key2=val2 的字符串格式 1 var ajaxHdFn = functio

原生JS封装ajax函数

1 function ajax(params) { 2 params.data = params.data || ""; 3 params.type = params.type || "get"; 4 if(!params.url) { 5 throw new Error("未指定连接"); 6 } 7 params.async = params.async || true; 8 var xhr; 9 //兼容IE 10 if(window.VB

原生js封装ajax方法，包含jsonp和网络超时处理

function ajax(options) { options = options || {}; options.type = (options.type || "GET").toUpperCase(); options.dataType = options.dataType || 'json'; options.async = options.async || true; options.timeout=options.timeout||8000;//超时处理,默认8s var p