精华内容
下载资源
问答
  • 原生js发送请求

    2018-10-12 09:23:00
    const loginForm = document.querySelector('#loginForm' ...form表单submit 自带发送请求事件 e.preventDefault(); 在事件中加入 可 阻止此事件 转载于:https://www.cnblogs.com/eunuch/p/9776298.html
    const loginForm = document.querySelector('#loginForm');
    const loginName = document.querySelector('#loginName');
    const loginPwd = document.querySelector('#loginPwd');
    
    loginForm.addEventListener('submit', function (e) {
            e.preventDefault();
            const name = loginName.value;
            const pwd = loginPwd.value;
            const xhr = new XMLHttpRequest();
    
            xhr.addEventListener('load', function () {
                const data = JSON.parse(xhr.responseText);
                if (data.code === 1) {
                    location.href = '/';
                }
                else {
                    alert(data.message);
                }
            });
    
            xhr.open('POST', '/mide/student/api/login');
            xhr.setRequestHeader('Content-Type', 'application/json');
            xhr.send(JSON.stringify({
                loginName: name,
                loginPwd: pwd
            }));
        })

    此为登录HTML请求

    form表单submit 自带发送请求事件

    e.preventDefault();

    在事件中加入   可 阻止此事件

    转载于:https://www.cnblogs.com/eunuch/p/9776298.html

    展开全文
  • 主要为大家详细介绍了原生JS发送异步数据请求的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 原生js发送ajax请求

    万次阅读 2018-08-22 15:09:14
    原生js发送ajax请求原理 1.什么是ajax AJAX的全称是Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。推荐文章:ajax是什么。 个人理解:ajax就是在不刷新网页的情况下和后台交互数据。 2. ...

    原生js发送ajax请求原理

    1.什么是ajax

    AJAX的全称是Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。推荐文章:ajax是什么

    个人理解:ajax就是在不刷新网页的情况下和后台交互数据。

    2. 常用的ajax类库

    我用的最多的是jquery。jQuery学习之jQuery Ajax用法详解

    3. 原生ajax的实现方式

    1. 创建XMLHttpRequest 对象
    // XMLHttpRequest对象用于在后台与服务器交换数据,
    //IE浏览器:new ActiveXObject("Microsoft.XMLHttp");
    //其他:new XMLHttpRequest();
    var xhr =  window.XMLHttpRequest 
            ? new XMLHttpRequest() 
            : new ActiveXObject("Microsoft.XMLHttp");

    所有现代浏览器 (IE7+、Firefox、Chrome、Safari 以及 Opera) 都内建了 XMLHttpRequest 对象。

    2.定义post/get请求
    拿到XMLHttpRequest之后,使用open()方法去请求链接

    open语法:open(method, url, async, username, password);
    method: 请求类型(GET | POST | HEAD)
    url: 请求主体,大多数浏览器实施了一个同源安全策略,并且要求这个 URL 与包含脚本的文本具有相同的主机名和端口。
    async: 是否发送异步请求( false | true )
    username,password: 参数是可选的,为 url 所需的授权提供认证资格。如果指定了,它们会覆盖 url 自己指定的任何资格。

        var Ajax = {
                get: function (url, fn) {
                    // XMLHttpRequest对象用于在后台与服务器交换数据
                    var xhr = new XMLHttpRequest();
                    //每当readyState改变时就会触发onreadystatechange函数
                    //0: 请求未初始化
                    //1: 服务器连接已建立
                    //2: 请求已接收
                    //3: 请求处理中
                    //4: 请求已完成,且响应已就绪
                    xhr.open('GET', url, true)
                    xhr.onreadystatechange = function () {
                        //readyStatus == 4说明请求已经完成
                        if(xhr.readyState == 4 && xhr.status ==200) {
                            //从服务器获得数据
                            fn.call(this, xhr.responseText);
                        }
                    };
                    //发送数据
                    xhr.send();
                },
                // datat应为'a=a1&b=b1'这种字符串格式,在jq里如果data为对象会自动将对象转成这种字符串格式
                post: function (url, data, fn) {
                    var xhr = new XMLHttpRequest();
                    xhr.open("POST", url, true);
                    // 添加http头,发送信息至服务器时内容编码类型
                    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
                    xhr.onreadystatechange = function() {
                        if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 304)) {
                            fn.call(this, xhr.responseText);
                        }
                    };
                    //发送数据
                    xhr.send(data);
                }
    
            }

    参考链接:
    原生JS发送ajax请求

    展开全文
  • 原生JS发送ajax请求

    2020-06-08 20:31:40
    2.原生JS实现方式 主要分为以下几步 其中请求方式分为两种,以下我们分开来写 get方式: (如果需要传参的话,在url后面做字符串的拼接,比如’url?key=value’); 1.实例化ajax对象 var xhr = new XMLHttpRequest(); ...

    1.ajax是什么?

    ajax是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。
    是一种能够与后端交互数据的技术。

    2.原生JS实现方式

    主要分为以下几步
    其中请求方式分为两种,以下我们分开来写

    get方式:
    (如果需要传参的话,在url后面做字符串的拼接,比如’url?key=value’);
    1.实例化ajax对象

    var xhr = new XMLHttpRequest();
    

    2.设置请求方式和请求地址

    xhr.open('get', 'url')
    

    3.发送请求

    xhr.send();
    

    4.注册回调函数

    xhr.onload = function () {
                    //请求成功,执行回调函数,执行响应体
                    console.log(xhr.responseText) //相应内容
                }
    

    get请求完整代码:

    //1.实例化ajax对象
                var xhr = new XMLHttpRequest();
                //2.设置请求方式和地址
                xhr.open('get', 'url') //如果要传参的话,在url后面拼接
                //3.发送请求
                xhr.send();
                //4.注册回调函数
                xhr.onload = function () {
                    //请求成功,执行回调函数,执行响应体
                    console.log(xhr.responseText) //相应内容
                }
    

    post方式 post方式与get不同的就是,需要设置请求头,以及请求参数写在send方法里

    1.实例化ajax对象

    var xhr = new XMLHttpRequest();
    

    2.设置请求方式和请求地址

    xhr.open('get', 'url')
    

    3.设置请求头

    xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded'); //固定语法
    

    4.发送请求

    xhr.send('请求参数');
    

    5.注册回调函数

    xhr.onload = function () {
                    //请求成功,执行回调函数,执行响应体
                    console.log(xhr.responseText) //相应内容
                }
    

    post请求完整代码

    //(1).实例化ajax对象
            var xhr = new XMLHttpRequest();
            //(2).设置请求方法和地址
            xhr.open('post', '接口url');
            //(3).设置请求头(post请求才需要设置)
            xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
            //(4).发送请求 : 参数格式  'key=value' 
            xhr.send('请求参数');
            //(5).注册回调函数
            xhr.onload = function () {
                console.log(xhr.responseText);
            };
    

    3.XMLHttpRequest 对象

    XMLHttpRequest对象是ajax的基础,XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。目前所有浏览器都支持XMLHttpRequest
    方法: 加粗为常用方法
    abort() 停止当前请求
    getAllResponseHeaders() 把HTTP请求的所有响应首部作为键值对返回
    open(“method”, “url”, async) 参数1:请求方法(get,post) 参数2:请求url地址 参数3:true异步/false同步 (ajax默认是异步请求true)

    send(content) 向服务器发送请求,post方式的话带参数进去
    setRequestHeader(“header”, “value”) 设置请求头 固定格式
    onreadystatechange 当状态值发生改变时触发
    readyState 查看状态值 0-实例对象被创建,但是没用调用open方法
    1-open()方法已经被调用
    2-send()方法已经被调用,并且头部(请求头成功发送,无错误)和状态已经可以获取
    3-请求的数据下载中
    4-下载操作完毕
    responseText 服务器的相应数据
    responseXML 服务器的响应,表示为XML.这个对象可解析为DOM对象
    status 服务器的状态码(500,404,200…)
    statusText HTTP 状态码的相应文本

    展开全文
  • 原生js发送Ajax请求

    2019-10-03 00:18:47
    一、通过onload注册事件 // 1. 创建一个 xhr 对象 var xhr = new XMLHttpRequest(); // 2. 设置请求的方式和路径...// 3. 发送请求 xhr.send(null); // 4. 注册事件 xhr.onload = function () { // 通过 x...

    一、通过onload注册事件

    // 1. 创建一个 xhr 对象
    var xhr = new XMLHttpRequest();
    // 2. 设置请求的方式和路径
    xhr.open('GET', '/time');
    // 3. 发送请求
    xhr.send(null);
    // 4. 注册事件
    xhr.onload = function () {
        // 通过 xhr 的 responseText 获取到响应的响应体
       console.log(this.responseText)
    }

      注意:如果是发送post方式的请求,需要在open和send中间设置请求头,send中添加要传递的参数(有格式要求:=连接属性和值;&连接不同的属性)。

    var xhr = new XMLHttpRequest()
    xhr.open('POST', '/query-post')
    // 设置 Content-Type 为 application/x-www-form-urlencoded,这行代码不用死记硬背,去复制即可
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
    // 需要提交到服务端的数据可以通过 send 方法的参数传递
    // 格式:name=zhangsan&age=18
    xhr.send('name=zhangsan&age=18')
    xhr.onload = function () {
        console.log(this.responseText)
    }

    二、通过onreadystatechange注册事件

      onload 是 HTML5 以后新增的方便获取响应的事件,过去获取浏览器返回内容的时候使用的是 onreadystatechange。

    var xhr = new XMLHttpRequest()
    // open 方法的第一个参数的作用就是设置请求的 method
    xhr.open('POST', '/query-post')
    // 设置 Content-Type 为 application/x-www-form-urlencoded,这行代码不用死记硬背,去复制即可
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
    // 需要提交到服务端的数据可以通过 send 方法的参数传递
    // 格式:name=zhangsan&age=18
    xhr.send('name=zhangsan&age=18')
    // 更改事件为onreadystatechange
    xhr.onreadystatechange = function () {
        if (this.readyState === 4) {
        // 后续逻辑......
      }
    } 

     

    转载于:https://www.cnblogs.com/belongs-to-qinghua/p/11353114.html

    展开全文
  • 原生JS发送AJAX请求

    2019-01-06 17:54:00
    2 发送请求 17 // * get/post 18 // var url='http://localhost/test.php'; 19 var url = ' ./test.php ' ; 20 xmlhttp.open( ' get ' ,url, true ); 21 xmlhttp.send(); 22 // 3 响应...
  • 一、JS原生Ajax Ajax=异步Javascript+XML; ajax是一种数据请求的方式,不需要刷新整个页面。...ajax请求过程:创建XMLHttpRequest对象、连接服务器、发送请求、接受相响应数据。 废话少说上代码! &...
  • 学习搭建完整框架,maven工程建好,测试前台页面请求到后台controller。使用原生js ajax

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 802
精华内容 320
关键字:

原生js发送请求