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 相关文章推荐
解决FLASH需要点击激活的代码
Dec 20 Javascript
javascript  Error 对象 错误处理
May 18 Javascript
DOM 中的事件处理介绍
Jan 18 Javascript
使图片旋转的3种解决方案
Nov 21 Javascript
jquery弹出层类代码分享
Dec 27 Javascript
JavaScript制作简易的微信打飞机
Mar 31 Javascript
JS中的eval 为什么加括号
Apr 13 Javascript
jquery简单插件制作(fn.extend)完整实例
May 24 Javascript
Bootstrap菜单按钮及导航实例解析
Sep 09 Javascript
开发Node CLI构建微信小程序脚手架的示例
Mar 27 Javascript
Webpack的Loader和Plugin的区别
Nov 09 Javascript
浅谈JS的原型和原型链
Jun 04 Javascript
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
PHP中round()函数对浮点数进行四舍五入的方法
2014/11/19 PHP
php面象对象数据库操作类实例
2014/12/02 PHP
PHP实现清除wordpress里恶意代码
2015/10/21 PHP
php实现文件预览功能
2017/05/23 PHP
php+laravel依赖注入知识点总结
2019/11/04 PHP
JQuery Tips(4) 一些关于提高JQuery性能的Tips
2009/12/19 Javascript
打造个性化的功能强大的Jquery虚拟键盘(VirtualKeyboard)
2014/10/11 Javascript
AspNet中使用JQuery boxy插件的确认框
2015/05/20 Javascript
JavaScript返回上一页的三种方法及区别介绍
2015/07/04 Javascript
Vue.JS入门教程之列表渲染
2016/12/01 Javascript
JavaScript实现图片本地预览功能【不用上传至服务器】
2017/09/20 Javascript
弱类型语言javascript开发中的一些坑实例小结【变量、函数、数组、对象、作用域等】
2019/08/07 Javascript
原生javascript自定义input[type=radio]效果示例
2019/08/27 Javascript
解决iView Table组件宽度只变大不变小的问题
2020/11/13 Javascript
python中的__init__ 、__new__、__call__小结
2014/04/25 Python
Python入门篇之数字
2014/10/20 Python
Python爬虫框架Scrapy实战之批量抓取招聘信息
2015/08/07 Python
利用scrapy将爬到的数据保存到mysql(防止重复)
2018/03/31 Python
python实现内存监控系统
2021/03/07 Python
对python判断是否回文数的实例详解
2019/02/08 Python
Python3批量生成带logo的二维码方法
2019/06/24 Python
python简单实现矩阵的乘,加,转置和逆运算示例
2019/07/10 Python
python中struct模块之字节型数据的处理方法
2019/08/27 Python
在pycharm中配置Anaconda以及pip源配置详解
2019/09/09 Python
基于PyQT实现区分左键双击和单击
2020/05/19 Python
python操作微信自动发消息的实现(微信聊天机器人)
2020/07/14 Python
联想西班牙官网:Lenovo西班牙
2018/08/28 全球购物
学前教育求职自荐信范文
2013/12/25 职场文书
女儿十岁生日答谢词
2014/01/27 职场文书
快消品行业营销模式与盈利模式分享
2019/09/27 职场文书
《围炉夜话》110句人生箴言,精辟有内涵,引人深思
2019/10/23 职场文书
vue中三级导航的菜单权限控制
2021/03/31 Vue.js
只用40行Python代码就能写出pdf转word小工具
2021/05/31 Python
java多态注意项小结
2021/10/16 Java/Android
无线电知识基础入门篇
2022/02/18 无线电
JS轻量级函数式编程实现XDM三
2022/06/16 Javascript