原生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实现的不错的多行文字图片滚动效果
Sep 28 Javascript
js判断某个方法是否存在实例代码
Jan 10 Javascript
jquery+html5制作超酷的圆盘时钟表
Apr 14 Javascript
基于JavaScript实现高德地图和百度地图提取行政区边界经纬度坐标
Jan 22 Javascript
利用JQuery写一个简单的异步分页插件
Mar 07 Javascript
Angularjs 制作购物车功能实例代码
Sep 14 Javascript
超全面的javascript中变量命名规则
Feb 09 Javascript
jquery拼接ajax 的json和字符串拼接的方法
Mar 11 Javascript
npm 下载指定版本的组件方法
May 17 Javascript
vue router 组件的高级应用实例代码
Apr 08 Javascript
vue-preview动态获取图片宽高并增加旋转功能的实现
Jul 29 Javascript
如何通过简单的代码描述Angular父组件、子组件传值
Apr 07 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
3
2006/10/09 PHP
PHP中的cookie不用刷新就生效的方法
2012/02/04 PHP
php顺序查找和二分查找示例
2014/03/27 PHP
PHP接口并发测试的方法(推荐)
2016/12/15 PHP
PHP使用文件锁解决高并发问题示例
2018/03/29 PHP
情人节之礼 js项链效果
2012/02/13 Javascript
Jquery遍历checkbox获取选中项value值的方法
2014/02/13 Javascript
Javascript 制作图形验证码实例详解
2016/12/22 Javascript
微信小程序 UI与容器组件总结
2017/02/21 Javascript
详解Angular.js中$http拦截器的介绍及使用
2017/07/04 Javascript
nodejs基于WS模块实现WebSocket聊天功能的方法
2018/01/12 NodeJs
微信小程序纯文本实现@功能
2020/04/08 Javascript
node.js通过url读取文件
2020/10/16 Javascript
ant-design-vue 时间选择器赋值默认时间的操作
2020/10/27 Javascript
python中正则表达式的使用详解
2014/10/17 Python
Python中遍历字典过程中更改元素导致异常的解决方法
2016/05/12 Python
深入理解Python中的*重复运算符
2017/10/28 Python
查看django执行的sql语句及消耗时间的两种方法
2018/05/29 Python
pytorch中tensor的合并与截取方法
2018/07/26 Python
python全栈要学什么 python全栈学习路线
2019/06/28 Python
python基于Selenium的web自动化框架
2019/07/14 Python
Python依赖包整体迁移方法详解
2019/08/15 Python
Python greenlet和gevent使用代码示例解析
2020/04/01 Python
css3 box-sizing属性使用参考指南
2013/01/08 HTML / CSS
css3通过scale()、rotate()实现放大、旋转
2020/03/19 HTML / CSS
css3实现背景模糊的三种方式(小结)
2020/05/15 HTML / CSS
英国家庭、花园、汽车和移动解决方案:Easylife Group
2018/05/23 全球购物
意大利单身交友网站:Meetic
2020/07/12 全球购物
软件测试面试题
2014/01/05 面试题
体育课外活动总结
2014/07/08 职场文书
通知函的格式
2015/04/27 职场文书
食品药品安全责任书
2015/05/11 职场文书
电影圆明园观后感
2015/06/03 职场文书
2016大学军训心得体会
2016/01/11 职场文书
解决pytorch读取自制数据集出现过的问题
2021/05/31 Python
MySQL的存储函数与存储过程的区别解析
2022/04/08 MySQL