原生 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 请求实例代码的相关知识,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

时间: 2016-06-06

浅谈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 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

基于CORS实现WebApi Ajax 跨域请求解决方法

概述 ASP.NET Web API 的好用使用过的都知道,没有复杂的配置文件,一个简单的ApiController加上需要的Action就能工作.但是在使用API的时候总会遇到跨域请求的问题,特别各种APP万花齐放的今天,API的跨域请求是不能避免的. 在默认情况下,为了防止CSRF跨站的伪造攻击(或者是 javascript的同源策略(Same-Origin Policy)),一个网页从另外一个域获取数据时就会收到限制.有一些方法可以突破这个限制,那就是大家熟知的JSONP, 当然这只是众多

基于JavaScript如何实现ajax调用后台定义的方法

由于ajax的独特优势,使得它在当前大量网站得到了广泛的应用,下面就介绍一下ajax如何调用后台定义的函数,虽然比较简单,不过希望能够给初学者带来一定的帮助,代码如下: 1.首先我们先创建一个antzone.aspx页面. 2.在它的cs文件中创建如下函数: public static string mytest(string first, string second) { return return first+second; } 2.html代码如下: <form id="myform

基于JS判断iframe是否加载成功的方法(多种浏览器)

推荐阅读: JS iFrame加载慢怎么解决 在项目中经常要动态添加iframe,然后再对添加的iframe进行相关操作,而往往iframe还没添加完呢,后边的代码就已经执行完了,所以有些你写的东西根本没有显示出来.这时,我们就要考虑是否可以等iframe加载完后再执行后边的操作,当然,各种浏览器早就为我们考虑到啦,看下面: ie浏览器 IE的每个elem节点都会拥有一个onreadystatechange事件,这个事件每次在elem内容发送变化的时候触发,比如内容正在载入loading会触发,

基于JS实现数字+字母+中文的混合排序方法

在上篇文章给大家介绍了JavaScript sort数组排序方法和自我实现排序方法小结,用自己的方法实现了数字数组的排序. 当然,实际运用中,我还是会使用sort方法更加方便.但是,我上一篇博文,仅仅是实现了数字排序,而srot方法默认可是能给字母实现排序的哦!而我的代码只能排序数字,看起来还是弱弱的. 所以,我得加上能排字母甚至中文的排序方法. 实现代码 $(function(){ var arr = ["Jack","Book","Fung"

基于ajax和jsonp的原生封装(实例)

最近在学ajax和跨域,于是就自己封装了一个,虽然有点粗糙但还是可以用的.其实jsonp的本质就是:动态创建script标签,然后通过src属性发送跨域请求,然后服务器端响应的数据格式为[函数调用(foo(实参))],所以在发送请求之前必须先声明一个函数,并且函数的名字与参数中传递的名字要一致.这里声明的函数是由服务器响应的内容(实际就是一段js代码-函数调用)来调用. 其他的就不多说了,直接上代码. 'use strict'; function ajax(obj){ var defaults

使用原生js封装的ajax实例(兼容jsonp)

实例如下: /* 封装ajax函数 * @param {string}opt.type http连接的方式,包括POST和GET两种方式 * @param {string}opt.url 发送请求的url * @param {boolean}opt.async 是否为异步请求,true为异步的,false为同步的 * @param {object}opt.data 发送的参数,格式为对象类型 * @param {function}opt.success ajax发送并接收成功调用的回调函数 */

原生JS简单实现ajax的方法示例

本文实例讲述了原生JS简单实现ajax的方法.分享给大家供大家参考,具体如下: HTML部分: <body> <input type="button" value="Ajax提交" onclick="Ajax();" /> <div id="resText" ></div> </body> 这里有个input按钮,点击会触发click事件,click事件调用Ajax(

原生js封装的ajax方法示例

本文实例讲述了原生js封装的ajax方法.分享给大家供大家参考,具体如下: 众所周知,框架之间会有冲突,这是源生js就起到作用了,下面介绍一种源生js封装的ajax请求. function ajax(options) { options = options || {}; options.type = (options.type || "GET").toUpperCase(); options.dataType = options.dataType || "json"

基于jQuery通过jQuery.form.js插件使用ajax提交form表单

我们在提交表单的时候,如果没有使用ajax提交,页面都会自己刷新一下,显得非常的不友好,所以我们需要把我们的表单提交修改为ajax的模式,可以让用户清楚地知道他们在提交表单的时候处在哪一个阶段:正在提交?提交成功? 我简单使用了一下,jQuery Form插件有一下优点: 1.支持提交前验证. 2.支持提交后回调. 3.采用AJAX方式,有很好的用户体验 4.提交方式是灵活.只要指定要提交的form ID即可.想提交那个form.就可提交那个.同时提交参数可配置. 5.支持提交多种类型数据.如: