原生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实现先淡出再折叠收起的动画效果
Aug 07 Javascript
3种js实现string的substring方法
Nov 09 Javascript
AngularJS指令详解及示例代码
Aug 16 Javascript
浅谈Vue.js
Mar 02 Javascript
React学习笔记之事件处理(二)
Jul 02 Javascript
浅谈在vue项目中如何定义全局变量和全局函数
Oct 24 Javascript
parabola.js抛物线与加入购物车效果的示例代码
Oct 25 Javascript
Vue-router 切换组件页面时进入进出动画方法
Sep 01 Javascript
create-react-app使用antd按需加载的样式无效问题的解决
Feb 26 Javascript
vue-router 起步步骤详解
Mar 26 Javascript
Vue实现拖放排序功能的实例代码
Jul 08 Javascript
node.js使用http模块创建服务器和客户端完整示例
Feb 10 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 字符过滤类,用于过滤各类用户输入的数据
2009/05/27 PHP
php中计算中文字符串长度、截取中文字符串的函数代码
2011/08/09 PHP
PHP对象Object的概念 介绍
2012/06/14 PHP
基于php权限分配的实现代码
2013/04/28 PHP
php用正则表达式匹配中文实例详解
2013/11/06 PHP
php微信开发之图片回复功能
2018/06/14 PHP
Laravel核心解读之异常处理的实践过程
2019/02/24 PHP
简单的JS多重继承示例
2008/03/13 Javascript
Extjs Ajax 乱码问题解决方案
2009/04/15 Javascript
BootStrap的table表头固定tbody滚动的实例代码
2016/08/24 Javascript
jquery实现下拉框多选方法介绍
2017/01/03 Javascript
基于vue.js实现的分页
2018/03/13 Javascript
基于Vue的延迟加载插件vue-view-lazy
2018/05/21 Javascript
vue头部导航动态点击处理方法
2018/11/02 Javascript
React Native中Mobx的使用方法详解
2018/12/04 Javascript
使用react context 实现vue插槽slot功能
2019/07/18 Javascript
在 Vue 中编写 SVG 图标组件的方法
2020/02/24 Javascript
Layer UI表格列日期格式化及取消自动填充日期的实现方法
2020/05/10 Javascript
微信小程序实现选项卡滑动切换
2020/10/22 Javascript
简述Python中的进程、线程、协程
2016/03/18 Python
详解Python多线程
2016/11/14 Python
解决安装python库时windows error5 报错的问题
2018/10/21 Python
python turtle库画一个方格和圆实例
2019/06/27 Python
python读写文件write和flush的实现方式
2020/02/21 Python
python 对xml解析的示例
2021/02/27 Python
澳大利亚领先的睡衣品牌:Peter Alexander
2016/08/16 全球购物
中国最大的团购网站:聚划算
2016/09/21 全球购物
俄罗斯购买自行车网站:Vamvelosiped
2021/01/29 全球购物
澳大利亚女装精品店:Alannah Hill
2020/07/29 全球购物
日期和时间问题
2015/01/04 面试题
中学生寄语大全
2014/04/03 职场文书
党员教师群众路线思想汇报范文
2014/10/28 职场文书
品德与社会教学反思
2016/02/24 职场文书
公文写作:工伤事故分析报告怎么写?
2019/11/05 职场文书
JavaScript执行机制详细介绍
2021/12/06 Javascript
CSS3实现360度循环旋转功能
2022/02/12 HTML / CSS