精华内容
下载资源
问答
  • 原生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进行异步数据... 发送请求(send) 接收响应数据(onreadystatechange)  不说话直接贴代码 /** * 通过JSON的方式请求 *
  • 另外,因为在浏览器调试界面发起的请求跟页面自身的 js 发起的请求是一样的,所以可以不用关心登录状态等上下文环境的问题。这在写爬虫的时候特别实用——抓到一个链接之后,直接在浏览器上进行验...

    使用场景

    检查接口可用性

    主要用于在没有引入 jQuery 等工具的页面上需要验证一些 api 能否调得通的时候,可以快速调出浏览器调试界面发请求。 这在判断是否存在跨域问题的场景下,特别好用。

    验证接口用于爬虫

    另外,因为在浏览器调试界面发起的请求跟页面自身的 js 发起的请求是一样的,所以可以不用关心登录状态等上下文环境的问题。这在写爬虫的时候特别实用——抓到一个链接之后,直接在浏览器上进行验证,先调用一下试试好不好用再说。

    减少依赖

    因为可以直接使用原生 js,因此无需添加 jQuery、axios 等第三方工具就可以发送 http 就请求,可以减少应用的体积。

    实现

    简易版

    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function(){
        if( xhr.readyState == 4){
             if( xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){
                 info.innerHTML = xhr.responseText;
              }
         }
    };
    
    // 每次需要发请求需要做两步:
    xhr.open("get", url, true);
    xhr.send(null);
    

    发送GET请求

    完整版:

    var http = {};
    http.quest = function (option, callback) {
      var url = option.url;
      var method = option.method;
      var data = option.data;
      var timeout = option.timeout || 0;
      var xhr = new XMLHttpRequest();
      (timeout > 0) && (xhr.timeout = timeout);
      xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
          if (xhr.status >= 200 && xhr.status < 400) {
            var result = xhr.responseText;
            try { result = JSON.parse(xhr.responseText); } catch (e) { }
            callback && callback(null, result);
          } else {
            callback && callback('status: ' + xhr.status);
          }
        }
      }.bind(this);
      xhr.open(method, url, true);
      if (typeof data === 'object') {
        try {
          data = JSON.stringify(data);
        } catch (e) { }
      }
      xhr.send(data);
      xhr.ontimeout = function () {
        callback && callback('timeout');
        console.log('%c连%c接%c超%c时', 'color:red', 'color:orange', 'color:purple', 'color:green');
      };
    };
    http.get = function (url, callback) {
      var option = url.url ? url : { url: url };
      option.method = 'get';
      this.quest(option, callback);
    };
    http.post = function (option, callback) {
      option.method = 'post';
      this.quest(option, callback);
    };
    
    //普通get请求
    http.get('http://www.baidu.com', function (err, result) {
    	// 这里对结果进行处理
    });
    
    //定义超时时间(单位毫秒)
    http.get({ url: 'http://www.baidu.com', timeout: 1000 }, function (err, result) {
    	// 这里对结果进行处理
    });
    
    //post请求
    http.post({ url: 'http://www.baidu.com', data: '123', timeout: 1000 }, function (err, result) {
    	// 这里对结果进行处理
    });
    

    参考链接:

    展开全文
  • 原生javascript实现ajax发送pos请求,这样可以脱离jquery框架,
  • 原生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发送GET、POST请求

    千次阅读 2019-11-19 23:11:08
    一、使用XMLHttpRequest 主要分三步: 第一步:创建需要的对象,这里主要用到的是...二、发送post请求并处理 var httpRequest = new XMLHttpRequest(); httpRequest.open("POST",url,true); httpRequ...

    一、使用XMLHttpRequest

    主要分三步:

    第一步:创建需要的对象,这里主要用到的是XMLHttpRequest,注意需要考虑早期的IE;

    第二步:连接和发送;

    第三步:接收;

    二、发送post请求并处理

      var httpRequest = new XMLHttpRequest();
        httpRequest.open("POST",url,true);
        httpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        httpRequest.send("keyword="+keyword+"&name="+name);
        httpRequest.onreadystatechange = ()=>{
            if(httpRequest.readyState == 4 && httpRequest.status == 200){
                var data = JSON.parse(httpRequest.responseText);
                console.log(data);
            }
        }    
    

    发送Get请求并处理

    var httpRequest = new XMLHttpRequest();//第一步:建立所需的对象
            httpRequest.open('GET', 'url', true);//第二步:打开连接  将请求参数写在url中  ps:"./Ptest.php?name=test&nameone=testone"
            httpRequest.send();//第三步:发送请求  将请求参数写在URL中
            /**
             * 获取数据后的处理程序
             */
            httpRequest.onreadystatechange = function () {
                if (httpRequest.readyState == 4 && httpRequest.status == 200) {
                    var json = httpRequest.responseText;//获取到json字符串,还需解析
                    console.log(json);
                }
            };
    
    展开全文
  • 下面小编就为大家带来一篇原生js 封装get ,post, delete 请求的实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 本文给大家分享一个自己写的基于原生JS写Ajax的请求函数功能,需要的朋友可以参考下
  • 下面小编就为大家分享一篇原生JS实现ajax与ajax的跨域请求实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 原生js发送ajax请求

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

    万次阅读 2018-06-12 16:42:45
    注意:POST请求不在URI后面追加查询字符串——请求数据放在请求主体中send()——请求主体发送前必须设置Content-Type请求头部;且请求主体中的中文、特殊标点必须使用encodeURIComponent()函数进行编码。 举例: ...
  • //步骤三:发送请求 ajax.send(); //步骤四:注册事件 onreadystatechange 状态改变就会调用 ajax.onreadystatechange = function () { if (ajax.readyState==4 &&ajax.status==200) { //步骤五 如果能够进到这个判断...
  • 方法一:原生js 其他更简单的方式基本上都是基于原生js衍生来的 /* open method (get post) url 纯净的地址 params 参数 */ function ajax(method,url,fn,params){ console.log("进入方法"); var xhr = new ...
  • 原生JS请求

    2019-02-09 02:05:42
    var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function () { if (xhr.readyState == 4 &amp;&amp; xhr.status == 200) { console.log(xhr.r...
  • html原生js请求

    2020-05-22 17:35:21
    原生js,ajax请求 demo POST请求 GET请求 <script type="text/javascript"> //post请求 document.querySelector(".postbtn").οnclick= function(){ var xmlhttp = new XMLHttpRequest();
  • 一、JS原生Ajax Ajax=异步Javascript+XML; ajax是一种数据请求的方式,不需要刷新整个页面。...ajax请求过程:创建XMLHttpRequest对象、连接服务器、发送请求、接受相响应数据。 废话少说上代码! &...
  • 原生js实现http请求

    万次阅读 2019-01-15 19:45:11
    有时页面用到请求,但又不想引入jquery,那不使用ajax情况下,可以直接使用原生js进行封装函数。原生的js通过XMLHttpRequest 对象进行的的。具体可查阅W3school的XMLHttpRequest 对象。 1、封装可供请求调用的...
  • 原生js ajax请求与跨域

    千次阅读 2018-08-27 22:19:37
    它是一种用于创建快速动态网页的技术,通过后台与服务器进行少量数据交换(请求后端数据),ajax可以使网页实现异步更新,即在不更新整个网页的情况下 进行部分网页更新 减少用户的等待时间,加快响应。 ...
  • 原生JS发送Ajax请求

    2021-04-23 23:00:14
    原生JS发送Ajax请求 ajax({ type: 'POST', url: 'http://10.110.120.123:2222', // data: param, contentType: 'application/json; charset=utf-8', data: JSON.stringify(param), dataType:'json', // ...
  • 主要介绍了Javascript原生ajax请求代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
  • 使用原生JS发送ajax异步请求

    千次阅读 2018-02-08 18:42:00
    Ajax: Asynchronous javaScript and xml (异步的JavaScript和xml技术)。当我们向服务器发起请求的时候,服务器不会像浏览器响应整个页面,而是只有局部刷新。它是一个异步请求请求: 同步请求:只有当一次请求...
  • 平常用 jQuery 的 Ajax 请求习惯了,忘记了原生 JS 发送请求的方式,复习一下 var url = "http://localhost:8080/login"; var httpRequest = new XMLHttpRequest(); httpRequest.open('POST', url, true); ...
  • JS原生ajax的实现创建一个node服务器(这里用了express框架)原生ajax实现知识点 JS原生ajax的实现 创建一个node服务器(这里用了express框架) // app.js // 引入express框架 const express = require('express');...
  • 1. [代码]原生JS实现ajax 发送post请求 <script> var oStr = ''; var postData = {}; var oAjax = null; //post提交的数据 postData = {"name1":"value1","name2":"value2"}; //这里需要将json数据转...
  • 原生JS中ajax的GET请求获得数据的输出 记录一下写前端时候遇到的问题 window.onload = function(){ var teacherID = null; var teacherName = "LiHua";//tname url = ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 43,136
精华内容 17,254
关键字:

原生js发送请求