|
Ajax
什么是Ajax？
*允许浏览器与服务器通信而无须刷新当前页面的技术。Ajax技术(异步)
同步交互和异步交互的区别？
1）同步是指：发送方发出数据后，等接收方发回响应以后才发下一个数据包的通讯方 式。
2）异步是指：发送方发出数据后，不等接收方发回响应，接着发送下个数据包的通讯 方式。
例子：普通B/S模式(同步)AJAX技术(异步)
*同步：提交请求->等待服务器处理->处理完毕返回这个期间客户端浏览器不能干 任何事
*异步:请求通过事件触发->服务器处理（这时浏览器仍然可以作其他事情）->处理 完毕。
Ajax模型比传统的web模型好在哪里？
1）页面数量少，性能高
2）对带宽的要求低
3）对服务器端造成的压力小
除了Ajax技术之外，还有哪些技术可以进行异步交互？
1）Flash技术(问题：性能不好;不是浏览器原生)
2）框架：如果使用一组框架构造了一个网页，可以只更新其中一个框架，而不必惊动 整个页面
3）iframe：Ajax技术出现之前，存在异步交互，实现异步交互的技术就是iframe问题： 实现异步交互之后，处理完毕后，加载的效果依旧还在。
4）XMLHttpRequest：该对象是对JavaScript的一个扩展，可使网页与服务器进行通信。 是创建Ajax应用的最佳选择。实际上通常把Ajax当成XMLHttpRequest对象的代名词
Ajax的缺陷：
1）Ajax技术并不适用于任何场景
2）大量使用javascript引擎和Ajax引擎，取决于浏览器的支持
3）客户端与服务器端交互时，不刷新当前页面。使浏览器的前进和后退功能失效，用 户经常搞不清楚，数据是新的还是旧的。需单独地拿出一个地方，专门进行提示。
4）对流媒体的支持不太好
扩：AJAX包含的技术：面试题
*Ajax是不是一个技术？不是
*包含哪些技术：Javascript、XHTML和CSS、DOM、XML和XMLHttpRequest
Ajax的工作原理
Ajax的核心是JavaScript对象XmlHttpRequest。
该对象在InternetExplorer5中首次引入，它是一种支持异步请求的技术。简而言之， XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。
1）AJAX采用异步交互过程。AJAX在用户与服务器之间引入一个中间媒介，从而消除了
网络交互过程中的处理—等待—处理—等待缺点。
2）用户的浏览器在执行任务时即装载了AJAX引擎。AJAX引擎用JavaScript语言编写，
通常藏在一个隐藏的框架中。它负责编译用户界面及与服务器之间的交互。
3）AJAX引擎允许用户与应用软件之间的交互过程异步进行，独立于用户与网络服务器
间的交流。现在，可以用Javascript调用AJAX引擎来代替产生一个HTTP的用户动作
内存中的数据编辑、页面导航、数据校验这些不需要重新载入整个页面的需求可以交
AJAX来执行。
详细代码：
*创建XMLHttpRequest对象：有些笔试题，要求写出创建的代码！
| functionajaxFunction(){ varxmlHttp; try{//Firefox,Opera8.0+,Safari xmlHttp=newXMLHttpRequest(); }catch(e){ try{//InternetExplorer xmlHttp=newActiveXObject("Msxml2.XMLHTTP"); } catch(e){ try{ xmlHttp=newActiveXObject("Microsoft.XMLHTTP"); }catch(e){} } } returnxmlHttp; } |
*注册监听
| *使用XMLHttpRequest对象的onreadystatechange属性：监听服务器端的通信状态 *使用XMLHttpRequest对象的readyState属性：获取服务器端的通信状态 0代表未初始化。还没有调用open方法 1代表正在加载。open方法已被调用，但send方法还没有被调用 2代表已加载完毕。send已被调用。请求已经开始 3代表交互中。服务器正在发送响应 4代表完成。响应发送完毕 *最终关注的状态为"4"，响应完毕 *使用XMLHttpRequest对象的status属性：获取响应首部信息中的三位状态码： 404没找到页面(notfound) 403禁止访问(forbidden) 500内部服务器出错(internalserviceerror) 200一切正常(ok) 304没有被修改(notmodified)(服务器返回304状态，表示源文件没有被修改) |
*客户端与服务器端之间建立连接:
| *使用的是XMLHttpRequest对象的open(method,url,asynch)方法 *请求类型是GET方式 *method：请求类型，为"get" *url：请求路径，可以是绝对路径或相对路径 *asynch：表示是否异步加载，true是默认值(异步) *请求类型是POST方式 *method：请求类型，为"post" *url：请求路径，可以是绝对路径或相对路径 *asynch：表示是否异步加载，true是默认值(异步) *需要设置请求首部信息： xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); |
*向服务器端发送请求数据：
| *使用XMLHttpRequest对象的send()方法： *如果请求类型是GET方式的话，send()方法发送请求数据，服务器端不能接收 *可以将要发送的请求数据，放置在请求连接的后面 *该步骤不能省略，写法：send(null) *如果请求类型是POST方式的话，send()方法发送请求数据，服务器端可以接收 *必须要设置请求首部信息的内容：Content-Type |
*实现Ajax的六个步骤是什么？
*创建XMLHttpRequest对象
*建立连接
*发送请求
*注册监听
*获取服务器端的通信状态
*获取服务器端的响应状态码
*使用Ajax异步交互时，客户端接收服务器端的响应数据：
*使用XMLHttpRequest对象的responseText属性：
接收的格式是文本内容或HTMlL代码
*客户端接收服务器端的响应时，数据格式：XML
| *服务器端： *设置响应首部信息："Content-Type"为"text/xml" response.setContentType("text/xml;charset=utf-8"); *手动构建的xml格式数据：真实开发不可能这样做 *构建的数据格式是xml格式，是String类型 *数据来源于查询数据库，封装在javabean、List、Map和Array集合等 *如何将javabean、List、Map和Array集合内容转换成xml数据格式？ *xstream工具包： *xstream-1.4.4.jar包：核心包 *xpp3_min-1.1.4c.jar包：必要依赖包 *处理逻辑： //1创建一个XStream的实例 XStreamxStream=newXStream(); /* *2为javabean起别名(默认是包结构) * *利用XStream的实例alias(Stringname,Classtype) * *name：别名 * *type：指定为哪个javabean其别名 */ xStream.alias("province",Province.class); xStream.alias("city",City.class); /* *3将javabean的属性作为转换后的xml格式的标签属性使用 * *利用XStream的实例useAttributeFor(Classtype,StringfieldName) * *type：指定要使用哪个javabean的属性 * *fieldName：指定对应javabean的属性名 */ xStream.useAttributeFor(Province.class,"provinceId"); xStream.useAttributeFor(Province.class,"provinceName"); xStream.useAttributeFor(City.class,"cityId"); xStream.useAttributeFor(City.class,"cityName"); //4利用XStream的toXML()方法，将javabean转换成xml数据格式 Stringxml=xStream.toXML(province1); System.out.println(xml); *客户端： *使用XMLHttpRequest对象的responseXML属性：接收的格式是XML格式 *利用DOM解析XML格式数据 |
*第三种数据格式：json
定义：
1）是JavaScriptObjectNotation的缩写
2）是一种轻量级的数据交换格式。
特点：
1）易于人的阅读和编写
2）易于机器解析和生成
3）基于ECMA-262标准，采用完全独立于语言的文本格式。
数据格式和特点：
1）“名称/值”对的集合：类似于Map集合
*这种结构其实就是javascript对象的直接量定义方式
*是以"{}"开始和结束
*数据是以"key/value"形式
*多个数据之间，用","隔开
*访问形式：json.key或json['key']
2）值的有序列表：类似于数组
*javascript中具有Array类型，内建对象
*是以"[]"开始和结束的
*数据之间用","隔开
3）json数据格式：是浏览器原生支持
*元素值可具有的类型：string,number,object,array,true,false,null
*扩展：
*Map集合中嵌套数组结构
*数组结构中嵌套Map集合
*"key/value"格式和数组格式可以混合嵌套，而且无限嵌套下去
*客户端接收服务器端的响应时，数据格式：json
| *服务器端： *不需要设置响应首部信息 *构建的是String类型的json数据格式内容 *如何将javabean、List、Array和Map集合等转换成json数据格式？ *json-lib工具包： *json-lib-2.4-jdk15.jar：核心包 *必要依赖包： *commons-beanutils-1.8.3.jar *commons-collections-3.2.1.jar *commons-lang3-3.1-bin.zip *commons-lang-2.5.jar *commons-logging-1.1.1.jar *ezmorph-1.0.6.jar *morph-1.1.1.jar *morph-sandbox-1.1.1.jar *使用我们自己的工具类：JSONUtil *客户端： *接收服务器端响应的json数据格式： *使用XMLHttpRequest对象的responseText属性 *将其当做文本格式接收 *利用eval()函数将其转换成json数据格式： *调用eval()函数时，将要转换成的内容，用"()"进行包装：(假如传递的是"{}") *利用"()"将其包装，eval()函数会强行将其转化成json数据格式(object) *不用"()"将其包装，eval()函数会将其解释为一个空的语句块 |
小结：
数据格式(HTMLXMLJSON)
1）HTML
*优点：
*在客户端接收后，不需任何解析
*可读性比较好
*配合innerHTML属性使用，效率好
*缺点：
*更新一个页面多个部分时，使用Ajax异步交互，HTML不合适
2）XML
*优点：
*XML是一种通用的数据格式。
*XML格式是自定义标签名
*DOM可以解析XML，不需要第三方的工具
*缺点：
*DOM解析复杂的XML时，代码量比较大，性能低
*服务器端，必须设置正确的响应首部信息："Content-Type"为 "text/xml"
*如果服务器端构建的xml数据格式不正确，客户端接收是不报错 的！
3）JSON
*优点：
*json更专注数据内容
*服务器端构建json数据格式时，使用默认设置即可
*客户端解析json数据格式，DOM解析json数据格式
*缺点：
*eval()函数：有可能转换不成功
扩展内容：反向Ajax
定时发送原理图：
按需发送原理图： （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
