原生javascript的ajax
2016-03-12 10:27
543 查看
什么是ajax技术
AJAX 指的是异步 JavaScript 和 XML(Asynchronous JavaScript and XML),主要还是javascript。详细的介绍可以百度谷歌,简单地说就是在网页不刷新(即地址栏的url是不变的)的情况下,实现网页部分内容的更新比如现在很多的登陆都是使用了ajax,如网易首页(http://www.163.com/),鼠标移到登陆处,你填写完表单的账号密码提交,他不会刷新,但上方已经出现了你的用户名,你已经成功登陆了,具体可去体验一番
代码实现
核心代码:my_ajax.js
这个函数有三个参数,第一个是需要请求的url,第二个是成功后的回调函数,第三个是失败后的回调函数具体代码的解释看注释(那个XMLHttpRequest是当年微软搞出来的,应该比较差,不流行)
function ajax(url, fnSucc, fnFail){ //1.创建Ajax对象 //非IE6 if (window.XMLHttpRequest) { var oAjax = new XMLHttpRequest(); }else{ //IE6 var oAjax = new ActiveXObject("Microsoft.XMLHTTP"); } // alert(oAjax); //2.连接服务器----open(方法, 文件名[url], 异步传输[boolean]) //boolean为true --》同步 一件一件事情来 //boolean为true --》异步 多件事情一起干,无需等待服务器的响应,而是:在等待服务器响应时执行其他脚本,当响应就绪后对响应进行处理,使用ajax,必须设置为true oAjax.open("GET", url, true); // 3.发送请求 oAjax.send(); // 4.接受服务器返回 oAjax.onreadystatechange = function(){ // oAjax.readyState();//浏览器和服务器进行到哪一步了 // 0 (未初始化) // 对象已建立,但是尚未初始化(尚未调用open方法) // 1 (初始化) // 对象已建立,尚未调用send方法 // 2 (发送数据) // send方法已调用,但是当前的状态及http头未知 // 3 (数据传送中) // 已接收部分数据,因为响应及http头不全,这时通过responseBody和responseText获取部分数据会出现错误, // 4 (完成) // 数据接收完毕,此时可以通过通过responseBody和responseText获取完整的回应数据 if (oAjax.readyState == 4) { //读取完成 if (oAjax.status == 200) { //200 OK,成功 fnSucc(oAjax.responseText); //调用成功的回调函数 }else{ if (fnFail) { fnFail(oAjax.status); //调用失败的回调函数 </span> }; } }; }; }
简单实践
在当前目录新建一个html文件,跟着直接用script标签引入进来就可以,调用请看下面<!-- 步骤 1.创建Ajax对象 2.连接到服务器 3.发送请求(告诉服务器要什么文件) 4.接收返回值 --> <!DOCTYPE html> <html> <head> <title></title> </head> <script type="text/javascript" src="my_ajax.js"></script> <body> <input id="btn" type="button" value="读取"> </body> <script> var btn = document.getElementById('btn'); btn.onclick = function(){ ajax("a.txt", function(str){ alert(str); }); } </script> </html>我们再在当前目录新建a.txt
实验结果:
我还要说
当然实际中我们不会去请求一个静态文件,我们会去请求php,asp,jsp等动态文件,还可以在url后加上get参数(如?content=news&num=10,就是告诉那个我们要请求文件,我要的是新闻,数量是10条),跟着那个文件就会去读取数据库的10条新闻,一般以json的格式打印出来,跟着我们的ajax函数就会抓取我们请求的.php文件等打印出来的新闻数据,跟着我们就可以根据这些数据,利用js更新我们的当前页面的新闻,因为js可以dom操作,具体百度,但一般都是用jquery库比较方便简单,下篇我应该会写我常用的jquery库的ajax
相关文章推荐
- 利用原生Javascript实现计算器(未完待续)
- 我理解的 JavaScript 作用域
- ExtJS学习(三)Grid表格
- ExtJS学习(三)Grid表格
- web应用和web.xml
- js错误之js初步认识之define详解
- js获取cookie值
- jqurey_servlet_json流程
- ExtJS学习(二)Ext组件模型
- ExtJS学习(二)Ext组件模型
- javascript笔记:javascript的关键所在---作用域链《转载》
- 关于编写性能高效的javascript事件的技术《转载》
- 谈谈javascript语法里一些难点问题(二)《转载》
- 利用JS 直接调用执行OC代码,非提取URL
- web浏览器中的javascript 1
- ExtJS学习(一)Ext自定义类实现
- ExtJS学习(一)Ext自定义类实现
- 史上最短小精悍的javascript编写的俄罗斯方块游戏,仅仅60行代码
- JS在文本框光标处插入文本
- 原生 javaScript 百叶窗 效果的实现及原理介绍