js get和post请求实现代码解析


Posted in Javascript onFebruary 06, 2020

这篇文章主要介绍了js get和post实现代码解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

1、get

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <title>Title</title>
  <script type="text/javascript">
    function checkusername() {
      // 1.获取ajax引擎
      var xhr = getXHR();

      // 2.调用open方法准备发送
      var url = 'checkUsername_ajax?username='+document.getElementById('username').value;
      console.log(url);
      xhr.open('get',url,true);

      // 3.发送请求
      xhr.send();

      // 4.指定回调函数
      xhr.onreadystatechange = function () {
        // readystate是4并且status是200
        if(xhr.readyState == 4 && xhr.status == 200){
          document.getElementById("msg").innerHTML = xhr.responseText;
        }
      };
    }
    
    function getXHR() {
      if(window.XMLHttpRequest)
      {
        return new window.XMLHttpRequest();
      } else {
        return new window.ActiveXObject("Microsoft.XMLHTTP");
      }
    }
  </script>
</head>
<body>
  <form action="" method="get">
    <input type="text" name="username" id="username" onblur="checkusername()"/><br/><div id="msg"></div>
    <input type="text" name="address"/><br/>
    <input type="submit" value="login"/><br/>
  </form>
</body>
</html>

2、post

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <title>Title</title>
  <script type="text/javascript">
    function checkusername() {
      // 1.获取ajax引擎
      var xhr = getXHR();

      // 2.调用open方法准备发送
      xhr.open('post','checkUsername_ajax',true);

      // 3.发送请求 (多个参数使用&符号连接)
      // xhr.send('username='+document.getElementById('username').value+'&address=nj');
      xhr.send('username='+document.getElementById('username').value);

      // 4.指定回调函数
      xhr.onreadystatechange = function () {
        // readystate是4并且status是200
        if(xhr.readyState == 4 && xhr.status == 200){
          document.getElementById("msg").innerHTML = xhr.responseText;
        }
      };
    }
    
    function getXHR() {
      if(window.XMLHttpRequest)
      {
        return new window.XMLHttpRequest();
      } else {
        return new window.ActiveXObject("Microsoft.XMLHTTP");
      }
    }
  </script>
</head>
<body>
  <form action="" method="get">
    <input type="text" name="username" id="username" onblur="checkusername()"/><br/><div id="msg"></div>
    <input type="text" name="address"/><br/>
    <input type="submit" value="login"/><br/>
  </form>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
推荐自用 Javascript 缩图函数 (onDOMLoaded)……
Oct 23 Javascript
Javascript和Ajax中文乱码吐血版解决方案
Dec 21 Javascript
JQuery Ajax通过Handler访问外部XML数据的代码
Jun 01 Javascript
javascript间隔定时器(延时定时器)学习 间隔调用和延时调用
Jan 13 Javascript
Egret引擎开发指南之创建项目
Sep 03 Javascript
JavaScript的设计模式经典之建造者模式
Feb 24 Javascript
jQuery插件formValidator实现表单验证
May 23 Javascript
JS设置随机出现2个数字的实例代码
Jul 19 Javascript
JS实现倒计时图文效果
Nov 17 Javascript
VUE实现移动端列表筛选功能
Aug 23 Javascript
json解析大全 双引号、键值对不在一起的情况
Dec 06 Javascript
vue 数字翻牌器动态加载数据
Apr 20 Vue.js
Windows下安装 node 的版本控制工具 nvm
Feb 06 #Javascript
Vue3项目打包后部署到服务器 请求不到后台接口解决方法
Feb 06 #Javascript
node.JS的crypto加密模块使用方法详解(MD5,AES,Hmac,Diffie-Hellman加密)
Feb 06 #Javascript
node.js开发辅助工具nodemon安装与配置详解
Feb 06 #Javascript
Vue表单控件数据绑定方法详解
Feb 05 #Javascript
Vue过渡效果之CSS过渡详解(结合transition,animation,animate.css)
Feb 05 #Javascript
vue 翻页组件vue-flip-page效果
Feb 05 #Javascript
You might like
利用static实现表格的颜色隔行显示
2006/10/09 PHP
PHP 第一节 php简介
2012/04/28 PHP
php递归实现无限分类的方法
2015/07/28 PHP
PHP中filter函数校验数据的方法详解
2015/07/31 PHP
PHP利用pdo_odbc实现连接数据库示例【基于ThinkPHP5.1搭建的项目】
2019/05/13 PHP
JXTree对象,读取外部xml文件数据,生成树的函数
2007/04/02 Javascript
juqery 学习之三 选择器 子元素与表单
2010/11/25 Javascript
基于javascipt-dom编程 table对象的使用
2013/04/22 Javascript
解析瀑布流布局:JS+绝对定位的实现
2013/05/08 Javascript
js 编码转换 gb2312 和 utf8 互转的2种方法
2013/08/07 Javascript
javascript根据像素点取位置示例
2014/01/27 Javascript
微信小程序 加载 app-service.js 错误解决方法
2016/10/12 Javascript
详解Vue方法与事件
2017/03/09 Javascript
Angular 4依赖注入学习教程之InjectToken的使用(八)
2017/06/04 Javascript
jQuery表单设置值的方法
2017/06/30 jQuery
最新Javascript程序员面试试题和解题方法
2017/11/23 Javascript
浅谈SpringMVC中post checkbox 多选框value的值(隐藏域方式)
2018/01/08 Javascript
微信小程序Page中data数据操作和函数调用方法
2019/05/08 Javascript
解决$store.getters调用不执行的问题
2019/11/08 Javascript
原生javascript中this几种常见用法总结
2020/02/24 Javascript
[01:19]2014DOTA2国际邀请赛 采访TITAN战队ohaiyo 能赢DK很幸运
2014/07/12 DOTA
python+tkinter编写电脑桌面放大镜程序实例代码
2018/01/16 Python
关于Python3 类方法、静态方法新解
2019/08/30 Python
python爬虫用mongodb的理由
2020/07/28 Python
乌克兰在线商店的价格比较:Price.ua
2019/07/26 全球购物
实习生个人的自我评价
2013/12/08 职场文书
建筑人员岗位职责
2013/12/25 职场文书
建筑个人求职信范文
2014/01/25 职场文书
管理部副部长岗位职责范文
2014/03/09 职场文书
安全责任书模板
2014/07/22 职场文书
我的未来不是梦演讲稿
2014/09/02 职场文书
2014年人事工作总结范文
2014/11/19 职场文书
承诺函范文
2015/01/21 职场文书
推普标语口号大全
2015/12/26 职场文书
导游词之重庆渣滓洞
2020/01/08 职场文书
HTML5页面音频自动播放的实现方式
2021/06/21 HTML / CSS