1. Ajax(Asynchronous Javascript and XML)的定义:一种不用刷新整个页面就可以与服务器通信的方法。
2. 与ajax相似的概念:
flash;java applet :用java编写,可以嵌入在网页中;框架(frame):如果用一组框架构建了一个页面,可以只单独更新其中一个框架;iframe:与frame的区别,frame是把网页切割成不同的牙面,而iframe是嵌入到页面中的一个新的页面;XMLHttpRequest对象:驱动Ajax的引擎3. Ajax不是一种具体的技术,它是几种技术协同产生的方法:
服务器端语言:php,java,python;XML:服务器与浏览器之间进行数据交换的一种数据格式(不仅限于XML);HTML或XHTML+CSS+javascript;XMLHttpRequest对象一种用在服务器和客户端之间通讯的对象,依赖于javascript;
创建方法:
function getHTTPObject(){ var xhr = false; /*chrome*/ if(window.XMLHttpRequest){ //对象检测 xhr = new XMLHttpRequest(); }else if(window.ActiveXObject){ /*IE*/ xhr = new ActiveXObject("Microsoft.XMLHttp"); } return xhr; }创建XMLHttpRequest实例后,与服务器的通讯包含三个部分:
onreadystatechange事件处理函数;open方法;send方法。
onreadystatechange: 在Ajax执行的过程中,服务器会通知客户端当前的通讯状态,这依赖于XMLHttpRequest对象的一个属性readystate。每次readystate的改变都会触发onreadystatechange函数;open: 客户端向服务器发送一个请求,方法包含两个必选参数,请求类型和请求的文件在服务器上的位置。 请求类型: Get: 将数据附加在URL上发送数据,对数据的大小有限制,而且由于数据在URL上所以安全性不够好。一般情况不发送数据是用GET。还有如果要对表单的结果页面加书签必须用GET; Post: 对数据大小的限制比GET宽松。数据作为请求的一部分发送,因此数据对用户不可见;文件位置:URL是否异步传输用户名和密码 send open方法定义了请求的细节,send方法将已经待命的请求发送到服务器。 //一个完整的Get请求 var request=getHTTPObject(); request.onreadychanger=dosomething; request.open("Get","file.txt",true); request.send(null); //Get请求无需发送数据 //一个完整的Post请求 var request=getHTTPObject(); request.onreadychanger=dosomething; request.open("Post","file.txt",true); request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");/*它会告诉服务器正在发送数据,而且数据已符合URL编码*/ request.send("name=jay+chou&message=hello+world");//每个名值对都符合URL编码,"+"表示空格setRequestHeader:当浏览器向服务器发送请求时,会伴随请求发送一组首部信息(header)。这些首部信息是一系列描述请求的元数据。首部信息用来声明一个请求是Get还是Post. setRequestHeader方法有两个参数,第一个参数定义了首部的名字,第二个参数表示要传递的首部的值。
用XMLHttpRequest的方法向服务器发送消息,同时根据该对象的属性来跟踪服务器和客户端之间的交互状态。
每次readyState 值的改变都会触发onreadystatechange函数:
onreadystatechange=dosomething;与浏览器想服务器发送带首部信息的请求类似,服务器向浏览器发送的每一个响应也带有首部信息。首部信息包含了浏览器的相关信息以及文档信息。 三位数状态码(即status)是响应中最重要的首部信息,并且属于HTTP的一部分:
404:not found;403 : 禁止访问;500:内部服务器出错;304 : 没有被修改(直接调用缓存);200 : 一切正常(OK),说明浏览器成功的接收到了响应。
function dosomething(){ if(request.readyState == 4){ if(request.status == 200 || request.status == 304){ // the response was sent successfully }else{ //something went wrong! } } }当浏览器从服务器接受数据时,这些数据必须是以浏览器能理解的格式发送:XML、JSON、HTML.
XML属于一种描述性语言(responseXML)
<?xml version="1.0" encoding="utf-8"?>//XML声明。指定了xml的版本和字符编码 <person> <name>Jeremy Keith</name> <website>http://www.baidu.com</website> </person>xml不能进行任何操作,它只是用来存数据,而不是对数据进行操作。例如,XML可以储存人的联系方式,而需要借助另一种编程语言(如javascript)获取xml文件中联系人的信息并把它显示在网页上。 优点: - 通用的数据格式 - 灵活,易操作 - 可以用dom的方法来解析任何标记
缺点: -从服务器端获取xml时必须确保正确的首部信息。如果文档类型不是application/xml,那么responseXML将是空的; -dom解析效率低 - XSLT可以通过模版把xml转化成html,但不是所有浏览器都支持XSLT
Json创始人建议把Json当作xml的轻量级替代品,xml内容同样可以存储在Json中,他们都属于一种基于文本的数据描述方式。不同的是,xml使用的是开始标签和结束标签,而Json使用的是冒号,逗号和大括号。 Json不是一种需要javascript解释的数据格式,Json本身就是javascript。(responseText)
优点: - 比xml更灵巧; - 不需要首部信息; - 可跨服务器传输。
缺点: - 语法过于严谨; - 不易阅读; - 用eval函数解析json数据有风险。
优点:如果以xml或json的方法传递数据,必须转换成html才能在界面上显示,而直接用html格式传输可以省去这一步(responseText)。可通过innerHTML直接将数据插入到页面中,节省时间;
缺点:html不适合更新一个页面中的多个部分,而且非常依赖于非标准属性innerHTML。
Hjax:可分离的ajax。产生原因是为了兼容浏览器没有(或禁用)javascript的情况;
定义:在网页设计中,按照不同功能的重要性差异排出优先级。比如先确保网页的内容被读取,再在这基础之上改进页面设计。这些改进都是各自独立,彼此之间没有任何依赖。(如CSS)
同css一样,应将javascript保存在外部文件中
XmlHttpRequest对象的open方法只能向同域名下的资源发送请求,而获取第三方服务数据的方法(跨域):
公共编程接口(API):返回xml格式的数据;(存在同域名限制的问题————不懂)代理(proxy):代理就是一个简单的网关(gateway),用它对请求进行转发。用自己的服务器作为第三方服务的代理。xmlHttpRequest对象向你自己的服务器请求某个文件,这个文件然后再向第三方服务器上的web服务器发送一个请求,由第三方服务器负责返回数据。这个数据最终会传回到xmlHttpRequest对象。 不足:请求和响应必须通过额外的网关来传输,这多出来的一步使数据传输的速度下降;优点:不再需要javascript。