Explication détaillée des étapes de mise en œuvre de la fonction ajax encapsulée js

Cette fois, je vais vous apporter une explication détaillée des étapes pour implémenter la fonction ajax encapsulée en js. Quelles sont les précautions pour la fonction ajax encapsulée en js. jetez un oeil.

AJAX = JavaScript asynchrone et XML AJAX n'est pas un nouveau langage de programmation, mais une nouvelle façon d'utiliser les standards existants. C'est une synthèse de 7 technologies, qui comprend sept technologies (javascript xml xstl xhtml dom xmlhttprequest, css), ajax est une colle.

Aller directement au programme :

partie d'appel 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>

partie html :

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

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

Vérification du formulaire, vérification du nom d'utilisateur :

<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>

partie appelante 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>

partie php :

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

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Explication détaillée des étapes d'utilisation du plug-in de prévisualisation d'image Vue2x

Analyse du étapes pour utiliser Mockjs dans le projet vue-cli

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!