JS与Ajax Get和Post在使用上的区别实例详解

get和post方法最大的不同在于：

1.get方法传值参数在url里面，而post参数放send里面

2.post方法必须加上

xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

下面实例可以看get方法

xmlHttp.open("GET","for.php?text="+url,true);

在post里面表现为：

xmlHttp.open("POST","for.php",true);
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

POST和GET方法共用文件

index.php

<script src="a.js" type="text/javascript"></script>
<a href="#" onClick="funphp100('o')">o</a>
<a href="#" onClick="funphp100('t')">t</a>
<a href="#" onClick="funphp100('x')">x</a>
<div id="php100"></div>

POST方法文件：

a.js

var xmlHttp;
function S_xmlhttprequest(){
if(window.ActiveXObject){
xmlHttp=new ActiveXObject('Microsoft.XMLHTTP');
}else if(window.XMLHttpRequest){
xmlHttp=new XMLHttpRequest();
}
}
function funphp100(n){
var data = "text=" +n;　　//多个参数的，往后加
S_xmlhttprequest();
xmlHttp.open("POST","for.php",true);
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlHttp.onreadystatechange=byphp;
xmlHttp.send(data);
}
function byphp(){
var byphp100=xmlHttp.responseText;
document.getElementById("php100").innerHTML=byphp100;
}

for.php：

<?
echo $_POST['text'];
?>

GET方法文件：

a.js:

var xmlHttp;
function S_xmlhttprequest(){
if(window.ActiveXObject){
xmlHttp=new ActiveXObject('Microsoft.XMLHTTP');
}else if(window.XMLHttpRequest){
xmlHttp=new XMLHttpRequest();
}
}
function funphp100(url){
S_xmlhttprequest();
xmlHttp.open("GET","for.php?text="+url,true);
xmlHttp.onreadystatechange=byphp;
xmlHttp.send(null);
}
function byphp(){
var byphp100=xmlHttp.responseText;
document.getElementById("php100").innerHTML=byphp100;
}

for.php：

<?
echo $_GET['text'];
?>

