Home > Web Front-end > JS Tutorial > body text

How to use js to encapsulate ajax function and usage

php中世界最好的语言
Release: 2018-05-30 09:16:12
Original
1827 people have browsed it

This time I will show you how to use js to encapsulate the ajax function and usage. What are the precautions for using js to encapsulate the ajax function and usage. The following is a practical case, let's take a look.

AJAX = Asynchronous JavaScript and XML (Asynchronous JavaScript and XML) AJAX is not a new programming language, but a new way of using existing standards. It is a synthesis of 7 technologies, which includes seven technologies (javascript xml xstl xhtml dom xmlhttprequest , css), ajax is a glue.

Go directly to the program:

js calling part:

<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>
Copy after login

html part:

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

ajax encapsulation part:

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

Form verification, username verification:

<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>
Copy after login

js calling part:

<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>
Copy after login

php part:

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

I believe you have mastered the method after reading the case in this article, For more exciting content, please pay attention to other related articles on the php Chinese website!

Recommended reading

What are the commonly used mathematical functions in JS?

Detailed explanation of the use of common built-in functions in JS

The above is the detailed content of How to use js to encapsulate ajax function and usage. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template