原生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 相关文章推荐
JavaScript使用cookie
Feb 02 Javascript
如何使用json在前后台进行数据传输实例介绍
Apr 11 Javascript
判断是否安装flash player及当前版本的JS代码
Aug 08 Javascript
jQuery中nextAll()方法用法实例
Jan 07 Javascript
js检测用户输入密码强度
Oct 22 Javascript
JavaScript与HTML的结合方法详解
Nov 23 Javascript
使用vue.js开发时一些注意事项
Apr 27 Javascript
JS实现图文并茂的tab选项卡效果示例【附demo源码下载】
Sep 21 Javascript
jquery+css实现侧边导航栏效果
Jun 12 jQuery
解决koa2 ctx.render is not a function报错问题
Aug 07 Javascript
vue动态路由:路由参数改变,视图不更新问题的解决
Nov 05 Javascript
vue点击按钮实现简单页面的切换
Sep 08 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
php allow_url_include的应用和解释
2010/04/22 PHP
一个简单的网页密码登陆php代码
2012/07/17 PHP
php中防止恶意刷新页面的代码小结
2012/10/31 PHP
PHP脚本监控Nginx 502错误并自动重启php-fpm
2015/05/13 PHP
PHP getDocNamespaces()函数讲解
2019/02/03 PHP
php防止表单重复提交实例讲解
2019/02/11 PHP
使用js如何实现全选与全不选
2013/12/30 Javascript
nodejs npm package.json中文文档
2014/09/04 NodeJs
jQuery实现时尚漂亮的弹出式对话框实例
2015/08/07 Javascript
JS+CSS实现的简单折叠展开多级菜单效果
2015/09/12 Javascript
jQuery使用serialize()表单序列化时出现中文乱码问题的解决办法
2016/07/27 Javascript
Vue.js获取被选择的option的value和text值方法
2018/08/24 Javascript
layui table复选框禁止某几条勾选的实例
2019/09/20 Javascript
layui的select联动实现代码
2019/09/28 Javascript
JavaScript 接口原理与用法实例详解
2020/05/12 Javascript
[02:40]2018年度DOTA2最佳新人-完美盛典
2018/12/16 DOTA
Python SQLite3数据库操作类分享
2014/06/10 Python
Python获取文件ssdeep值的方法
2014/10/05 Python
PYTHON压平嵌套列表的简单实现
2016/06/08 Python
pandas 实现字典转换成DataFrame的方法
2018/07/04 Python
python退出命令是什么?详解python退出方法
2018/12/10 Python
Python中 CSV格式清洗与转换的实例代码
2019/08/29 Python
基于nexus3配置Python仓库过程详解
2020/06/15 Python
html5中valid、invalid、required的定义
2014/02/21 HTML / CSS
小米乌克兰网上商店:Xiaomi.UA
2019/10/29 全球购物
Smilodox官方运动服装店:从运动服到健身配件
2020/08/27 全球购物
市场营销专业个人自荐信格式
2013/09/21 职场文书
大学生大二自我鉴定
2013/10/28 职场文书
给领导的致歉信范文
2014/01/13 职场文书
公司中秋节活动方案
2014/02/12 职场文书
宣传保护环境的公益广告词
2014/03/13 职场文书
化工实习心得体会
2014/09/09 职场文书
抄袭同学作业检讨书1000字
2014/11/20 职场文书
2015年乡镇财政工作总结
2015/05/19 职场文书
运动会5000米加油稿
2015/07/21 职场文书
如何写一份具有法律效力的借款协议书?
2019/07/02 职场文书