纯js封装的ajax功能函数与用法示例


Posted in Javascript onMay 14, 2018

本文实例讲述了纯js封装的ajax功能函数与用法。分享给大家供大家参考,具体如下:

AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)AJAX 不是新的编程语言,而是一种使用现有标准的新方法。是7种技术的综合,它包含了七个技术(javascript xml xstl xhtml dom xmlhttprequest , css),  ajax  是一个粘合剂。

直接上程序:

js调用部分:

<script src="ds.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
<span style="white-space:pre;"> </span>window.onload=function(){
    var oDs=document.getElementById('ds');
    var oText=document.getElementById('text');
    oDs.onclick=function(){
      //第一个参数:数据传输方式 get post
      //第二个参数:调用文件的路径
      //第三个参数:data
      //第四个参数:回调函数
      ajax('GET','aa.txt','',function(str){
        //此处是调用名字为aa的txt文件里所有的内容(str),所以data直接为''
        //如果需要插入特定参数,则data值为 data='&name='+oText.value;
        console.log(str);//名字为aa的txt文件里所有的内容
      });
    }
  }
</script>

html部分:

<input type="button" name="ds" id="ds" value="弹出" />
<input type="text" value="" id="text"/>

ajax封装部分:

function ajax(method, url, data, fnsuccess) {
  var xhr;
  //1.创建对象,兼容问题
  if(window.XMLHttpRequest) {
    //在高版本的浏览器 IE7+
    xhr = new XMLHttpRequest();
    //XMLHttpRequest用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
  } else {
    //IE5 IE6
    xhr = new ActiveXObject();
  }
  //2.发送请求
  //第一个参数:数据传输方式 get post
  //第二个参数:处理文件 xx.php xx.txt ,要数据:直接写路径就好;提交数据:在地址那里写数据(get方式)
  //第三个参数:同步或者异步方式,默认是异步true
  //open
  //get模式路径上同时加入需要传输的内容
  if(method == 'GET' && data) {
    url = url + '?' + data;
  }
  xhr.open(method, url, true);
  //send
  //send()如果是get方式,写null或者为空;
  //如果是post,参数那就直接写要传输的内容
  if(method == 'GET') {
    xhr.send(null);
  } else {
    //创建头文件信息
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.send(data);
  }
  //4.接受php传过来的数据,解析 dom操作
  xhr.onreadystatechange = function() {
    if(xhr.readyState == 4) {//响应过程状态信息,4代表发送完成,顺利返回信息
      if(xhr.status == 200) {//status:状态码,如果返回的信息是200
        fnsuccess && fnsuccess(xhr.responseText);
      } else {
        alert(xhr.status);//发生错误时,返回该状态码
      }
    }
  }
}

表单验证,用户名验证:

<form action="checkName.php" method="post">
  <!--span标签是用于提示,用户名重复,以及可以注册-->
  用户名:<input type="text" id="username" /><span id="inf"></span><br />
   密码:<input type="password" /><br />
  <input type="button" id="submit" value="提交" />
</form>

js调用部分:

<script src="ds.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
  window.onload = function() {
    var oUsername = document.getElementById('username');
    var oInf = document.getElementById('inf');
    oUsername.onkeyup = function() {
      var data='&name=' + oUsername.value;
      //路径连接的是php文件
      ajax('GET','/0322/test/checkName.php',data,function(str){
        oInf.innerHTML=str;
      });
    }
  }
</script>

php部分:

<?php
// echo 输出
// echo 'qwerrtty';
//3.获取ajax传来的信息,做处理,在返回给ajax:后台做或者后台协作。
//这里两句话很重要,第一讲话告诉浏览器返回的数据是xml格式
  header("Content-Type: text/xml;charset=utf-8");
  //告诉浏览器不要缓存数据
  header("Cache-Control: no-cache");
//返回xml txt json html
  $userName=$_GET['name'];
  if($userName=='admin'){//把内容拿到,进行判断
    echo '<result><mes>该用户名重复了</mes></result>';
  }else{
    echo '<result><mes>该用户名可以注册</mes></result>';
  }
?>

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

