纯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 相关文章推荐
js中的escape及unescape函数的php实现代码
Sep 04 Javascript
js 数据类型转换总结笔记
Jan 17 Javascript
js分解url参数(面向对象-极简主义法应用)
Aug 09 Javascript
javascript 禁用IE工具栏,导航栏等等实现代码
Apr 01 Javascript
JavaScript比较两个对象是否相等的方法
Feb 06 Javascript
jQuery选择器源码解读(八):addCombinator函数
Mar 31 Javascript
js给selected添加options的方法
May 06 Javascript
文件上传,iframe跨域数据提交的实现
Nov 18 Javascript
ExtJs的Ext.Ajax.request实现waitMsg等待提示效果
Jun 14 Javascript
基于JS实现移动端左滑删除功能
Jul 28 Javascript
Vue 使用 Mint UI 实现左滑删除效果CellSwipe
Apr 27 Javascript
教你如何用node连接redis的示例代码
Jul 12 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
十大“创意”战术!
2020/03/04 星际争霸
PHP的FTP学习(四)
2006/10/09 PHP
一些使用频率比较高的php函数
2008/10/03 PHP
Yii实现MySQL多数据库和读写分离实例分析
2014/12/03 PHP
php中switch与ifelse的效率区别及适用情况分析
2015/02/12 PHP
php mongodb操作类 带几个简单的例子
2016/08/25 PHP
jQuery使用手册之 事件处理
2007/03/24 Javascript
jQuery事件 delegate()使用方法介绍
2012/10/30 Javascript
jQuery实现图片走马灯效果的原理分析
2016/01/16 Javascript
jquery判断对象是否为空并遍历对象的简单实例
2016/07/26 Javascript
require.js 加载 vue组件 r.js 合并压缩的实例
2016/10/14 Javascript
Vue.js系列之vue-router(上)(3)
2017/01/03 Javascript
js移动端事件基础及常用事件库详解
2017/08/15 Javascript
Vuejs在v-for中,利用index来对第一项添加class的方法
2018/03/03 Javascript
vue封装swiper代码实例解析
2019/10/08 Javascript
toString.call()通用的判断数据类型方法示例
2020/08/28 Javascript
python元组操作实例解析
2014/09/23 Python
Python读取ini文件、操作mysql、发送邮件实例
2015/01/01 Python
详解详解Python中writelines()方法的使用
2015/05/25 Python
python 利用栈和队列模拟递归的过程
2018/05/29 Python
数组保存为txt, npy, csv 文件, 数组遍历enumerate的方法
2018/07/09 Python
让你的Python代码实现类型提示功能
2019/11/19 Python
Python 定义只读属性的实现方式
2020/03/05 Python
Django静态资源部署404问题解决方案
2020/05/11 Python
python中return不返回值的问题解析
2020/07/22 Python
通过实例解析Python文件操作实现步骤
2020/09/21 Python
Python截图并保存的具体实例
2021/01/14 Python
尤妮佳moony海外旗舰店:日本殿堂级纸尿裤品牌
2018/02/23 全球购物
5个HTML5的常用本地存储方式详解与介绍
2021/03/27 HTML / CSS
公务员培训自我鉴定
2013/09/19 职场文书
快餐店的创业计划书范文
2014/01/29 职场文书
最美乡村医生事迹材料
2014/06/02 职场文书
团队拓展活动方案
2014/08/28 职场文书
预备党员期盼十八届四中全会召开思想汇报
2014/10/17 职场文书
水电工程师岗位职责
2015/02/13 职场文书
mybatis 获取更新记录的id
2022/05/20 Java/Android