浅谈JS原生Ajax,GET和POST

javascript/js的ajax的GET请求：

<script type="text/javascript">
/* 创建 XMLHttpRequest 对象 */
var xmlHttp;
function GetXmlHttpObject(){
　　if (window.XMLHttpRequest){
　　　　// code for IE7+, Firefox, Chrome, Opera, Safari
　　　　xmlhttp=new XMLHttpRequest();
　　}else{// code for IE6, IE5
　　　　xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
　　}
　　return xmlhttp;
}
// -----------ajax方法-----------//
function getLabelsGet(){
　　xmlHttp=GetXmlHttpObject();
　　if (xmlHttp==null){
　　　　alert('您的浏览器不支持AJAX！');
　　　　return;
　　}
　　var id = document.getElementById('id').value;
　　var url="http://www.Leefrom.com?id="+id+"&t/"+Math.random();
　　xmlHttp.open("GET",url,true);
　　xmlHttp.onreadystatechange=favorOK;//发送事件后，收到信息了调用函数
　　xmlHttp.send();
}
function getOkGet(){
　　if(xmlHttp.readyState==1||xmlHttp.readyState==2||xmlHttp.readyState==3){
　　　　// 本地提示：加载中
　　}
　　if (xmlHttp.readyState==4 && xmlHttp.status==200){
　　　　var d= xmlHttp.responseText;
　　　　// 处理返回结果
　　}
}
</script>

javascript/js的ajax的POST请求：