Javascript 相关文章推荐
解析JavaScript中instanceof对于不同的构造器或许都返回true
Dec 03 Javascript
jQuery简单实现banner图片切换
Jan 02 Javascript
JS获取随机数函数可自定义最小值最大值
May 08 Javascript
浅谈JavaScript实现面向对象中的类
Dec 09 Javascript
jQuery实现将页面上HTML标签换成另外标签的方法
Jun 09 Javascript
ANGULARJS中使用JQUERY分页控件
Sep 16 Javascript
深入理解jquery中的事件与动画
May 24 Javascript
jQuery针对input的class属性写了多个值情况下的选择方法
Jun 03 Javascript
javaScript 逻辑运算符使用技巧整理
May 03 Javascript
详解如何webpack使用DllPlugin
Sep 30 Javascript
vue滚动插件better-scroll使用详解
Oct 18 Javascript
json.stringify()与json.parse()的区别以及用处
Jan 25 Javascript
JS常见DOM节点操作示例【创建 ,插入,删除,复制,查找】
May 14 #Javascript
vue动态绑定组件子父组件多表单验证功能的实现代码
May 14 #Javascript
jQuery中元素选择器(element)简单用法示例
May 14 #jQuery
jQuery中的类名选择器(.class)用法简单示例
May 14 #jQuery
vue引入js数字小键盘的实现代码
May 14 #Javascript
vue移动端路由切换实例分析
May 14 #Javascript
对node.js中render和send的用法详解
May 14 #Javascript
You might like
PHP执行zip与rar解压缩方法实现代码
2010/12/05 PHP
php中CI操作多个数据库的代码
2012/07/05 PHP
如何使用PHP对网站验证码进行破解
2015/09/17 PHP
php投票系统之增加与删除投票(管理员篇)
2016/07/01 PHP
JQuery 选项卡效果(JS与HTML的分离)
2010/04/01 Javascript
JSON JQUERY模板实现说明
2010/07/03 Javascript
JS实现slide文字框缩放伸展效果代码
2015/11/05 Javascript
jquery特效 点击展示与隐藏全文
2015/12/09 Javascript
批量下载对路网图片并生成html的实现方法
2016/06/07 Javascript
JavaScript中动态向表格添加数据
2017/01/24 Javascript
js实现3D图片展示效果
2017/03/09 Javascript
Bootstrap警告(Alerts)的实现方法
2017/03/22 Javascript
Extjs 中的 Treepanel 实现菜单级联选中效果及实例代码
2017/08/22 Javascript
js 两个日期比较相差多少天的实例
2017/10/19 Javascript
node将geojson转shp返回给前端的实现方法
2019/05/29 Javascript
使用 Vue 实现一个虚拟列表的方法
2019/08/20 Javascript
解决小程序无法触发SESSION问题
2020/02/03 Javascript
微信小程序onShareTimeline()实现分享朋友圈
2021/01/07 Javascript
[01:10:49]Secret vs VGJ.S 2018国际邀请赛淘汰赛BO3 第二场 8.24
2018/08/25 DOTA
[00:14]护身甲盾
2019/03/06 DOTA
Python 装饰器深入理解
2017/03/16 Python
深入理解Python爬虫代理池服务
2018/02/28 Python
Python使用Slider组件实现调整曲线参数功能示例
2019/09/06 Python
keras打印loss对权重的导数方式
2020/06/10 Python
Pytorch mask-rcnn 实现细节分享
2020/06/24 Python
Selenium关闭INFO:CONSOLE提示的解决
2020/12/07 Python
Sneaker Studio罗马尼亚网站:购买运动鞋
2018/11/04 全球购物
最新茶叶店创业计划书
2014/01/14 职场文书
2014年中班元旦活动方案
2014/02/14 职场文书
无犯罪记录证明范本
2014/09/15 职场文书
大学优秀学生主要事迹材料
2015/11/04 职场文书
pycharm2021激活码使用教程(永久激活亲测可用)
2021/03/30 Python
Python基础之数据结构详解
2021/04/28 Python
CSS3中Animation实现简单的手指点击动画的示例
2021/07/15 HTML / CSS
html5实现点击弹出图片功能
2021/07/16 HTML / CSS
Spring Boot项目如何优雅实现Excel导入与导出功能
2022/06/10 Java/Android