原生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 学习笔记(四)
Dec 31 Javascript
JavaScript中yield实用简洁实现方式
Jun 12 Javascript
js去除重复字符串两种实现方法
Jan 09 Javascript
JS获取地址栏参数的小例子
Aug 23 Javascript
同域jQuery(跨)iframe操作DOM(实例讲解)
Dec 19 Javascript
JS实现仿京东淘宝竖排二级导航
Dec 08 Javascript
javascript arguments使用示例
Dec 16 Javascript
基于javascript实现浏览器滚动条快到底部时自动加载数据
Nov 30 Javascript
第七章之菜单按钮图标组件
Apr 25 Javascript
jquery css实现邮箱自动补全
Nov 14 Javascript
AngularJS 限定$scope的范围实例详解
Jun 23 Javascript
backbone简介_动力节点Java学院整理
Jul 14 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操作sqlserver关于时间日期读取的小小见解
2009/11/29 PHP
解析PHP中empty is_null和isset的测试
2013/06/29 PHP
PHP中怎样防止SQL注入分析
2014/10/23 PHP
php可应用于面包屑导航的迭代寻找家谱树实现方法
2015/02/02 PHP
php实现图片上传并利用ImageMagick生成缩略图
2016/03/14 PHP
php获取是星期几的的一些常用姿势
2019/12/15 PHP
PHP反射基础知识回顾
2020/09/10 PHP
屏蔽F1~F12的快捷键的js函数
2010/05/06 Javascript
js读取本地excel文档数据的代码
2010/11/11 Javascript
JS代码优化技巧之通俗版(减少js体积)
2011/12/23 Javascript
js 得到文件后缀(通过正则实现)
2013/07/08 Javascript
文本框文本自动补全效果示例分享
2014/01/19 Javascript
Array 重排序方法和操作方法的简单实例
2014/01/24 Javascript
Javscript删除数组中指定元素并返回新数组
2014/03/06 Javascript
禁止iframe脚本弹出的窗口覆盖了父窗口的方法
2014/09/06 Javascript
jquery插件推荐 jquery.cookie
2014/11/09 Javascript
JavaScript实现弹出子窗口并传值给父窗口
2014/12/18 Javascript
Javascript实现飞动广告效果的方法
2015/05/25 Javascript
详解JavaScript的Date对象(制作简易钟表)
2020/04/07 Javascript
AngularJS  双向数据绑定详解简单实例
2016/10/20 Javascript
JavaScript数组的5种迭代方法
2017/09/29 Javascript
浅谈vue单一组件下动态修改数据时的全部重渲染
2018/03/01 Javascript
vue组件之间通信实例总结(点赞功能)
2018/12/05 Javascript
python批量导出导入MySQL用户的方法
2013/11/15 Python
对于Python装饰器使用的一些建议
2015/06/03 Python
Python的Django框架中的Context使用
2015/07/15 Python
Python常用库推荐
2016/12/04 Python
python 实现读取一个excel多个sheet表并合并的方法
2019/02/12 Python
python requests证书问题解决
2019/09/05 Python
Python Socketserver实现FTP文件上传下载代码实例
2020/03/27 Python
CSS3 按钮边框动画的实现
2020/11/12 HTML / CSS
ECHT官方网站:男女健身服
2020/02/14 全球购物
红头文件任命书范本
2014/06/05 职场文书
2014年学校领导班子对照检查材料
2014/09/19 职场文书
2015年元旦主持词开场白
2014/12/14 职场文书
尊师重教主题班会
2015/08/14 职场文书