原生JS简单实现ajax的方法示例
本文实例讲述了原生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事件并没有使得页面刷新，就偷偷的获取了html" target="_blank">服务器端的数据，服务端的数据也可以是从数据库里读取出来的，获取数据后，Ajax还可以进行一些动作的处理。
一切都在悄无声息中。
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript中ajax操作技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
-
本文向大家介绍原生AJAX封装的简单实现，包括了原生AJAX封装的简单实现的使用技巧和注意事项，需要的朋友参考一下 回归下原生js，网上看到的AJAX封装，遂拿来改改，不知还有何弊端，望指出！ 假设一个需求，后端要求传入两个数字n1、n2，然后返回总和。 当其中一个参数为空或者不是数字时，返回：{"status":"0", "msg":"参数有误！"} 当正确的时候，返回：{"status":"1
-
本文向大家介绍JS二叉树的简单实现方法示例，包括了JS二叉树的简单实现方法示例的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了JS二叉树的简单实现方法。分享给大家供大家参考，具体如下： 今天学习了一下 二叉树的实现，在此记录一下 简单的二叉树实现，并且实现升序和降序排序输出 更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript数据结构与算法技巧总结》、《J
-
本文向大家介绍JS简单实现数组去重的方法示例，包括了JS简单实现数组去重的方法示例的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了JS简单实现数组去重的方法。分享给大家供大家参考，具体如下： 运行效果图如下： 出现的问题，新数组中值和index值对应。有局限性。虽然可以从小到大排列。 PS：这里再为大家提供几款去重复工具供大家参考使用： 在线去除重复项工具： http://tools.jb
-
本文向大家介绍JS原生轮播图的简单实现(推荐)，包括了JS原生轮播图的简单实现(推荐)的使用技巧和注意事项，需要的朋友参考一下 哈喽！我的朋友们，最近有一个新项目。所以一直没更新！有没有想我啊！！ 今天咱们来说一下JS原生轮播图！ 话不多说： 直接来代码吧：下面是CSS部分： HTML部分！ 接下来是JS部分： 就是这么简单！你学会了吗？？ 以上这篇JS原生轮播图的简单实现(推荐)就是小编分享给大
-
本文向大家介绍用原生JS对AJAX做简单封装的实例代码，包括了用原生JS对AJAX做简单封装的实例代码的使用技巧和注意事项，需要的朋友参考一下 首先，我们需要xhr对象。这对我们来说不难，封装成一个函数。 然后，我们来写核心函数。 最后，说明一下此函数的用法。 以上这篇用原生JS对AJAX做简单封装的实例代码就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持呐喊教程。
-
本文向大家介绍原生JS实现简单放大镜效果，包括了原生JS实现简单放大镜效果的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了原生JS实现放大镜效果的具体代码，供大家参考，具体内容如下 效果图：（演示） 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。