监视 Response 的状态通过回调函数—监视浏览器的状态 req.onreadystatechange = callback; // 指定回调函数 操纵返回的数据 req.responseText req.responseXML function sendRequest(callback, url) { // branch for native XMLHttpRequest object if (window.XMLHttpRequest) { req = new XMLHttpRequest(); // 创建 XMLHttpRequest req.onreadystatechange = callback; // 指定回调函数 req.open(“GET”, url, true); // 建立请求 req.send(null); // 如有参数,则 method 必须是 post } // branch for IE/Windows ActiveX version else if (window.ActiveXObject) { req = new ActiveXObject(“Microsoft.XMLHTTP”); if (req) { …… // 同上 } } } function callback() { if (req.onreadystate == 4) { // 判断就绪状态 if (req.status == 200) { parseMessage(); // 接收返回的数据 } else { alert(“Not able to retrieve description” + req.statusText) ; } } else {} } function parseMessage() { var xmldoc = req.responseXML; // 获取返回的结果 var name = xmldoc.getElementByTagName(“author”); // 获取文件中 <author> 标记 var content = document.getElementById(“display”); // 获取网页中 <display> 标记 content.innerHTML = name; // 在网页中显示 }
23.
Ajax 实例 提示等待级联下拉框 Google suggest Slider (滑块) 提示等待: 在状态值不等于 4 时对 HTML 代码进行一些修改,让页面显示一些提示信息。 级联下拉框: 控件 B 的内容取决于控件 A 的内容,且控件 B 的内容需要根据控件 A 的内容再从服务器端获得相应数据。 在 A 的 onChange 事件发生时调用一个函数,创建 XMLHttpRequest 对象来和服务器进行交互,向服务器发送请求,参数为下拉框 A 中选定的内容。客户端在接收到服务器处理后的数据后,先对数据进行处理,再显示到下拉框 B 中。 滑块 -- 是一个可以随意拖动而改变相应值的控件 拖动按钮得到一个新的范围后,就创建一个 XMLHttpRequest 对象来和服务器进行交互,参数就是滑块当前指定范围的最小值和最大值。
Ajax 的安全问题 Ajax的安全问题和性能问题 JavaScript 和浏览器的安全性 客户端脚本语言(安全性问题) -- 当访问一个使用 Ajax 技术构建的 Web 应用时, Web 服务器会将一系列 JavaScript 脚本代码发送到每一个访问者的机器上,然后用户浏览器便会在本地执行这些代码 1). JavaScript 修改系统设置(注册表,格式化硬盘,恶意破坏) 2). IFrame 问题:网页中 IFrame 指定的元素可以从其他域加载网页并执行 HTML 代码,相当于嵌在网页内部的一个独立框架窗口,但不同域的 JavaScript 却不能互相访问。
26.
JavaScript 的性能问题(解释型语言) 1). 循环, 效率: while() better than for( ; ; ) better than for( in ) 查询散列键 2). 局部变量 ( 放在函数的堆栈中 ) 访问速度 better than 全局变量 3). 少用 eval ,使用 eval 相当于运行时再次调用解释引擎对内容进行解释运行。可使用 JavaScript 闭包实现模版代替 eval 函数。 4). 使用局部变量,减少对象查找(解释语言) var len = a.length; 5). s += a; better than s = s + a; s += a + b +c; better than s+=a; s+=b; s+=c; 6). 类型转换(弱类型), ( “” + ) > String() > .toString() > new String() 7). 使用直接量, var foo = { }; 解释引擎直接解释 > var foo = new Object(); 内部构造器 var reg = /…/; faster than var reg = new RegExp() 8). 对字符串进行的循环操作,如替换、查找,应优先使用正则表达式( C 语言写的 API ) 9). 复用或缓存以减少创建高级对象,如: Date 、 RegExp 10). 直接使用下标访问快于使用“ .” 11). 创建 DOM 节点:使用字符串直接写 HTML 语句来创建节点 效率低于 使用 document.createElement() 方法, 如果文档中存在现成的样板节点,可以使用 cloneNode() 来减少多次设置元素的属性。
倒排索引 文档 A: This is a dog B : This dog is a kind of animal 如右图 通过比较: 一般的索引结构建立的是一种“文档到单词”的映射关系, 而倒排索引建立的则是一种“单词到文档”的映射关系。 用户在进行检索时,都是输入关键字进行查询,如果使用一般的索引结构,在查询某一关键字时需要遍历所有索引,索引量大时,效率差。 1 B kind 1 kind B 1 dog B 1 B animal 1,1 A,B dog 出现次数 出现的文档 单词 倒排索引结构 1 animal B 1 dog A 出现次数 出现单词 文档编号 一般索引结构
构建 Query 按词条搜索– TermQuery Term term = new Term(“contents”, “java”); Query query = new TermQuery(term); BooleanQuery public void add(BooleanClause clause) RangeQuery public RangeQuery(Term lowerTerm, Term upperTerm, boolean inclusive) PrefixQuery public PrefixQuery(Term prefix) 多关键字搜索 -- PhraseQuery public void add(Term term) public void setSlop(int s) // Sets the number of other words permitted between words in //query phrase. If zero, then this is an exact phrase search. 相近词语的搜索 – FuzzyQuery 通配符搜索 – WildcardQuery // *, ? …… 解析用户输入字符串 -- QueryParser