《ajax知识点》由会员分享，可在线阅读，更多相关《ajax知识点（8页珍藏版）》请在金锄头文库上搜索。
1、Ajax 实例详解实例详解1、一句话：将 javascript 中的一个特殊对象 XMLHtmlRequest 与javascript 事件以及动态的 html 结合起来使用。2、客户端的执行流程：首先、创建 XHR 对象；然后向服务器发送请求；接着对服务器返回的响应做出解析.建立一个对服务器的调用所需要的基本信息：一、 服务器资源的 url二、 http 请求的方法三、 服务器资源所需的参数四、 一个 js 函数，对返回的结果进行解析 所以我们这里用 open方法来产生对服务器的请求。三个方法重载：open(http_method,url)open(http_method,url,async
2、hronous)open(http_method,url,asynchronous,userid,password)/连接需要用户名和密码的服务器。Asynchronous 为 true 表示异步通信，后台运行；同步请求会阻塞所有用户的请求直到响应返回所以我们通常使用异步。指定一个回调函数来接收服务器的响应。xhr.onreadystatechange = 函数名；传递的是一个函数的引用（后面无括号）执行 send 调用，可以用于发送那些不是由 URL 指定的参数；唯一的参数就是要在请求主题中发送的附加数据，get 一般为空，post才附加。请求所在的生命周期：值状态描述0Uninitiali
3、zed尚未调用 open1Loding已经执行 open2Loaded已经执行 send3Interactive服务器返回数据块4Complete请求完成，服务器数据发送完毕所以我们只需检测 readystate 的值是否是 4；还有一个 status 属性，包含请求的 http 状态，如果在 200299 之间表正常。通常我们取200function 回调函数() If(Xhr.readystate=4) If(xhr.status=200) 获取响应 responseText/responseXML 3、使用框架简化 Ajax（prototype,Jquery）4、get 和 post 请
4、求：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:35Aja
5、x：Asynchronous JavaScript and xml瞬态（transient）和独占（sovereign）Ajax 的四个基本原则：（1）浏览器中的是应用不是内容（2）服务器交互的是数据而不是内容（3）用户交互变得流畅而连续（4）有纪律的严肃编程全面理解 Http 的状态代码、就绪状态、XmlHttpRequest如下问题：1. 是否浏览器只是读取 HTML 中的文本并将其显示2. CSS 呢？尤其是当 CSS 位于外部文件时3. JavaScipt 呢？它也通常位于外部文件中4. 浏览器如何处理这些项，如何将事件处理程序、函数和样式映射到该文本标记？你控制的不是哪些现实效果、字
6、体大小，因为用户可以通过浏览器限制它们。你绝对控制的是页面的结构，牢记您的标记只为您的页面提供组织、框架，您就能立于不败之地。通过使用对象来表示 HTML 文档的每一部分，可以很容易的更改组织、应用样式、允许 javascript 访问文档。HTML 中的元素用 Element 对象类型表示。文档中的文本用 Text 类型表示，属性用 Attribute 类型表示，以此类推。DOM 中一切皆是节点：进一步划分为：元素节点、属性节点、文本节点等等。这三种是最常用的。我们创建节点的时候会自动加上结尾（闭合的标签）;DOM 的核心是与语言无关的的 API,可以用任何语言实现，DOM HTML 对象及
7、其属性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 元素，而是表示对象的
8、集合。对象的集合可以通过其父元素访问，如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 attribut
9、es ownerDocument namespaceURI Prefix localName IE 对于标签外面的空白符是不会创建其 text 对象的。而其他的浏览器会。DOM 核心中还有一个重要的元素那就是 Element.文档中的所有页面元素都将从 Element 元素中继承一个 API 和多个属性getAttribute(name) setAttribute(name,value) removeAttribute(name)getAttributeNode(name) setAttributeNode(attr) removeAttrbuteNode(attr) has Attribut
10、e(name)3.文本节点文本节点：appendData(text) 将提供的文本追加到文本节点的已有内容之后。 insertData(position, text) 允许在文本节点的中间插入数据。在指定的位置插入提供的文本。 replaceData(position, length, text) 从指定位置开始删除指定长度的字符，用提供的文本代替删除的文本。4.XML 到底有用没用？XMLHttpRequest 糟糕的名称和 Http请求是 http 而非 xml.https 表示安全的 HTTP，只是使用了比一般 Web 请求更安全的 HTTP 协议形式。因此即便是 HTTPS，实际上用的
11、仍然是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
12、:小巧，有面向对象的特征，且有很多第三方的 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:传
13、递的参数：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”);$.getJSON(url,args,function(data);若从服务端返回字符串，属性名必须使用双引号，使用转义字符(ctrl+f)用/替换。使用 Jackson：导入 jar 包：具体的使用步骤：（1）建 ObjectMapper 对象 （2）方法 writeValueAsString注意：它是通过 getter 方法来定位 Json 的属性，而不是字段一个注解：忽视：JsonIgnore
