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

 更新时间:2016年11月29日 08:52:38   作者:牛逼的霍啸林   我要评论
这篇文章主要介绍了原生JS简单实现ajax的方法,结合实例形式分析了ajax的实现步骤与相关使用技巧,需要的朋友可以参考下

本文实例讲述了原生JS简单实现ajax的方法。分享给大家供大家参考,具体如下:

HTML部分:

<body>
<input type="button" value="Ajax提交" onclick="Ajax();" />
<div id="resText" ></div>
</body>

这里有个input按钮,点击会触发click事件,click事件调用Ajax()方法。

JS部分:

<script language="javascript" type="text/javascript">
//通过这个函数来异步获取信息
function Ajax(){ 
  var xmlHttpReq = null;  //声明一个空对象用来装入XMLHttpRequest
  if (window.ActiveXObject){//IE5 IE6是以ActiveXObject的方式引入XMLHttpRequest的
    xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
  } 
  else if (window.XMLHttpRequest){//除IE5 IE6 以外的浏览器XMLHttpRequest是window的子对象
    xmlHttpReq = new XMLHttpRequest();//实例化一个XMLHttpRequest
  }
  if(xmlHttpReq != null){  //如果对象实例化成功 
    xmlHttpReq.open("GET","test.php",true);  //调用open()方法并采用异步方式
    xmlHttpReq.onreadystatechange=RequestCallBack; //设置回调函数
    xmlHttpReq.send(null);  //因为使用get方式提交,所以可以使用null参调用
  }
  function RequestCallBack(){//一旦readyState值改变,将会调用这个函数
    if(xmlHttpReq.readyState == 4){
        if(xmlHttpReq.status == 200){
          //将xmlHttpReq.responseText的值赋给ID为 resText 的元素
          document.getElementById("resText").innerHTML = xmlHttpReq.responseText;
        }
    }
  }
}
</script>

Ajax大约分四步,创建Ajax对象,用open()方法偷偷的跑到服务器去获取数据,成功后做相应的处理。用GET方法将要提交的参数写到open方法的url参数中就行了,此时send方法的参数为null。

例如GET方法 :

var url = "login.php?user=XXX&pwd=XXX";
xmlHttpRequest.open("GET",url,true);
xmlHttpRequset.send(null);

例如POST方法:

xmlHttpRequest.open("POST","login.php",true);
xmlHttpRequest.setRequestHeder("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");
xmlHttpRequest.send("user="+username+"&pwd="+password);

如果需要在send里传递参数则setRequestHeder是必须的

需要注意的是根据提交方式的不同,两种提交方式分别调用后台的doGet方法和doPost方法处理。

PHP部分:

<?php
  echo "Hello Ajax!";
?>

Ajax获取了PHP的数据后,就会偷偷的将数据放到相应的div层中。这个click事件并没有使得页面刷新,就偷偷的获取了服务器端的数据,服务端的数据也可以是从数据库里读取出来的,获取数据后,Ajax还可以进行一些动作的处理。

一切都在悄无声息中。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript中ajax操作技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结

希望本文所述对大家JavaScript程序设计有所帮助。

相关文章

  • 创建一般js对象的几种方式

    创建一般js对象的几种方式

    本文主要介绍了创建一般js对象的几种方式。具有很好的参考价值,下面跟着小编一起来看下吧
    2017-01-01
  • JavaScript实现大数的运算

    JavaScript实现大数的运算

    js的'MAX_SAFE_INTEGER'是9007199254740991,而'MIN_SAFE_INTEGER'为-9007199254740991,那么如何实现一些特别大的数目相加?今天我们就来探讨下
    2014-11-11
  • web前端开发upload上传头像js示例代码

    web前端开发upload上传头像js示例代码

    这篇文章主要为大家详细介绍了web前端开发upload上传头像js示例代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-10-10
  • 原生javascript上传图片带进度条【实例分享】

    原生javascript上传图片带进度条【实例分享】

    本文主要介绍了原生javascript上传图片带进度条的实例详解。具有很好的参考价值。下面跟着小编一起来看下吧
    2017-04-04
  • ES6入门教程之Iterator与for...of循环详解

    ES6入门教程之Iterator与for...of循环详解

    最近在学习ES6,刚刚看到Iterator和for...of循环这一章,所以想要跟大家略微分享一下,下面这篇文章主要给大家介绍了关于ES6入门学习中Iterator与for...of循环的相关资料,不足之处还望大家多多指正,需要的朋友们可以参考学习。
    2017-05-05
  • JS小球抛物线轨迹运动的两种实现方法详解

    JS小球抛物线轨迹运动的两种实现方法详解

    这篇文章主要介绍了JS小球抛物线轨迹运动的两种实现方法,结合实例形式分析了javascript实现小球抛物线运动的相关计算与图形绘制操作技巧,需要的朋友可以参考下
    2017-12-12
  • Flexigrid在IE下不显示数据的有效处理方法

    Flexigrid在IE下不显示数据的有效处理方法

    Flexigrid在IE下不显示数据的处理方法是:指定一下Ajax请求数据的方式为Get方式,遇到此问题的朋友可以参考下
    2014-09-09
  • 详解React Native网络请求fetch简单封装

    详解React Native网络请求fetch简单封装

    本篇文章主要介绍了详解React Native网络请求fetch简单封装,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • JavaScript必知必会(九)function 说起 闭包问题

    JavaScript必知必会(九)function 说起 闭包问题

    这篇文章主要介绍了JavaScript必知必会(九)function 说起 闭包问题的相关资料,需要的朋友可以参考下
    2016-06-06
  • javascript延时加载之defer测试

    javascript延时加载之defer测试

    偶尔发现 js 中有个延时加载的标签 defer,还在疑惑这么好用的东西为什么没有流行起来,本人今天把它拾起来用了一下,发现只在ie7,8,9和360安全济览器下可以,知道为什么不用它了吧
    2012-12-12

最新评论