zoukankan      html  css  js  c++  java
  • 原生js的ajax请求

    原生js的ajax请求

    ajax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换、是网页实现异步更新(在不重新加载整个网页的情况下,对网页的某部分进行更新)

    XMLHttpRequest对象是ajax的基础,用于在后台与服务器交换数据。这意味着可以再不重新加载整个网页的情况下,对网页的某部分进行更新。

    eq:

    get请求:

    //步骤一:创建异步对象
    var ajax = new XMLHttpRequest();
    //步骤二:设置请求的url参数,参数一是请求的类型,参数二是请求的url,可以带参数,动态的传递参数starName到服务端
    ajax.open('get','getStar.php?starName='+name);
    //步骤三:发送请求
    ajax.send();
    //步骤四:注册事件 onreadystatechange 状态改变就会调用
    ajax.onreadystatechange = function () {   if (ajax.readyState==4 &&ajax.status==200) {
        //步骤五 如果能够进到这个判断 说明 数据 完美的回来了,并且请求的页面是存在的    console.log(ajax.responseText);//输入相应的内容    }
    }

    post请求:

    //创建异步对象  
    var xhr = new XMLHttpRequest();
    //设置请求的类型及url
    //post请求一定要添加请求头才行不然会报错
    xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
     xhr.open('post', '02.post.php' );
    //发送请求
    xhr.send('name=fox&age=18');
    xhr.onreadystatechange = function () {
        // 这步为判断服务器是否正确响应
      if (xhr.readyState == 4 && xhr.status == 200) {
        console.log(xhr.responseText);
      } 
    };

    为了方便可以把其封装成函数在用的时候直接调用

    function ajax_method(url,data,method,success) {
        // 异步对象
        var ajax = new XMLHttpRequest();
    
        // get 跟post  需要分别写不同的代码
        if (method=='get') {
            // get请求
            if (data) {
                // 如果有值
                url+='?';
                url+=data;
            }else{
    
            }
            // 设置 方法 以及 url
            ajax.open(method,url);
    
            // send即可
            ajax.send();
        }else{
            // post请求
            // post请求 url 是不需要改变
            ajax.open(method,url);
    
            // 需要设置请求报文
            ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    
            // 判断data send发送数据
            if (data) {
                // 如果有值 从send发送
                ajax.send(data);
            }else{
                // 木有值 直接发送即可
                ajax.send();
            }
        }
    
        // 注册事件
        ajax.onreadystatechange = function () {
            // 在事件中 获取数据 并修改界面显示
            if (ajax.readyState==4&&ajax.status==200) {
                // console.log(ajax.responseText);
    
                // 将 数据 让 外面可以使用
                // return ajax.responseText;
    
                // 当 onreadystatechange 调用时 说明 数据回来了
                // ajax.responseText;
    
                // 如果说 外面可以传入一个 function 作为参数 success
                success(ajax.responseText);
            }
        }
    
    }
  • 相关阅读:
    Vue父子组件传值之——访问根组件$root、$parent、$children和$refs
    js判断是否为ie浏览器,精确显示各个ie版本
    在JS/jQuery中,怎么触发input的keypress/keydown/keyup事件?
    HTML中a标签自动识别电话、邮箱
    如何彻底删除Mac磁盘中的文件
    使用Understand for Mac编写您的第一个API脚本
    如何将MacOS Catalina降级为Mojave
    macOS Catalina 10.15.1 发布 全新 Emoji、支持 AirPods Pro
    WingIDE Pro 7如何新建项目
    忘记MacBook密码的解决技巧!
  • 原文地址:https://www.cnblogs.com/ilylmy/p/13684676.html
Copyright © 2011-2022 走看看