原生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 相关文章推荐
取得一定长度的内容,处理中文
Dec 20 Javascript
Chrome Form多次提交表单问题的解决方法
May 09 Javascript
鼠标移到div,浮层显示明细,弹出层与div的上边距左边距重合(示例代码)
Dec 14 Javascript
jQuery实现下拉框左右选择的简单实例
Feb 22 Javascript
javascript获取和判断浏览器窗口、屏幕、网页的高度、宽度等
May 08 Javascript
浅谈Javascript数组索引
Jul 29 Javascript
原生JS和jQuery版实现文件上传功能
Apr 18 Javascript
微信小程序之MaterialDesign--input组件详解
Feb 15 Javascript
Angular4实现动态添加删除表单输入框功能
Aug 11 Javascript
Vue v2.4中新增的$attrs及$listeners属性使用教程
Jan 08 Javascript
基于vue,vue-router, vuex及addRoutes进行权限控制问题
May 02 Javascript
js循环map 获取所有的key和value的实现代码(json)
May 09 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
Discuz 模板语句分析及知识技巧
2009/08/21 PHP
从零开始学YII2框架(四)扩展插件yii2-kartikgii
2014/08/20 PHP
js代码实现微博导航栏
2015/07/30 PHP
将PHP程序中返回的JSON格式数据用gzip压缩输出的方法
2016/03/03 PHP
详解配置 Apache 服务器支持 PHP 文件的解析
2017/02/15 PHP
php 多进程编程父进程的阻塞与非阻塞实例分析
2020/02/22 PHP
jQuery 表单验证扩展代码(二)
2010/10/20 Javascript
script标签属性type与language使用选择
2012/12/02 Javascript
Node.js安装教程和NPM包管理器使用详解
2014/08/16 Javascript
JavaScript函数的调用以及参数传递
2015/10/21 Javascript
AngularJS实现单独作用域内的数据操作
2016/09/05 Javascript
AngularJS的ng Http Request与response格式转换方法
2016/11/07 Javascript
jQuery Easyui Treegrid实现显示checkbox功能
2017/08/08 jQuery
bootstrap table实现点击翻页功能 可记录上下页选中的行
2017/09/28 Javascript
浅谈node模块与npm包管理工具
2018/01/03 Javascript
vue获取元素宽、高、距离左边距离,右,上距离等还有XY坐标轴的方法
2018/09/05 Javascript
JavaScript实现拖拽盒子效果
2020/02/06 Javascript
基于Angular 8和Bootstrap 4实现动态主题切换的示例代码
2020/02/11 Javascript
[03:27]《辉夜杯》线下训练营 导师CU和海涛指点迷津
2015/10/23 DOTA
[04:05]TI9战队采访 - Natus Vincere
2019/08/22 DOTA
跟老齐学Python之集合的关系
2014/09/24 Python
Python中字典创建、遍历、添加等实用操作技巧合集
2015/06/02 Python
python判断一个对象是否可迭代的例子
2019/07/22 Python
Python 读取有公式cell的结果内容实例方法
2020/02/17 Python
HTML5几个设计和修改的页面范例分享
2015/09/29 HTML / CSS
澳大利亚家庭花园和DIY工具网店:VidaXL
2019/05/03 全球购物
个性与发展自我评价
2014/02/11 职场文书
运动会通讯稿150字
2014/02/15 职场文书
活动总结格式
2014/08/30 职场文书
乡镇领导干部个人对照检查材料思想汇报
2014/09/23 职场文书
教师党员个人自我剖析材料
2014/09/29 职场文书
2014年财务科工作总结
2014/11/11 职场文书
公司感谢信范文
2015/01/22 职场文书
2015年社区关工委工作总结
2015/04/03 职场文书
医务人员岗前培训心得体会
2016/01/08 职场文书