So verwenden Sie js, um Ajax-Funktionen und -Nutzung zu kapseln

Dieses Mal zeige ich Ihnen, wie Sie js zum Kapseln von Ajax-Funktionen verwenden und welche Vorsichtsmaßnahmen für die Verwendung von js zum Kapseln von Ajax-Funktionen gelten .

AJAX = Asynchrones JavaScript und XML AJAX ist keine neue Programmiersprache, sondern eine neue Art, bestehende Standards zu nutzen. Es handelt sich um eine Synthese von 7 Technologien, darunter sieben Technologien (Javascript xml xstl xhtml dom xmlhttprequest, css), Ajax ist ein Kleber.

Direkt zum Programm gehen:

JS-Aufrufteil:

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

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

Ajax-Kapselungsteil:

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

Formularüberprüfung, Benutzernamenüberprüfung:

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

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

<?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>';
  }
?>

Ich glaube, Sie haben die Methode nach dem Lesen gemeistert Fall in diesem Artikel. Weitere spannende Inhalte finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre

Welche sind die häufig verwendeten mathematischen Funktionen in JS?

Detaillierte Erläuterung der Verwendung gängiger integrierter Funktionen in JS

Das obige ist der detaillierte Inhalt vonSo verwenden Sie js, um Ajax-Funktionen und -Nutzung zu kapseln. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!