以上所述是小编给大家介绍的JS与Ajax Get和Post在使用上的区别实例详解的相关知识，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • 原生JS封装Ajax插件(同域、jsonp跨域)

    抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正确的地方,还望指正^_^ 一.Ajax核心,创建XHR对象 Ajax技术的核心是XMLHttpRequest对象(简称XHR),IE5是第一款引入XHR对象的浏览器,而IE5中的XHR对象是通过MSXML库中的一个ActiveX对象实现的,因此在IE中可能有3个版本,即MSXML2.XMLHttp.

  • Js+Ajax,Get和Post在使用上的区别小结

    get和post方法最大的不同在于: 1.get方法传值参数在url里面,而post参数放send里面 2.post方法必须加上 xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 下面实例可以看get方法 xmlHttp.open("GET","for.php?text="+url,true); 在post里面表现为:

  • Jquery揭秘系列:ajax原生js实现详解(推荐)

    讲到ajax这个东西,我们要知道两个对象XMLHTTPRequest和ActiveXObject ,提供了对 HTTP 协议的完全的访问,包括做出 POST 和 HEAD 请求以及普通的 GET 请求的能力.可以同步或异步返回 Web 服务器的响应,并且能以文本或者一个 DOM 文档形式返回内容.XMLHTTPRequest基本上算是标准化了,兼容大部分浏览器ActiveXObject这玩儿意儿是微软的东西,所以是为了兼容IE版本,我们用的只是它的xmlHTTP功能. 为了功能的明确和清晰,我们

  • JS与Ajax Get和Post在使用上的区别实例详解

    get和post方法最大的不同在于: 1.get方法传值参数在url里面,而post参数放send里面 2.post方法必须加上 xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 下面实例可以看get方法 xmlHttp.open("GET","for.php?text="+url,true); 在post里面表现为:

  • AJAX原理以及axios、fetch区别实例详解

    AJAX原理以及axios、fetch区别实例详解

    目录 AJAX原理 Promise封装Ajax JQ Ajax.Axios.Fetch的核心区别 JQuery Ajax Axios Fetch 补充:为什么要用axios? 总结 AJAX原理 Ajax的原理简单来说是在用户和服务器之间加了—个中间层(AJAX引擎),通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用javascript来操作DOM而更新页面.使用户操作与服务器响应异步化. Ajax的过程只涉及JavaScript.XMLHttpRequest和

  • js实现hashtable的赋值、取值、遍历操作实例详解

    js实现hashtable的赋值、取值、遍历操作实例详解

    本文实例讲述了js实现hashtable的赋值.取值.遍历操作.分享给大家供大家参考,具体如下: 哈希表(Hashtable)这个概率应该是#c里面的概念,用来赋值.取值.遍历.排序操作提高效率.想起这个东西其实使我们以前经常遇到这样的面试题,一个很大的数组可能有100000个,如何快速知道它里面的出现最多的次数,那么这里我们可能就要用Hashtable的相关知识了.Javascript中,object的实现就是hash表,因此只要在object上封装点方法,再利用原生的hasOwnProper

  • JS实现弹出浮动窗口(支持鼠标拖动和关闭)实例详解

    JS实现弹出浮动窗口(支持鼠标拖动和关闭)实例详解

    本文实例讲述了JS实现弹出浮动窗口.分享给大家供大家参考.具体如下: 这里介绍的JS弹出浮动窗口,支持鼠标拖动和关闭,点击链接文字后弹出层窗口,也称作是弹出式对话框吧. 关于一些参数说明: bodycontent:要在窗口中显示的内容 title:窗口的标题 removeable:窗口是否能拖动 注意:内容窗体的高度是height-30px,请计算好要显示的内容高度和宽度. 注:在火狐或chrome下效果最佳,IE8下可能有些小问题. 点击此处查看运行效果: http://demo.jb51.n

  • JS面向对象编程基础篇（一） 对象和构造函数实例详解

    本文实例讲述了JS面向对象编程对象和构造函数.分享给大家供大家参考,具体如下: 面向对象编程(Object Oriented Programming,缩写为 OOP)是目前主流的编程范式.它将真实世界各种复杂的关系,抽象为一个个对象,然后由对象之间的分工与合作,完成对真实世界的模拟.每一个对象都是功能中心,具有明确分工,可以完成接受信息.处理数据.发出信息等任务.对象可以复用,通过继承机制还可以定制.因此,面向对象编程具有灵活.代码可复用.高度模块化等特点,容易维护和开发,比起由一系列函数或指令

  • js中Map和Set的用法及区别实例详解

    js中Map和Set的用法及区别实例详解

    目录 首先了解一下 Map 再来了解一下 Set 总结Map和Set的区别 结语: 首先了解一下 Map Map 是一组键值对的结构,和 JSON 对象类似. (1) Map数据结构如下 这里我们可以看到的是Map的数据结构是一个键值对的结构 (2) key 不仅可以是字符串还可以是对象 var obj ={name:"小如",age:9} let map = new Map() map.set(obj,"111") 打印结果如下 (3) Map常用语法如下 //初

  • 原生js中ajax访问的实例详解

    原生js中ajax访问的实例详解 form表单中 登录名: 失去光标即触发事件 function createXmlHttp() { var xmlHttp; try { // Firefox, Opera 8.0+, Safari xmlHttp = new XMLHttpRequest(); } catch (e) { try {// Internet Explorer xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (

  • react中的ajax封装实例详解

    react中的ajax封装实例详解 代码块 **opts: {'可选参数'} **method: 请求方式:GET/POST,默认值:'GET'; **url: 发送请求的地址, 默认值: 当前页地址; **data: string,json; **async: 是否异步:true/false,默认值:true; **cache: 是否缓存:true/false,默认值:true; **contentType: HTTP头信息,默认值:'application/x-www-form-urlenc

  • JS JSOP跨域请求实例详解

    在项目开发中遇到跨域的问题,一般都是通过JSONP来解决的.但是JSONP到底是个什么东西呢,实现的原理又是什么呢.在项目的空闲时间可以好好的来研究一下了. 1.什么是JSONP? 要了解JSONP,不得不提一下JSON,那么什么是JSON? JSON is a subset of the object literal notation of JavaScript. Since JSON is a subset of JavaScript, it can be used in the langu

随机推荐