JS实现Ajax的方法分析


Posted in Javascript onDecember 20, 2016

本文实例分析了JS实现Ajax的方法。分享给大家供大家参考,具体如下:

一、什么是Ajax

不刷新的情况下读取数据或提交数据

(最早出现ajax:谷歌地图,拖动一下出现一片新的视野)

应用:用户注册、在线聊天、微博

特性:只能从服务器上去读取数据(所以我们需要配置自己的服务器程序AMP)

二、使用Ajax

1.基础:请求并显示静态TXT文件

btn.onclick=function(){
  ajax('abc.txt',function(str){
    alert(str);
  });
}

①Ajax里面文件的编码要和页面的编码一致

②缓存、阻止缓存(好处大于缺点,所以不能什么时候都清缓存)
缓存能帮助我们加速网络访问,所谓缓存,就是服务器上这个文件,它只读一次,第二次就从你的硬盘里、缓存里直接去拿,而不是真的通过网络来请求

有时候我们需要阻止缓存(比如服务器上东西变化了,但客户端请求来的还是原来的东西),办法如下,加时间戳:

ajax('abc.txt?t='+new Date().getTime(),function(str){});
//new Date().getTime()为现在的毫秒数,用户绝对不可能在1毫秒内点两次,所以每次请求的t都不一样

2.动态数据:请求Js(或json)文件

Ajax从服务器上读取的所有东西都是以文本的形式(字符串)存在的,如何转换?

eval()计算字符串里的值

ajax('abc.txt',function(str){
    var arr=eval(str);
    alert(arr);
});

例子:分页

<ul id="list">
</ul>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
window.onload=function(){
  var oUl=getElementById("list");
  var aBtn=getElementsByTagName("a");
  var i;
  for(i=0;i<aBtn.length;i++){
    aBtn[i].index=i;
    aBtn[i].onclick=function(){
      ajax('page'+(this.index+1)+'.txt',function(str){
        var aData=eval(str);
        oUl.innerHTML='';
        for(i=0;i<aData.length:i++){
          var oLi=document.createElement("li");
          oLi.innerHTML='<strong>'+aData[i].user+'</strong><i>'+aData[i].pass+'</i>';
          oUl.appendChild(oLi);
        }
      });
    };
  }
};

三、Ajax原理

HTTP请求方法

1.GET--用于获取数据(如浏览贴子) 把数据放在URL(网址)里面来提交     安全性低、容量低、便于分享(将网址发给别人)

2.POST--用于上传数据(如用户注册) 把数据放在不是URL的地方     安全性一般、容量几乎无限、不便于分享

四、封装一个自己的Ajax函数

1.创建Ajax

2.连接服务器

3.发送请求

4.接收返回