<script type="text/javascript">
/* 创建 XMLHttpRequest 对象 */
var xmlHttp;
function GetXmlHttpObject(){
  if (window.XMLHttpRequest){
   // code for IE7+, Firefox, Chrome, Opera, Safari
   xmlhttp=new XMLHttpRequest();
  }else{// code for IE6, IE5
   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  return xmlhttp;
}
// -----------ajax方法-----------//
function getLabelsPost(){
  xmlHttp=GetXmlHttpObject();
  if (xmlHttp==null){
    alert('您的浏览器不支持AJAX！');
    return;
  }
  var url="http://www.lifefrom.com/t/"+Math.random();
  xmlhttp.open("POST",url,true);
  xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
  xmlhttp.send();
  xmlHttp.onreadystatechange=getLabelsOK;//发送事件后，收到信息了调用函数
}
function getOkPost(){
  if(xmlHttp.readyState==1||xmlHttp.readyState==2||xmlHttp.readyState==3){
    // 本地提示：加载中/处理中 

  }
  if (xmlHttp.readyState==4 && xmlHttp.status==200){
    var d=xmlHttp.responseText; // 返回值
    // 处理返回值
  }
}
</script>

注意：XMLHttpRequest 是 AJAX 的基础，在创建 XMLHttpRequest 对象时，必须与你写的ajax方法在同一个‘<script></script>'标签中！否则ajax请求会出错，并无法返回数据。 javascript/js的ajax的POST/GET请求。

以上这篇浅谈JS原生Ajax,GET和POST就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 原生js jquery ajax请求以及jsonp的调用方法

    ajax 是用来处理前后端交互的技术,可以改善用户体验,其本质是 XMLHttpRequest,异步访问服务器并发送请求数据,服务器返回响应的数据,以页面无刷新的效果改变页面中的局部内容 同步:任务一个一个的执行,只有前面的任务执行完才会执行下一个任务,如果前面的任务是耗时操作,则需要一直等待 异步:多条任务并发执行,也就是一个任务的开启,不需要等待其他任务执行结束,效率较高 ajax的语言载体是JavaScript,最大的特点是页面不刷新 1.获取ajax对象 主流浏览器获取方式:火狐.谷歌.

  • 基于js原生和ajax的get和post方法以及jsonp的原生写法实例

    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.rea

  • 原生 JS Ajax,GET和POST 请求实例代码

    javascript/js的ajax的GET请求代码如下所示: <script type="text/javascript"> /* 创建 XMLHttpRequest 对象 */ var xmlHttp; function GetXmlHttpObject(){ if (window.XMLHttpRequest){ // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest();

  • 浅谈JS原生Ajax,GET和POST

    javascript/js的ajax的GET请求: <script type="text/javascript"> /* 创建 XMLHttpRequest 对象 */ var xmlHttp; function GetXmlHttpObject(){ if (window.XMLHttpRequest){ // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); }else

  • 浅谈js的ajax的异步和同步请求的问题

    先来看以下代码: var flag=true; var index=0; $.ajax({ url: "http://www.jb51.net/", success: function(data){ flag=false; } }); while(flag){ index++; } alert(index); 请问最后alert的index的结果是多少? 可能有人会说0呗.实际上却没那么简单.大家可以自己试试看.可以看到最终程序进入了一个死循环!怎么会这样呢! 我们在看一段代码: va

  • 浅谈js原生拖放

    可拖动 网页中的图像.链接和文本是浏览器默认可以被拖动的,HTML5 为所有的HTML元素都提供了一个draggable属性,当这个属性的值为true的时候,元素被视为可以拖动. 拖动图像或者链接时,将鼠标放在图像或者链接上,按住鼠标不放就可以拖动它.拖动文本时,要先选中文本,然后可以像拖动图像一样拖动选中的文本. 被拖动的元素事件 拖动图片时依次触发:drapstart,drag,dragend事件.这三个事件的目标都是被拖动的元素. 按下鼠标键并开始移动鼠标时,会在被拖放元素上触发drags

  • 浅谈jquery中ajax跨域提交的时候会有2次请求的问题

    我们平时在同域中请求页面什么的时候不会有这种情况,这种情况大多发生在移动端的跨域请求中发生的. 解决方法就是在服务端中加一层过滤HTTP请求的类型,把OPTION等不用的类型过滤掉.就是当请求为非 HTTP中的 GET 和 POST的时候就不执行下面的代码,这样就可以只执行一次请求了. 在ASP.NET中我们用 Request.ServerVariables["REQUEST_METHOD"] == "POST" 或者 Request.ServerVariables

  • 浅谈JS的二进制家族

    浅谈JS的二进制家族

    概述 Blob: 前端的一个专门用于支持文件操作的二进制对象 ArrayBuffer:前端的一个通用的二进制缓冲区,类似数组,但在API和特性上却有诸多不同 Buffer:Node.js提供的一个二进制缓冲区,常用来处理I/O操作 Blob 我们首先来介绍Blob,Blob是用来支持文件操作的.简单的说:在JS中,有两个构造函数 File 和 Blob, 而File继承了所有Blob的属性. 所以在我们看来,File对象可以看作一种特殊的Blob对象. 在前端工程中,我们在哪些操作中可以获得Fi

  • 浅谈Jquery中Ajax异步请求中的async参数的作用

    之前不知道这个参数的作用,上网找了前辈的博客,在此收录到自己的博客,希望能帮到更多的朋友: test.html <a href="javascript:void(0)" onmouseover="testAsync()"> asy.js function testAsync{ var temp; $.ajax({ async: false, type : "GET", url : 'tet.php', complete: functi

  • 浅谈JS中json数据的处理

    浅谈JS中json数据的处理

    1. json数据结构(对象和数组) json对象:var obj = {"name":"xiao","age":12}; json数组:var objArray = [{"name":"xiao","age":12},{"name":"xiao","age":12}]; 2. 处理json数据,依赖文件有:jQuery.js

  • 浅谈js获取ModelAndView值的问题

    JS当中不能接收ModelAndView的返回值吗?一定要在JSP页面中才能接收吗? 1 方法一 [有效] 可以的,跟el表达式访问方式一样. 示例代码,一个数据展示请求的Action中存入一个userId: @RequestMapping(value="/diary") public ModelAndView toDiaryList(HttpSession session){ ModelAndView view = new ModelAndView("/diary_list

  • 浅谈JS和Nodejs中的事件驱动

    事件驱动和发布-订阅 事件驱动架构是建立在软件开发中一种通用模式上的,这种模式被称为发布-订阅或观察者模式. 在事件驱动架构中,至少有两个参与者:主题(subject)和观察者(observer). 主题就像调频收音机一样,向有兴趣收听该主题所说内容的观察者进行广播. 观察者可能只有一个,也可能有一百个,这都没有关系,只要主题有一些要广播的消息就够了. 请记住,事件驱动.发布-订阅和观察者模式在实践中不是一回事,但在理想情况下,它们使用相同的方法:一个实体广播一条消息,其他实体侦听该消息. 发布

  • 浅谈JS前端模块化的几种规范

    前言 有这样一个场景,客户端运行很久,但是法务部和数据部需要收集用户的一些信息,这些信息收集好之后需要进行相应的数据处理,之后上报到服务端.客户端提供一个纯粹的js执行引擎,不需要 WebView 容器.iOS 端有成熟的JavaScriptCore.Android 可以使用 V8 引擎.这样一个引擎配套有一个 SDK,访问 Native 的基础能力和数据运算能力,可以看成是一个阉割版的 Hybrid SDK 额外增加了一些数据处理能力. 问题结束了吗?处理逻辑的时候还需要用到2个库:cheer

随机推荐