纯js封装的ajax功能函数与用法示例-js教程-PHP中文网

这篇文章主要介绍了纯js封装的ajax功能函数与用法,结合实例形式分析了基于javascript封装的ajax功能函数定义及与php后台交互相关操作技巧,需要的朋友可以参考下

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

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

直接上程序：

js调用部分：

DeepL

DeepL是一款强大的在线AI翻译工具，可以翻译31种不同语言的文本，并可以处理PDF、Word、PowerPoint等文档文件

下载

html部分：

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);//发生错误时，返回该状态码
      }
    }
  }
}

表单验证，用户名验证：


  
  用户名：

   密码：

js调用部分：

php部分：

该用户名重复了';
  }else{
    echo '该用户名可以注册';
  }
?>