使用原生js写ajax
- // 使用原生js 封装ajax
- // 兼容xhr对象
- function createXHR(){
- if(typeof XMLHttpRequest != "undefined"){ // 非IE6浏览器
- return new XMLHttpRequest();
- }else if(typeof ActiveXObject != "undefined"){ // IE6浏览器
- var version = [
- "MSXML2.XMLHttp.6.0",
- "MSXML2.XMLHttp.3.0",
- "MSXML2.XMLHttp",
- ];
- for(var i = 0; i < version.length; i++){
- try{
- return new ActiveXObject(version[i]);
- }catch(e){
- //跳过
- }
- }
- }else{
- throw new Error("您的系统或浏览器不支持XHR对象!");
- }
- }
- // 转义字符
- function params(data){
- var arr = [];
- for(var i in data){
- arr.push(encodeURIComponent(i) + "=" + encodeURIComponent(data[i]));
- }
- return arr.join("&");
- }
- // 封装ajax
- function ga_ajax(obj){
- var xhr = createXHR();
- obj.url = obj.url + "?rand=" + Math.random(); // 清除缓存
- obj.data = params(obj.data); // 转义字符串
- if(obj.method === "get"){ // 判断使用的是否是get方式发送
- obj.url += obj.url.indexOf("?") == "-1" ? "?" + obj.data : "&" + obj.data;
- }
- // 异步
- if(obj.async === true){
- // 异步的时候需要触发onreadystatechange事件
- xhr.onreadystatechange = function(){
- // 执行完成
- if(xhr.readyState == 4){
- callBack();
- }
- }
- }
- xhr.open(obj.method,obj.url,obj.async); // false是同步 true是异步 // "demo.php?rand="+Math.random()+"&name=ga&ga",
- if(obj.method === "post"){
- xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
- xhr.send(obj.data);
- }else{
- xhr.send(null);
- }
- // xhr.abort(); // 取消异步请求
- // 同步
- if(obj.async === false){
- callBack();
- }
- // 返回数据
- function callBack(){
- // 判断是否返回正确
- if(xhr.status == 200){
- obj.success(xhr.responseText);
- }else{
- obj.Error("获取数据失败,错误代号为:"+xhr.status+"错误信息为:"+xhr.statusText);
- }
- }
- }
- var html = document.getElementsByTagName("html")[0];
- html.onclick = function(){
- ga_ajax({
- "method" : "post",
- "url" : "dem0o.php",
- "data" : {
- "name" : "gaga",
- "age" : 10000000,
- "num" : "12346&598"
- },
- "success" : function(data){
- alert(data);
- },
- "Error" : function(text){
- alert(text);
- },
- "async" : false
- });
- }
使用原生js写ajax的更多相关文章
- 原生js写Ajax
//原生js写ajax就像打电话 //打电话分下面4步//1.拿出手机//2.拨号//3.说话//4.挺对方说话 //ajax也分下面4步//1.创建ajax对象//2.连接到服务器//3.发送请求( ...
- 原生JS写Ajax的请求函数
一.JS原生ajax ajax:一种请求数据的方式,不需要刷新整个页面:ajax的技术核心是 XMLHttpRequest 对象:ajax 请求过程:创建 XMLHttpRequest 对象.连接服务 ...
- 原生js写ajax请求(复习)
今天本地想测试一个接口,不想用框架想用js快速完成,突然发现,我居然忘了这个最基本的代码.好吧,只能复习一波. 在框架泛滥的今天,用惯$.ajax(),axios,superAgent等框架的你们,还 ...
- 用原生JavaScript写AJAX
//原生js写ajax就像打电话 //打电话分下面4步//1.拿出手机//2.拨号//3.说话//4.听对方说话 //ajax也分下面4步//1.创建ajax对象//2.连接到服务器//3.发送请求( ...
- 原生JS写的ajax函数
参照JQuery中的ajax功能,用原生JS写了一个ajax,功能相对JQuery要少很多,不过基本功能都有,包括JSONP. 调用的方式分为两种: 1. ajax(url, {}); 2. ajax ...
- 表单验证--通过原生js模仿ajax的异步交互
今天给大家带来个福利,我也是刚刚学习的很实用的一个东西,通过原生js模仿ajax的异步交互. 我的博客只是给那些新手看的大神勿喷,写的不好可留言,请指出. 因为当初自己学的时候一个问题不会找人问,知道 ...
- 原生js中用Ajax进行get传参
原生js中用Ajax进行get传参 案例: <!DOCTYPE html> <html> <head> <meta charset="UTF-8&q ...
- 原生JS封装ajax方法
http://blog.sucaijiayuan.com/article/89 jquery框架的ajax方法固然好用,但是假如某天我们的项目不能引入jquery或项目需求很简单,没有很多交互功能,只 ...
- 原生js实现ajax与jquery的ajax库,及json
这是一篇笔记博客, Ajax: 和服务器进行数据交换(异步) 用js实现复杂的原理:用于发送请求的对象在不同的浏览器中是不同的 同源策略:ajax发送请求的url地址与服务器地址必须是同一域名,协议, ...
随机推荐
- magento安装以及搬家的注意事项
如果你的空间可以用ssh的话,你可以在官网的wiki Moving Magento To Another Server 中看到较为详细的搬家过程. 无论你的服务器是linux系统还是windows系统 ...
- ButterKnife View 注入
/***************************************************************************************** * ButterK ...
- com.mysql.jdbc.exceptions.jdbc4.CommunicationsException: Communications link failure 数据库报错
-- 查询mysql 数据库链接空闲时间持有最大空闲时间,单位为秒 SHOW VARIABLES WHERE VAriable_name = 'interactive_timeout'; -- 会出现 ...
- PAT (Basic Level) Practise:1002. 写出这个数
[题目链接] 读入一个自然数n,计算其各位数字之和,用汉语拼音写出和的每一位数字. 输入格式:每个测试输入包含1个测试用例,即给出自然数n的值.这里保证n小于10100. 输出格式:在一行内输出n的各 ...
- 简单的将内容加入到drupal的主页面
首先要管理员用户 然后进入结构目录 进入菜单项 在main行 选择 列出list 选择添加链接 完善信息 保存即可 eg: http://peach.fafu.edu.cn/ 将papaya的jbro ...
- CMOS、BIOS
CMOS主要的功能为记录主板上面的主要参数,包括系统时间.CPU电压与频率.各项设备的I/O地址与IRQ等,由于这些数据的记录要花费电力,因此主板上面才有电池. BIOS为写入到主板上某一块闪存或EE ...
- centos 服务器操作
CENTOS下创建FTP登录用户 yum install vsftpd2.启动/重启/关闭vsftpd服务器[root@localhost ftp]# /sbin/service vsftpd re ...
- ZSDR017-客户订货价格和库存
*----------------------------------------------------------------------*ZSDR017-客户订货价格和库存*---------- ...
- 比较compareTo与equals及==的区别
1.compareTo: 附上:源码: public int compareTo(String anotherString) { int len1 = value.length; ...
- Win+R运行自定义程序应该这样玩
互联网是一个“生态圈”,Windows有自己的生态学,有些看似高效的“奇技淫巧”实则只是搞笑. 我很以前十分崇拜善用佳软的站长,对事不对人,有些弊端,只是我们不知道,但并不代表就没有. 有些“恍然大悟 ...