黑马程序员技术交流社区

标题: 自己的面试经历中ajax问的是比较多的，下面总结一下 [打印本页]

作者: 王文辉 时间: 2015-7-2 10:56
标题: 自己的面试经历中ajax问的是比较多的，下面总结一下
Ajax是一种不刷新整个页面便可与服务器通信的技术。

1，原理：在页面显示时，利用JS代码，在页面和服务器之间构建了一个中间媒介：Ajax引擎，它允许页面异步的动态的向服务器发送请求，然后接受响
应更新页面

2，应用场景：百度搜索框，谷歌地图，即时有效性验证

3，Ajax包含的技术
Ajax是多种技术的组合：Javascript,XHTML,CSS,DOM,XML和XMLHttpRequest
XML：用来携带信息
XHTML,CSS：用来标准化显示结果
DOM:实现动态显示和交互
XMLHttpRequest:异步数据读取
Javascript:总指挥，绑定的处理所有数据

4，XMLHttpRequest
1，创建方式不相同但使用方式相同

function createXmlHttpRequest(){
var xmlHttp;
try{ //Firefox, Opera 8.0+, Safari
s xmlHttp=new XMLHttpRequest();
}catch (e){
   try{ //Internet Explorer
   xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
   }catch (e){
   try{
      xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}catch (e){}
   }
   }
   return xmlHttp;
   }

2，可像桌面应用程序一样只进行数据层面的交互
3,XMLHttpRequest的方法
1，abort()  停止当前请求
2，getAllResponseHeaders
3,getResponseHeader("name");

4,open("method","url",isAsync)
1，为了避免缓存带来的影响，在url后面拼接当前日期字符串实现每次请求的不同
2，若单纯的只是想请求服务器数据时，使用method=GET，这时send(data)无效,并不能发送data，
不过可以在url携带一些参数
   当method=POST时，需要设置Content-type=application/x-www-form-urlencoded
,以告知服务器请求数据已使用URL编码
5,send(data)
6,setRequestHeader(name,value);

4,XMLHttpRequest的属性
1，onreadystatechange  状态改变的事件触发器，当赋值为一个函数时，每当XMLHttpRequest对象状态发生改变，就调用一次该函数
此触发器由服务器通过改变readyState的值来触发
2，readyState  对象状态，当此值发生改变时，就执行onreadystatechange注册的函数
0 :未初始化，未调用open方法
1 :正在加载，open已调用，send 未调用
2 ：send以调用，请求开始
3 ：代表交互中，服务器正在发送响应
4 ：代表响应完成
3，responseText  文本方式的响应内容
4，responseXML 把响应内容包装成XML 的DOM 对象
只有响应头包含text/xml时才可以使用
5，status  响应状态码，status标识响应状态，readyState标识请求状态
6，statusText 响应状态文本信息

5，开发步骤
有固定的步骤，利用XMLHttpRequest的方法和属性控制程序逻辑
1，创建XMLHttpRequest对象
2，注册onreadystatechange 的事件处理函数
3，open 打开到服务器的连接
4，send 发送数据
5，XMLHttpRequest 的一些属性会被服务器修改
readyState  status  reqponseText  respnseXML

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2