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 相关文章推荐
Node.js 条形码识别程序构建思路详解
Feb 14 Javascript
微信小程序实现图片预加载组件
Jan 18 Javascript
canvas绘制七巧板
Feb 03 Javascript
Node.js 使用命令行工具检查更新
Jun 08 Javascript
实现一个完整的Node.js RESTful API的示例
Sep 29 Javascript
vue bus全局事件中心简单Demo详解
Feb 26 Javascript
jQuery中可见性过滤器简单用法示例
Mar 31 jQuery
微信小程序实现多选功能
Nov 04 Javascript
实现Vue的markdown文档可以在线运行的方法示例
Dec 11 Javascript
详解Vue项目中实现锚点定位
Apr 24 Javascript
JS实现随机抽选获奖者
Nov 07 Javascript
如何修改Vue打包后文件的接口地址配置的方法
Apr 22 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 文件上传源码分析(RFC1867)
2009/10/30 PHP
Win下如何安装PHP的APC拓展
2013/08/07 PHP
php setcookie函数的参数说明及其用法
2014/04/20 PHP
1亿条数据如何分表100张到Mysql数据库中(PHP)
2015/07/29 PHP
PHP中递归的实现实例详解
2017/11/14 PHP
yii框架结合charjs统计上一年与当前年数据的方法示例
2020/04/04 PHP
js资料toString 方法
2007/03/13 Javascript
070823更新的一个[消息提示框]组件 兼容ie7
2007/08/29 Javascript
JS中怎样判断undefined(比较不错的方法)
2014/03/27 Javascript
nodejs 整合kindEditor实现图片上传
2015/02/03 NodeJs
node.js调用C++开发的模块实例
2015/07/03 Javascript
jquery实现的仿天猫侧导航tab切换效果
2015/08/24 Javascript
JS实现的网页背景闪电闪烁效果代码
2015/10/17 Javascript
AngularJS实现按钮提示与点击变色效果
2016/09/07 Javascript
JavaScript html5利用FileReader实现上传功能
2020/03/27 Javascript
React-Native实现ListView组件之上拉刷新实例(iOS和Android通用)
2017/07/11 Javascript
js案例之鼠标跟随jquery版(实例讲解)
2017/07/21 jQuery
Redux实现组合计数器的示例代码
2018/07/04 Javascript
微信小程序表单弹窗实例
2018/07/19 Javascript
vuex 多模块时 模块内部的mutation和action的调用方式
2020/07/24 Javascript
在Python中用has_key()方法查找键是否存在的教程
2015/05/21 Python
Python的string模块中的Template类字符串模板用法
2016/06/27 Python
Python编程之微信推送模板消息功能示例
2017/08/21 Python
PyQt5利用QPainter绘制各种图形的实例
2017/10/19 Python
Python中实现switch功能实例解析
2018/01/11 Python
python 操作hive pyhs2方式
2019/12/21 Python
TensorFlow2.0:张量的合并与分割实例
2020/01/19 Python
浅谈Python3多线程之间的执行顺序问题
2020/05/02 Python
深入浅析pycharm中 Make available to all projects的含义
2020/09/15 Python
网站性能延迟加载图像的五种技巧(小结)
2020/08/13 HTML / CSS
比利时网上药店: Drogisterij.net
2017/03/17 全球购物
KARATOV珠宝在线商店:俄罗斯珠宝品牌
2019/03/13 全球购物
写自荐信要注意什么
2013/12/26 职场文书
简单的大学生自我鉴定
2014/02/18 职场文书
公司承诺书怎么写
2014/05/24 职场文书
525心理健康活动总结
2015/05/08 职场文书