编写自己的一个ajax库。
来源:互联网 发布:软件详细设计模板 java 编辑:程序博客网 时间:2024/06/02 04:31
ajax用途可以用来读取后台数据,实现分页等等功能。
ajax不难,今天我们来写一个属于自己的一个ajax库。
知识点:
1. 编写 Ajax 库,AJAX 请求步骤
2. 创建 ajax 对象:XMLHttpRequest
3. 在 IE6 下兼容 XMLHttpRequest 的解决方案:ActiveXObject("Microsoft.XMLHTTP")
4. window属性与变量的关系
5. 用 window 属性来处理 IE6 的兼容性问题
6. 连接服务器:oAjax.open()
7. 同步与异步的区别
8. 发送请求:oAjax.send()
9. 接收返回:oAjax.onreadystatechange、readyState 属性、oAjax.status、oAjax.responseText
10. 封装 AJAX 函数
代码:
function ajax(url, fnSucc, fnFaild){//1.创建ajax对象var oAjax=null;if(window.XMLHttpRequest){oAjax=new XMLHttpRequest();}else{oAjax=new ActiveXObject("Microsoft.XMLHTTP");}//2.连接服务器//open(方法, url, 是否异步)oAjax.open('GET', url, true);//3.发送请求oAjax.send();//4.接收返回//OnReadyStateChangeoAjax.onreadystatechange=function (){if(oAjax.readyState==4){if(oAjax.status==200){//alert('成功:'+oAjax.responseText);fnSucc(oAjax.responseText);}else{if(fnFaild){fnFaild();}}}};}
0 (未初始化)还没有调用open()方法
1 (载入)已调用send()方法,正在发送请求
2 (载入完成)send()方法完成,已收到全部响应内容
3 (解析)正在解析响应内容
4 (完成)响应内容解析完成,可以在客户端调用了
ajax数据类型:
json , txt , xml
用法:写一个简单的分页:
代码如下:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>分页</title></head><body> <script src="ajax.js"></script> <script> window.onload = function(){ var ul = document.getElementById("ul1"); var oa = document.getElementsByTagName("a"); //循环三个标签 for ( var i = 0; i<oa.length; i++){ //索引 oa[i].index = i; oa[i].onclick = function(){ // 读取数据 ajax( "page"+ ( this.index + 1)+ ".txt", function( str ){ var pageData = eval( str ); //清空页数内容 ul.innerHTML = ''; for ( var i =0; i < pageData.length; i++){ //创建li元素 var li = document.createElement("li"); li.innerHTML = "<em>"+pageData[i].user + "</em>"+pageData[i].pass; ul.appendChild(li); } }); } } }; </script> <ul id="ul1"> </ul> <a href="javascript:;">1</a> <a href="javascript:;">2</a> <a href="javascript:;">3</a></body></html>
阅读全文
1 0
- 编写自己的一个ajax库。
- 用C编写一个自己的string库文件_01
- 自己编写的一个简单的计算器
- 为自己的属性编写一个编辑器
- 我自己编写的一个tab
- ios 自己编写的一个弹球小游戏
- 自己编写一个windows的桌面
- 如何编写一个自己的校验框架
- 编写一个自己的Servlet(一)
- 自己编写的一个截图工具
- 用AJAX编写一个简单的相册
- 用AJAX编写一个简单的相册
- 用AJAX编写一个简单的相册
- 用AJAX编写一个简单的相册
- 用AJAX编写一个简单的相册
- 自己写的一个ajax轮询
- 自己写的一个ajax联动
- 自己编写一个struts
- 洛谷1081/codevs1199 开车旅行 链表,倍增,模拟
- poj3867(2-sat)
- JVM垃圾收集策略
- 项目搭建连接redis
- Django中生成二维码
- 编写自己的一个ajax库。
- tensorflow学习(一):Reduction以及tesorflow数学操作函数查找地址
- GNSS接收机通道数
- C++下载指定Url网络地址上的文件-Windows Api
- Wannafly模拟赛3-F 监视任务(贪心+线段树区间更新)
- Python快速笔记
- FCM聚类算法
- [Spring Cloud] Eureka 的自我保护模式及相关问题
- js 递归调用无返回值的问题