Ajax知识点.doc

Ajax实例详解1、一句话：将javascript中的一个特殊对象XMLHtmlRequest与javascript事件以及动态的html结合起来使用。2、客户端的执行流程：首先、创建XHR对象；然后向服务器发送请求；接着对服务器返回的响应做出解析.建立一个对服务器的调用所需要的基本信息：一、 服务器资源的url二、 http请求的方法三、 服务器资源所需的参数四、 一个js函数，对返回的结果进行解析 所以我们这里用open方法来产生对服务器的请求。三个方法重载：open(http_method,url)open(http_method,url,asynchronous)open(http_method,url,asynchronous,userid,password)/连接需要用户名和密码的服务器。Asynchronous为true表示异步通信，后台运行；同步请求会阻塞所有用户的请求直到响应返回所以我们通常使用异步。指定一个回调函数来接收服务器的响应。xhr.onreadystatechange = 函数名；传递的是一个函数的引用（后面无括号）执行send调用，可以用于发送那些不是由URL指定的参数；唯一的参数就是要在请求主题中发送的附加数据，get一般为空，post才附加。请求所在的生命周期：值状态描述0Uninitialized尚未调用open1Loding已经执行open2Loaded已经执行send3Interactive服务器返回数据块4Complete请求完成，服务器数据发送完毕所以我们只需检测readystate的值是否是4；还有一个status属性，包含请求的http状态，如果在200299之间表正常。通常我们取200function 回调函数() If(Xhr.readystate=4) If(xhr.status=200)获取响应 responseText/responseXML3、使用框架简化Ajax（prototype,Jquery）4、get和post请求：Get：如果请求是幂等的，多个请求返回相同的结果；Post:当改变服务器上的状态；额外添加如下设置：xmlhttp.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”);5、问什么把时间戳放在url后面？timestamp=”+new Date().getTime();答：有些浏览器会把多个XMLHttpRequest请求的结果缓存在统一个URL,如果对每个请求的响应不同，这就会带来不好的结果，为了保证url的唯一性，从而避免缓存结果冲突。2014年4月18日 10:41:35Ajax：Asynchronous JavaScript and xml瞬态（transient）和独占（sovereign）Ajax的四个基本原则：（1） 浏览器中的是应用不是内容（2） 服务器交互的是数据而不是内容（3） 用户交互变得流畅而连续（4） 有纪律的严肃编程全面理解Http的状态代码、就绪状态、XmlHttpRequest如下问题：1. 是否浏览器只是读取HTML中的文本并将其显示2. CSS呢？尤其是当CSS位于外部文件时3. JavaScipt呢？它也通常位于外部文件中4. 浏览器如何处理这些项，如何将事件处理程序、函数和样式映射到该文本标记？你控制的不是哪些现实效果、字体大小，因为用户可以通过浏览器限制它们。你绝对控制的是页面的结构，牢记您的标记只为您的页面提供组织、框架，您就能立于不败之地。通过使用对象来表示HTML文档的每一部分，可以很容易的更改组织、应用样式、允许javascript访问文档。HTML中的元素用Element对象类型表示。文档中的文本用Text类型表示，属性用Attribute类型表示，以此类推。DOM中一切皆是节点：进一步划分为：元素节点、属性节点、文本节点等等。这三种是最常用的。我们创建节点的时候会自动加上结尾（闭合的标签）;DOM的核心是与语言无关的的API,可以用任何语言实现，DOM HTML对象及其属性id,title,lang,dir,className(class);1、在DOM规范发布之前，浏览器已经以不同的形式实现了BOM,有些专用，有些不是，为了与这些之前的工作保持向后兼容，W3C还发布了DOM API的一个自定义子集：DOM HTML API.DOM HTML API是面向对象的、层次结构的Web页面视图，它提供了一些映射到HTML元素的对象：针对document的HTMLDocumentElement、针对body的HTMLBodyElement等。DOM集合：有些DOM HTML接口并不直接表示特定的html元素，而是表示对象的集合。对象的集合可以通过其父元素访问，如document(all、anchors、forms、images、links)和form（Elements）,用HTMLCollection接口表示的。HTMLCollection接口只有一个名为length的属性，还有两个方法：一个是item(i),另一个是namedItem(“”);2、DOM:Core API节点属性和方法nodeName nodeValue nodeType parentNode childNodes firstChild lastChild priviousSibling nextSibling attributes ownerDocument namespaceURI Prefix localName IE对于标签外面的空白符是不会创建其text对象的。而其他的浏览器会。DOM核心中还有一个重要的元素那就是Element.文档中的所有页面元素都将从Element元素中继承一个API和多个属性getAttribute(name) setAttribute(name,value) removeAttribute(name)getAttributeNode(name) setAttributeNode(attr) removeAttrbuteNode(attr) has Attribute(name)3.文本节点：appendData(text) 将提供的文本追加到文本节点的已有内容之后。 insertData(position, text) 允许在文本节点的中间插入数据。在指定的位置插入提供的文本。 replaceData(position, length, text) 从指定位置开始删除指定长度的字符，用提供的文本代替删除的文本。4.XML到底有用没用？XMLHttpRequest糟糕的名称和Http请求是http而非xml.https 表示安全的 HTTP，只是使用了比一般 Web请求更安全的 HTTP 协议形式。因此即便是 HTTPS，实际上用的仍然是HTTP，虽然增加了某些安全层来挡住那些好奇的眼睛。XML 选项在异步应用程序中 XML 有两种基本的用法： (1)以 XML 格式从网页向服务器发送请求 xmlHttp.setRequestHeader(Content-Type, text/xml);/不可少 (2)以 XML 格式在网页中从服务器接收请求2014年4月20日 13:24:53Ajax传输数据的三重方式；（1） xml:笨重，解析困难，但xml是通用的数据交换方式（2） Html：不需要解析可以直接放到文档中，若仅更新一部分区域，但传输数据有限不是很方便，且html代码需要拼装完成（3） JSON:小巧，有面向对象的特征，且有很多第三方的jar可以把java对象集合转为JSON字符串。使用Jquery完成Ajax操作1) load方法：可以用于html文档的元素节点，把结果直接加为对应节点的子元素，通常而言，load方法加载后的数据是一个html片段var $obj = var url = .Var args = key:value,.;$obj.load(url,args);2)$.get,$.post,$.getJSON:更加灵活，除去使用load方法的情况，大部分使用这三个方法：I、基本的使用/url:Ajax请求的目标url/args:传递的参数：json类型/data:Ajax响应成功后的数据，可能是XML,html，json$.get(url,args,function(data)II.请求JSON数据$.get(url,args,function(data),”JSON”);$.post(url,args,function(data),”JSON”);$.g