function ajax(url,fnSucc,fnFaild){
  //1.创建
  var oAjax=null;
  if(window.XMLHttpRequest){ //对ie6来说,直接用XMLHttpRequest是不存在的会出错
    oAjax=new XMLHttpRequest(); //ie6以上
  }else{
    oAjax=new ActiveXObject("Microsoft.XMLHTTP"); //ie6
  }
  //2.连接服务器,open(方法,url,是否异步)
  oAjax.open('GET',url,true);
  //3.发送请求
  oAjax.send();
  //4.接收返回 OnReadyStateChange
  oAjax.onreadystatechange=function(){    //onreadystatechange事件
    if(oAjax.readyState==4){ //readyState属性:请求状态 4是完成(完成不代表成功)
      if(oAjax.status==200){ //status属性:请求结果 200代表成功
        fnSucc(oAjax.responseText); //responseText属性:服务器发回给我们的内容
      }
      else{
        if(fnFaild){
          fnFaild();
        }
      }
    }
  };
};

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
jquery validate.js表单验证的基本用法入门
May 13 Javascript
iphone safari不支持position fixed的解决方法
May 04 Javascript
jquery中文乱码的多种解决方法
Jun 21 Javascript
基于javascript 闭包基础分享
Jul 10 Javascript
jQuery事件的绑定、触发、及监听方法简单说明
May 10 Javascript
Node.js中路径处理模块path详解
Nov 14 Javascript
Mac系统下Webstorm快捷键整理大全
May 28 Javascript
vue的事件绑定与方法详解
Aug 16 Javascript
node.js博客项目开发手记
Mar 16 Javascript
关于vue-router的那些事儿
May 23 Javascript
微信小程序实现的点击按钮 弹出底部上拉菜单功能示例
Dec 20 Javascript
Vuex持久化插件(vuex-persistedstate)解决刷新数据消失的问题
Apr 16 Javascript
JS实现淡入淡出图片效果的方法分析
Dec 20 #Javascript
自学实现angularjs依赖注入
Dec 20 #Javascript
JS多物体实现缓冲运动效果示例
Dec 20 #Javascript
详解js中Number()、parseInt()和parseFloat()的区别
Dec 20 #Javascript
JavaScript 限制文本框不可输入英文单双引号的方法
Dec 20 #Javascript
用jQuery.ajaxSetup实现对请求和响应数据的过滤
Dec 20 #Javascript
NPM 安装cordova时警告:npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to
Dec 20 #Javascript
You might like
《PHP边学边教》(02.Apache+PHP环境配置――上篇)
2006/12/13 PHP
Laravel框架基于中间件实现禁止未登录用户访问页面功能示例
2019/01/17 PHP
PHP后台备份MySQL数据库的源码实例
2019/03/18 PHP
关于javascript中的typeof和instanceof介绍
2012/12/04 Javascript
根据经纬度计算地球上两点之间的距离js实现代码
2013/03/05 Javascript
解析使用js判断只能输入数字、字母等验证的方法(总结)
2013/05/14 Javascript
jQuery随机密码生成的方法
2015/03/09 Javascript
JavaScript更改字符串的大小写
2015/05/07 Javascript
九种原生js动画效果
2015/11/11 Javascript
jQuery实现textarea自动增长宽高的方法
2015/12/18 Javascript
详解springmvc 接收json对象的两种方式
2016/12/06 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图和饼图的组合图效果示例【附demo源码下载】
2017/03/09 Javascript
BootstrapValidator实现注册校验和登录错误提示效果
2017/03/10 Javascript
node中Express 动态设置端口的方法
2017/08/04 Javascript
响应式框架Bootstrap栅格系统的实例
2017/12/19 Javascript
vue2.0实现移动端的输入框实时检索更新列表功能
2018/05/08 Javascript
解决vue同一slot在组件中渲染多次的问题
2018/09/06 Javascript
详解如何构建一个Angular6的第三方npm包
2018/09/07 Javascript
解决vue动态为数据添加新属性遇到的问题
2018/09/18 Javascript
详解mpvue中小程序自定义导航组件开发指南
2019/02/11 Javascript
利用Webpack实现小程序多项目管理的方法
2019/02/25 Javascript
nodejs中实现用户注册路由功能
2019/05/20 NodeJs
[29:16]完美世界DOTA2联赛决赛日 Inki vs LBZS 第三场 11.08
2020/11/10 DOTA
Python制作动态字符图的实例
2019/01/27 Python
python如何建立全零数组
2020/07/19 Python
python boto和boto3操作bucket的示例
2020/10/30 Python
canvas如何实现多张图片编辑的图片编辑器
2020/03/10 HTML / CSS
医院护士的求职信范文
2013/12/26 职场文书
小学学校门卫岗位职责
2014/08/03 职场文书
工伤事故赔偿协议书范文
2014/09/24 职场文书
2019新员工心得体会
2019/06/25 职场文书
CSS实现漂亮的时钟动画效果的实例代码
2021/03/30 HTML / CSS
MySQL时间设置注意事项的深入总结
2021/05/06 MySQL
MySQL Router实现MySQL的读写分离的方法
2021/05/27 MySQL
原生Javascript+HTML5一步步实现拖拽排序
2021/06/12 Javascript
Spring boot实现上传文件到本地服务器
2022/08/14 Java/Android