这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了原生 javascript 实现的 ajax 异步封装功能, 结合完整实例形式分析了原生 javascript 实现的 ajax 异步交互函数与相应的使用方法, 需要的朋友可以参考下
本文实例讲述了原生 javascript 实现的 ajax 异步封装功能。分享给大家供大家参考,具体如下:
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>
- 无标题文档
- </title>
- <script type="text/javascript" src="Scripts/jquery.js">
- </script>
- </head>
- <style>
- * { margin: 0px; padding: 0px; } #box { float: left; width: 500px; } #left
- { float: left; background: #090; width: 100px; height: 100px; } #right
- { background: #C60; width: 100px; height: 100px; float: left; } #box2 {
- width: 180px; height: 100px; } html>body #box2 { width: auto; height: auto;
- min-width: 180px; min-height: 100px; }
- </style>
- <body>
- <div id="box">
- <div id="left">
- 点击我 看效果!
- </div>
- <div id="right">
- fffeeee
- </div>
- </div>
- <div style="width:100px; height:100px; background:#969; float:left;" id="dd">
- dddd
- </div>
- <script>
- // 异步请求封装 IE6即以上浏览器
- // ajax(url,fnSucc,selectID,fnFaild)
- //url 请求地址
- //fnSucc 异步请求后的内容处理函数
- //fnFaild 请求失败处理函数
- function ajax(url, fnSucc, fnFaild) {
- //1.创建Ajax对象
- //非IE6
- var oAjax;
- if (window.XMLHttpRequest) //不会报错,只会是undefined
- {
- oAjax = new XMLHttpRequest();
- } else
- //iE6 IE5
- {
- oAjax = new ActiveXObject("Microsoft.XMLHTTP");
- }
- //alert(oAjax);
- //2.连接服务器
- //open(方法,文件名,异步传输)
- oAjax.open("get", url, true); //制止缓存
- //3.发送请求
- oAjax.send();
- //4.接收返回值 和服务器通讯的时候此事件发生
- oAjax.onreadystatechange = function() {
- //oAjax.readyState //浏览器和服务器,进行到哪一步了 异步握手过程
- if (oAjax.readyState == 4) //读取完成(可能文件不存在)
- {
- if (oAjax.status == 200 || oAjax.status == 304) //请求成功 304即使浏览器缓存了也返回数据
- {
- fnSucc(oAjax.responseText);
- //alert("成功"+oAjax.responseText);
- } else {
- if (fnFaild) //fnFaild传进来时
- {
- fnFaild(oAjax.status);
- }
- //alert("失败:"+oAjax.status);//status为404
- }
- }
- }
- }
- window.onload = function() {
- var oBtn = document.getElementById("left");
- oBtn.onclick = function() {
- ajax("http://28967904.jsp.jspee.cn/ext/singlePage/list/json-1-1-20",
- function(str) {
- var da = JSON.parse(str); //JSON数据解析
- alert(da.totalRow)
- },
- function(erorr) {
- console.log('请求出错:' + erorr);
- })
- }
- }
- </script>
- </body>
- </html>
希望本文所述对大家 JavaScript 程序设计有所帮助。
来源: http://www.phperz.com/article/17/0523/330669.html