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


Posted in Javascript onNovember 29, 2016

本文实例讲述了原生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 相关文章推荐
jQuery 研究心得 取得属性的值
Nov 30 Javascript
js函数排序的实例代码
Jul 01 Javascript
iframe的onreadystatechange事件在firefox下的使用
Apr 16 Javascript
angular.foreach 循环方法使用指南
Jan 06 Javascript
js中substr,substring,indexOf,lastIndexOf,split,replace的用法详解
Nov 09 Javascript
JavaScript实现时钟滴答声效果
Jan 29 Javascript
JavaScript基于activexobject连接远程数据库SQL Server 2014的方法
Jul 12 Javascript
Vue之mixin全局的用法详解
Aug 22 Javascript
Vue 进阶之路(三)
Apr 18 Javascript
jQuery Migrate 插件用法实例详解
May 22 jQuery
Vue 使用Props属性实现父子组件的动态传值详解
Nov 13 Javascript
es6数组的flat(),flatMap()函数用法实例分析
Apr 18 Javascript
jQuery Checkbox 全选 反选的简单实例
Nov 29 #Javascript
使用Vue.js创建一个时间跟踪的单页应用
Nov 28 #Javascript
js拖拽功能实现代码解析
Nov 28 #Javascript
百度搜索框智能提示案例jsonp
Nov 28 #Javascript
JS函数多个参数默认值指定方法分析
Nov 28 #Javascript
ajax级联菜单实现方法实例分析
Nov 28 #Javascript
jQuery select自动选中功能实现方法分析
Nov 28 #Javascript
You might like
SONY ICF-F10中波修复记
2021/03/02 无线电
第七节 类的静态成员 [7]
2006/10/09 PHP
浅谈PHP的数据库接口和技术
2016/12/09 PHP
PHP implode()函数用法讲解
2019/03/08 PHP
通过JS 获取Mouse Position(鼠标坐标)的代码
2009/09/21 Javascript
深入理解JavaScript系列(7) S.O.L.I.D五大原则之开闭原则OCP
2012/01/15 Javascript
Extjs中ComboBoxTree实现的下拉框树效果(自写)
2013/05/28 Javascript
Javascript基础教程之break和continue语句
2015/01/18 Javascript
JavaScript中pop()方法的使用教程
2015/06/09 Javascript
JavaScript中的定时器之Item23的合理使用
2015/10/30 Javascript
AngularJs解决跨域问题案例详解(简单方法)
2016/05/19 Javascript
使用BootStrap实现用户登录界面UI
2016/08/10 Javascript
js对象浅拷贝和深拷贝详解
2016/09/05 Javascript
Vue.js双向绑定操作技巧(初级入门)
2016/12/27 Javascript
详解angular2采用自定义指令(Directive)方式加载jquery插件
2017/02/09 Javascript
JavaScript中undefined和null的区别
2017/05/03 Javascript
vue嵌套路由与404重定向实现方法分析
2018/05/04 Javascript
Node.js控制台彩色输出的方法与原理实例详解
2019/12/01 Javascript
Python的gevent框架的入门教程
2015/04/29 Python
利用numpy+matplotlib绘图的基本操作教程
2017/05/03 Python
python如何派生内置不可变类型并修改实例化行为
2018/03/21 Python
Python闭包函数定义与用法分析
2018/07/20 Python
python+selenium实现自动抢票功能实例代码
2018/11/23 Python
python实现超级玛丽游戏
2020/03/18 Python
python爬虫要用到的库总结
2020/07/28 Python
Html5与App的通讯方式详解
2019/10/24 HTML / CSS
伦敦一家非常流行的时尚精品店:Oxygen Boutique
2017/01/15 全球购物
俄罗斯奢侈品牌衣服、鞋子和配饰的在线商店:INTERMODA
2020/07/17 全球购物
八年级数学教学反思
2014/01/31 职场文书
材料会计岗位职责
2014/03/06 职场文书
大宝sod蜜广告词
2014/03/21 职场文书
共筑中国梦演讲稿
2014/04/23 职场文书
2014年社区居委会主任重阳节讲话稿
2014/09/25 职场文书
听证通知书
2015/04/24 职场文书
2019财务毕业实习报告
2019/06/27 职场文书
索尼ICF-36收音机评测
2022/04/30 无线电