首页 > 系统相关> 文章详细

ajax与 axios的基础讲解（附代码及接口）

2022-11-10 13:14:33 阅读：392 来源： 互联网

标签：Ajax 章节 form 浏览器 JavaScript

一、Ajax

注意事项：本Ajax中的代码片段发起的请求都是自己本地文件夹中的app.js接口，我会在Ajax 章节的最后附上源文件。

Ajax 全称（Asynchronous JavaScript and XML）是用于在发送请求的时候无刷新发送请求，也就是说用JavaScript执行异步的请求

如果仔细观察一个Form的提交，你就会发现，一旦用户点击“Submit”按钮，表单开始提交，浏览器就会刷新页面，然后在新页面里告诉你操作是成功了还是失败了。如果不幸由于网络太慢或者其他原因，就会得到一个404页面。

这就是Web的运作原理：一次HTTP请求对应一个页面。

如果要让用户留在当前页面中，同时发出新的HTTP请求，就必须用JavaScript发送这个新请求，接收到数据后，再用JavaScript更新页面，这样一来，用户就感觉自己仍然停留在当前页面，但是数据却可以不断地更新。

1.1 ajax入门

<script type="text/javascript">
    //1、创建Ajax对象
  var xhr = new XMLHttpRequest()
    //2、告诉Ajax对象要向哪里发送请求，以什么方式发送请求
    //01、请求方式 02请求地址
    // 向接口使用get请求方式  请求地址为localhost:4000/frist 
    //这里的get 是有接口后端 定义的
    xhr.open(get,http://localhost:4000/frist);
    //3、发送请求
    xhr.send();
    //4、获取服务器端响应到客户端的数据
    xhr.onload = function(){
          
   
    //打印服务器端返回来的数据 就是Hello ajax
        console.log(xhr.responseText)
    }
    </script>

接口

// 对应01html文件
//接收到客户端的请求 
app.get(/frist,(req,res) =>{
          
   
// 并返回一个Hello ajax
	res.send(Hello ajax);
})

可以看到我这个是启动了服务器 http://localhost:4000/01.入门.html 访问的这个文件，切记！！！不能直接打开HTML文件

1.2 处理服务器端返回的JSON数据

<script type="text/javascript">
    //1、创建Ajax对象
  var xhr = new XMLHttpRequest()
    //2、告诉Ajax对象要向哪里发送请求，以什么方式发送请求
    //01、请求方式 02请求地址
    xhr.open(get,http://localhost:4000/responseDate);
    //3、发送请求
    xhr.send();
    //4、获取服务器端响应到客户端的数据
    xhr.onload = function(){
          
   
    //将json字符串转换为JSON对象
       var responseText = JSON.parse(xhr.responseText)
        console.log(responseText)

		//将获取到数据 进行标签的拼接
	<!-----------一般不会使用这种拼接 仅供演示看---------------->
        var str = <h2>+responseText.name+</h2>
     
     //  获取DOM元素 将拼接的str  显示到页面上
    document.body.innerHTML = str;
    }
    </script>

接口：

app.get(/responseDate,(req,res) =>{
          
   
	res.send({
          
   "name":"xiaohu同学"});
})

1.3 传递get 请求参数

<p>
        <input type="text" id="username">
    </p>
    <p>
        <input type="text" id="age">
    </p>
    <p>
        <input type="button" value="提交" id="btn">
    </p>
    <script type="text/javascript">
    //获取按钮元素
    var btn = document.getElementById(btn);
    //获取姓名文本框
    var username = document.getElementById(username);
    //获取年龄文本框
    var age = document.getElementById(age);
    
    //为按钮添加点击事件
    //点击后 发生Ajax 请求
    btn.onclick = function(){
            
     
        //创建ajax对象
        var xhr = new XMLHttpRequest();

        //获取用户在文本框中输入的值
        var nameValue = username.value;
        var ageValue = age.value;
       
        //拼接请求参数

        var params = username=+nameValue +&age=+ageValue;

        //配置ajax对象
        xhr.open(get,http://localhost:4000/get?+params);

        //发送请求
        xhr.send();
        //获取服务器端响应的数据
        xhr.onload = function () {
            
     
            console.log(xhr.responseText)
        }
    }
    </script>

接口：

app.get(/get,(req,res) =>{
          
   
	//使用req.query来接收客户端传递到服务器端的get请求参数
	//并使用req.send来响应给客户端
	res.send(req.query);
})

1.4 传递post请求参数

<p>
        <input type="text" id="username">
    </p>
    <p>
        <input type="text" id="age">
    </p>
    <p>
        <input type="button" value="提交" id="btn">
    </p>

    <script type="text/javascript">
    //获取按钮元素
    var btn = document.getElementById(btn);
    //获取姓名文本框
    var username = document.getElementById(username);
    //获取年龄文本框
    var age = document.getElementById(age);
    //为按钮添加点击事件
    btn.onclick = function(){
            
     
        //创建ajax对象
        var xhr = new XMLHttpRequest();
        //获取用户在文本框中输入的值
        var nameValue = username.value;
        var ageValue = age.value;   
        //拼接请求参数
        var params = username=+ nameValue +&age=+ageValue;
        //配置ajax对象
        xhr.open(post,http://localhost:4000/post);
        //设置请求参数的格式的类型（post请求必须要设置）
        xhr.setRequestHeader(Content-Type,application/x-www-form-urlencoded);
        //发送请求
        xhr.send(params);
        //获取服务器端响应的数据
        xhr.onload = function () {
            
     
            console.log(xhr.responseText)
        }
    }
    </script>

1.5 传递Json请求参数

<script type="text/javascript">
    //1、创建Ajax对象
  var xhr = new XMLHttpRequest()
    //2、告诉Ajax对象要向哪里发送请求，以什么方式发送请求
    //01、请求方式 02请求地址
    xhr.open(post,http://localhost:4000/json);

    //同请求头告诉服务器端客户端向服务器端传递的请求参数的格式是什么
    xhr.setRequestHeader(Content-Type,application/json)
    //要转换为JSON字符串的格式进行传递
    //JSON.stringify() 将json对象转换为json字符串
    //3、发送请求
    xhr.send(JSON.stringify({
          
   name:lisi,age:18}));
    //4、获取服务器端响应到客户端的数据
    xhr.onload = function(){
          
   
        console.log(xhr.responseText)
    }
    </script>

接口：

app.post(/json, (req, res) => {
          
   
  res.send(req.body)
})

1.6 根据状态码来获取服务器响应数据

<script type="text/javascript">
    //1、创建Ajax对象
    var xhr = new XMLHttpRequest()
    //0 状态码为0 已经创建了对象，但是没有对ajax对象进行配置
    console.log(xhr.readyState);//当前打印为0
    //1 已经对ajax对象配置，但是还没有发送请求
    xhr.open(get,http://localhost:4000/readystate);
    console.log(xhr.readyState);//当前打印为1
    xhr.onreadystatechange = function () {
          
   
      //2 请求已经送到
      //3 已经接收到服务器端
      //4 服务器端的响应数据已经接收完成  
      console.log(xhr.readyState)//打印结果为2,3，4
      //对ajax状态码进行判断
      //如果状态码的值为4就代表数据已经接收完成了
      if (xhr.readyState == 4) {
          
   
      //等于4  就接收服务器返回过来的 hello
        console.log(xhr.responseText);
      }
    }
    xhr.send();
  </script>

接口

app.get(/readystate, (req, res) => {
          
   
  res.send(hello)

标签：Ajax,章节,form,浏览器,JavaScript
来源：

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9