原生ajax的get和post方法使用详解

login.onclick = function(){var xhr = new XMLHttpRequest();xhr.open("get","http://localhost/ajax2/test2.php?username="+username.value+"&pwd="+pwd2.value,true);xhr.send();xhr.onreadystatechange = function(){if (xhr.readyState == 4) {if (xhr.status>=200 && xhr.status<300) {alert(xhr.responseText);};};}}

登录后复制

ajax方法

btn.onclick = function(){ajax(    "GET",    "http://localhost/ajax2/my02.php",    {xingming:xingming.value,pwd:pwd.value},    function(data){console.log(data);},function(errCode){console.log(errCode);})

登录后复制

post方法传参

它与个get方法的区别:

01 安全型。post更安全。

02 速度. get的速度快

03 数量级。 post的数量级更大一些.

具体实现:

var xhr = new XMLHttpRequest();xhr.open("post","http://localhost/ajax2/login2.php",true);var data = {username:username1.value,pwd:pwd1.value}// 设置请求头 告诉服务器发给他的数据是json格式xhr.setRequestHeader("content-type","application/json");xhr.send( JSON.stringify(data) );xhr.onreadystatechange = function(){if (xhr.readyState == 4) {if ( xhr.status >= 200 && xhr.status < 300 ) {alert(xhr.responseText);};};}

登录后复制

原生jsonp 方法

var sc = document.createElement("script");sc.type = "text/javascript";document.body.appendChild(sc);sc.src = "http://localhost/ajax2/jsonp.php?cb=myCallBack";function myCallBack(data){console.log(data);}

登录后复制

相信看了本文案例你已经掌握了方法,更多精彩请关注【创想鸟】其它相关文章!

推荐阅读:

以上就是原生ajax的get和post方法使用详解的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2771412.html

(0)
上一篇 2025年3月8日 12:56:53
下一篇 2025年3月8日 12:57:08

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • JS中多态使用详解

    这次给大家带来JS中多态使用详解,JS中多态使用的注意事项有哪些,下面就是实战案例,一起来看一下。  多态在面向对象编程语言中是十分重要的。在JAVA中是通过继承来得到多态的效果。如下: public abstract class Anim…

    编程技术 2025年3月8日
    200
  • vue-router的使用详解

    这次给大家带来vue-router的使用详解,vue-router使用的注意事项有哪些,下面就是实战案例,一起来看一下。 vue route demo Hello App! <!– 默认会被渲染成一个 “ 标签 –> Go…

    编程技术 2025年3月8日
    200
  • TabBarIOS使用详解

    这次给大家带来TabBarIOS使用详解,TabBarIOS使用的注意事项有哪些,下面就是实战案例,一起来看一下。 import React, { Component } from ‘react’;import { StyleSheet, …

    编程技术 2025年3月8日
    200
  • ParticlesJS的使用详解

    这次给大家带来ParticlesJS的使用详解,ParticlesJS使用的注意事项有哪些,下面就是实战案例,一起来看一下。 particles.js A lightweight JavaScript library for creatin…

    编程技术 2025年3月8日
    200
  • 预加载InstantClick使用详解

    这次给大家带来预加载InstantClick使用详解,预加载InstantClick使用的注意事项有哪些,下面就是实战案例,一起来看一下。 昨晚在改造的时候代码高亮没法执行,准确的说是只执行一次,第二次就不执行了。所以发文说明一下,而且大致…

    编程技术 2025年3月8日
    200
  • JS二叉搜索树使用详解

    这次给大家带来JS二叉搜索树使用详解,JS二叉搜索树使用的注意事项有哪些,下面就是实战案例,一起来看一下。 什么是二叉树 二叉树就是树的每个节点最多只能有两个子节点 什么是二叉搜索树 二叉搜索树在二叉树的基础上,多了一个条件,就是二叉树在插…

    编程技术 2025年3月8日
    200
  • webpack2+React使用详解

    这次给大家带来webpack2+React使用详解,webpack2+React使用的注意事项有哪些,下面就是实战案例,一起来看一下。 1.涉及到的插件需要npm install安装;2.html-webpack-plugin创建服务于 w…

    编程技术 2025年3月8日
    200
  • Ajax使用原理分析

    这次给大家带来Ajax使用原理分析,Ajax使用的注意事项有哪些,下面就是实战案例,一起来看一下。 其实AJAX内部实现并不麻烦,主要通过一个叫XMLHttpRequest的对象,而这个对象在现有的浏览器均被支持。 可以说,它是整个AJAX…

    编程技术 2025年3月8日
    200
  • js链表使用详解

    这次给大家带来js链表使用详解,js链表使用的注意事项有哪些,下面就是实战案例,一起来看一下。 如下所示: Document function Node(v){ this.value=v; this.next=null; } functio…

    编程技术 2025年3月8日
    200
  • vuex+Actions使用详解

    这次给大家带来vuex+Actions使用详解,vuex+Actions使用的注意事项有哪些,下面就是实战案例,一起来看一下。 Action 提交的是 mutation,而不是直接变更状态. Action 是异步的,mutation是同步的…

    编程技术 2025年3月8日
    200

发表回复

登录后才能评论