【AJAX】AJAX小结(二)
来源:互联网 发布:mac最好用的输入法 编辑:程序博客网 时间:2024/05/29 14:15
前言
这次总结的是ajax技术不是asp.net ajax框架。ajax与传统的web开发的区别在于ajax只需在一个页面操作不用页面间的跳转,其实就是异步和局部刷新。以下主要对XMLHttpRequest对象,DOM,javaScript的三方面进行总结。
理解
(一)xmlHttpRequest
XMLHttpRequest的五步使用法:
1. 建立request连接
2. 服务端准备回调方法
3. 客户端设置参数
4. 开始交互
5. 检查结果
1.创建xmlhttprequest对象
if(window.XMLHttpRequest){ //IE7,IE8,FireFox,Mozilla,Safari,Opera xmlhttp = new XMLHttpRequest(); ...}else if(window.ActiveXObject){ //IE6,IE5,IE5.5 ...}if(xmlhttop == undefind || xmlhttp == null){ alert("当前浏览器不支持创建XMLHttpRequest对象"); return;}
2.注册回调方法
xmlhttp.onreadystatechange = callback;
3.设置和服务器端交互的响应参数(get)
var userName = document.getElementById("UserName").value;//true表示异步交互xmlhttp.open("GET","AJAX?name=" + userName, true);
4.设置向服务层发送的数据,启动和服务器端的交互(get)
xmlhttp.send(null);
3.设置客户端参数(post)
xmlhttp.open("POST","AJAX",true);//post方式交互所需要增加的代码xmlhttp.setRequestHeader("Content-Type","application/x-ww-form-urlencoded");
4.开始交互(post)
xmlhttp.send("name=" + userName);
5.判断和服务端的交互是否完成,还要判断服务端是否正确返回了数据
function callback(){ if(xmlhttp.readyState == 4){ //表示和服务端的交互已经完成 if(xmlhttp.status == 200){ //表示服务器的响应代码是200,正确返回了数据 var message = xmlhttp.responseText; //纯文本数据的接受方法 //使用的前提是,服务器端需要设置content-type为text/xml //xml数据对应的DOM对象的接受方法 // var domXml = xmlhttp.responseXML; //向div标签中填充文本内容的方法 var div = document.getElementById("message"); div.innerXML = message;}}}
(二) DOM
DOM(Document Object Model)文档对象模型, 可以使我们在ajax中通过JavaScript代码对html和xml数据进行dom方式的操作,从而做到页面的动态修改更新和数据的提取处理。
XPATH(XML Path Language)
分三种:
1.查找元素节点 用@
//关键是先找到包含属性节点的元素节点//绝对路径var isdn1 = selectNodes(rootElement,"/books/book/@isdn");//相对路径var isdn2 = selectNodes(rootElement, "book/@isdn");//全文搜索var isdn3 = selectNodes(rootElement, "//books/book/@isdn");
2.查找文本节点 用text()
//关键是找到包含文本节点的那个元素节点var text1 = selectNodes(rootElement,"/books/book/name/text()");
3.有条件的查找元素节点
var book1 = selectNodes(rootElement,"/books/book[@isdn]");
(三) javaScript
1.对数组的操作
var array1 = new Array(1,2,3);var array2 = [2,3,4];
1.添加、删除(从尾部开始)
array1.push(4,5,[6,7]);array1.pop();
2.添加、删除(从头开始)
array1.unshift(100,101);array1.shift();
3.添加删除(任意位置)
var spliceArray1 = arrary1.splice(4,2);//从下标为4的元素开始删除2个var spliceArray1 = arrary1.splice(4);//从下标为4的元素开始删除直到末尾的所有元素array1.splice(1,0,100,101);//从小标为1的元素开始删除0个元素,并在下标为1的元素前添加100,101
4. 不改变原数组的基础上追加
//concat 用于数组的连接或合并,原数组内容不会改变var array3 = arrary1.concat(7,8);
5.把各元素连接成字符串
//join,将元素按照指定的分隔符连接成字符串输出var array3 = array1.join("");//把元素按字符串输出 121212var array3 = array1.join("+");//1+2+1+2+1+2
6. 查部分元素
//slice,返回当前数组的子数组,原数组内容不变var array3.array1.slice(0,3);//从小标0开始到小标3之前的元素返回成一个新的数组,注意下标3的元素取不到var array3.array1.slice(4);//从下标4开始到末尾var array3 = array1.slice(-2,-1);//从倒数第二个到倒数第一个
7.查出排好序的元素
array1.sort();//按字母序升序array1.sort(function(a,b){ return a - b;});//按数值大小升序排列。如果返回的是一个负数,则a就出现在b的前面
8.查出倒序的元素
array1.reverse();
2.json拼接示例
builder.append("({");Iterator<String> iter = stocks.keySet().iterator();//iterator是迭代器while(iter.hasNext()){ String sid = iter.next(); Stock stock =Stocks.get(sid); builder.append(sid).append(":{yes:").append(stock.getYesterday()).append("}")}builder.append("})");
3.eval 反射
//反射创建对象的方法//第一个参数是类名//第二个参数是创建对象需要的所有参数组成的数组function reflect(className,args){ try{ //如何把字符串类型的className转换成对应的一个函数 var rClass = eval(className); //创建对象需要的所有参数在一个数组里面["1","2"] //最终我们调用new创建的时候,参数表的写法应该("1","2") var oargs = args.join(","); var obj = new rClass(oargs); return obj;}catch(e){ return null;}}
结语
什么是AJAX? Asynchronous, JavaScript, And XML的首字母简写。其实,AJAX就是对JavaScript 和 XML的综合再添上异步。在AJAX技术涉及的这三块中,DOM是关于html的也算是关于XML的吧,XMLHttp|Request是关于XML的,再加上javascript这一块,显而易见,ajax没有自己的东西。
- 【AJAX】AJAX小结(二)
- 【AJAX】ASP.NET AJAX小结(一)
- AJAX小结
- AJAX 小结
- AJAX小结
- ajax 小结
- Ajax小结
- Ajax小结
- ajax小结
- ajax小结
- AJAX小结
- ajax小结
- [学习小结]Ajax小结
- Ajax基础(二)
- Ajax(二)
- Ajax入门(二)
- Ajax学习(二)
- Ajax(二)
- 编程十条诫律
- Xcode报错:Cannot synthesize weak property in file using manual reference counting
- scanner二次输入
- Maven生成可以直接运行的jar包的多种方式
- 第一章 初始大数据
- 【AJAX】AJAX小结(二)
- 山东驴友和梁定郊小兄弟一起川藏游
- 数据结构实例<三>(匹配链表所有元素删除后并返回新的链表)入门
- Senparc.Weixin.MP 微信公众平台开发教程(2)自定义菜单
- java 可变参数的问题 String... params
- SystemUI之USB2(Framework UEvent -> SystemUI)
- Ext获取各个值
- 千里行创始人梁闪贿的人生
- centos增加环境变量